Next.js 與 React？ 這是一種夥伴關係，而不是競爭

已發表: 2023-02-07

現代 Web 開發人員並不缺少 JavaScript 庫和框架。 最普遍的庫之一是 React，它是 Facebook（現為 Meta）創建的，用於幫助構建功能豐富的應用程序。 React 應用程序傳統上運行在 Web 瀏覽器中，但 Next.js 框架通過 JavaScript 運行時環境 Node.js 將 React 功能擴展到服務器端。

在本文中，我們將研究 Next.js 和 React，以便您可以決定它們是否適合您的下一個項目。

Next.js 和 React：更上一層樓的 JavaScript

SlashData 2022 年的一項調查發現，全球有超過 1700 萬 JavaScript 程序員，其中包括 Python 和 Java 等流行語言。 JavaScript 可用於客戶端和服務器端，這種多功能性意味著開發人員可以使用一種編程語言構建成熟的應用程序。

顯示使用各種語言的程序員數量的圖表表明許多人都在想 Next.js 與 React。
Slash/Data 對 2022 年程序員使用的語言的調查。（來源：Statista）

React 等 JavaScript 庫和 Next.js 等框架的引入進一步促進了這種發展。 這些庫和框架提供了簡化前端和後端集成的功能。 此外，開發人員可以使用 npm（Node.js 包管理器）等包管理器來擴展 JavaScript 功能，以安裝 JavaScript 庫和工具。 這些資源提供了複雜的功能，可以減少您必須自己編寫的代碼量。

JavaScript 的可擴展性意味著對其最常用工具的全面了解是您作為 Web 開發人員取得成功的關鍵。

什麼是 Next.js？

Next.js 最初由 Vercel 於 2016 年發布，是一個開源 React 框架，它提供構建塊來創建高性能 Web 應用程序。 此後，大公司都採用了它，包括 Twitch、TikTok 和 Uber 等。

Next.js 為構建快速、SEO 友好的應用程序提供了最佳的開發人員體驗之一。 以下是 Next.js 的一些特性，這些特性使其成為一個出色的生產框架：

  • 混合渲染能力
  • 自動代碼拆分
  • 圖片優化
  • 內置支持 CSS 預處理器和 CSS-in-JS 庫
  • 內置路由

這些功能幫助 Next.js 開發人員在配置和工具上節省了大量時間。 您可以直接跳轉到構建您的應用程序，這可能支持如下項目：

  • 電子商務商店
  • 博客
  • 儀錶盤
  • 單頁應用
  • 交互用戶界面
  • 靜態網站

什麼是反應？

React 是一個用於構建動態用戶界面的 JavaScript 庫。 除了創建 Web 界面之外，您還可以使用 React Native 構建移動應用程序。

使用 React 的一些好處包括：

  • 改進的性能： React 不是更新 DOM 中的每個組件，而是使用虛擬 DOM 僅更新更改的組件。
  • 高度基於組件：創建組件後，您可以重複使用它。
  • 輕鬆調試： React 應用程序使用單向數據流——僅從父組件到子組件。

Next.js 與 React

儘管開發人員經常出於相同目的使用 Next.js 和 React，但兩者之間存在一些根本差異。

使用方便

從 Next.js 和 React 入手很容易。 每個都需要使用npx在您的終端中運行單個命令，它是 Node.js 的 npm 的一部分。

對於 Next.js，最簡單的命令是：

 npx create-next-app

如果create-next-app沒有附加參數，安裝將以交互模式進行。 您將被要求提供項目名稱（將用於項目目錄），以及您是否要包括對 TypeScript 和代碼 linter ESLint 的支持。

它看起來像這樣：

使用 npx 創建的 Next.js 應用程序的屏幕截圖。
在交互模式下創建 Next.js 應用程序。

初始化 React 實例時，最簡單的命令包括項目目錄的名稱：

 npx create-react-app new-app

這會生成一個文件夾，其中包含所有必要的初始配置和依賴項：

使用 npx 創建的 React 項目的屏幕截圖。
在終端命令行上創建 React 項目。

雖然兩者都很容易開始，但請記住 Next.js 是建立在 React 之上的。 因此，如果不先學習 React 並了解它的工作原理，就無法學習 Next.js。 幸運的是，React 擁有平緩的學習曲線，非常適合初學者。

同樣重要的是要注意 React 是相對非結構化的。 您必須安裝和設置 React 路由器，並決定如何處理數據獲取、圖像優化和代碼拆分。 此設置要求您安裝和配置其他庫和工具。

相比之下，Next.js 預安裝和預配置了這些工具。 使用 Next.js，任何添加到pages文件夾的文件都會自動充當路由。 由於這種內置支持，Next.js 更易於日常使用，使您能夠立即開始編寫應用程序邏輯。

規劃您自己的稱霸世界的應用程序？ 本指南將幫助您為您的項目選擇正確的選項️ 點擊推特

Next.js 和 React 特性

因為 Next.js 基於 React，所以兩者共享一些特性。 然而，Next.js 更進一步，包括額外的功能，如路由、代碼拆分、預渲染和開箱即用的 API 支持。 這些是您在使用 React 時需要自己配置的功能。

數據抓取

React 在客戶端呈現數據。 服務器將靜態文件發送到瀏覽器，然後瀏覽器從 API 獲取數據以填充應用程序。 由於應用加載緩慢，此過程會降低應用性能並提供較差的用戶體驗。 Next.js 通過預渲染解決了這個問題。

通過預呈現，服務器在將應用程序發送到瀏覽器之前進行必要的 API 調用並獲取數據。 因此，瀏覽器接收準備呈現的網頁。

預渲染可以指靜態站點生成（SSG）或服務器端渲染（SSR）。 在 SSG 中，HTML 頁面在構建時生成並重複用於多個請求。 Next.js 可以生成包含或不包含數據的 HTML 頁面。

下面是 Next.js 如何生成沒有數據的頁面的示例：

 function App() { return <div>Welcome</div> } export default App

對於使用外部數據的靜態頁面，請使用getStaticProps()函數。 從頁面導出getStaticProps()後，Next.js 將使用它返回的道具預渲染頁面。 此函數始終在服務器上運行，因此當頁面使用的數據在構建時可用時，請使用getStaticProps() 。 例如，您可以使用它從 CMS 中獲取博客文章。

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

在頁面路徑依賴於外部數據的情況下，使用getStaticPaths()函數。 因此，要根據帖子 ID 創建路徑，請從頁面導出getStaticPaths() 。

例如，您可以從pages/posts/[id].js導出getStaticPaths() ，如下所示。

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths()通常與getStaticProps()搭配使用。 在此示例中，您將使用getStaticProps()來獲取路徑中 ID 的詳細信息。

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

在 SSR 中，數據在請求的時間被獲取並發送到瀏覽器。 要使用 SSR，請從要呈現的頁面導出getServerSide()道具函數。 服務器在每次請求時調用此函數，這使得 SSR 對於使用動態數據的頁面非常有用。

例如，您可以使用它從新聞 API 中獲取數據。

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

每次請求都會獲取數據，並通過 props 傳遞給 News 組件。

代碼拆分

代碼拆分將代碼分成瀏覽器可以按需加載的塊。 它減少了在初始加載期間發送到瀏覽器的代碼量，因為服務器只發送用戶需要的內容。 Webpack、Rollup 和 Browserify 等打包器支持 React 中的代碼拆分。

Next.js 支持開箱即用的代碼拆分。

使用 Next.js，每個頁面都是代碼拆分的，向應用程序添加頁面不會增加包的大小。 Next.js 還支持動態導入，允許您導入 JavaScript 模塊並在運行時動態加載它們。 動態導入有助於加快頁面速度，因為包是延遲加載的。

例如，在下面的Home組件中，服務器不會在初始包中包含 hero 組件。

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

相反，懸念的後備元素將在加載英雄組件之前呈現。

Next.js 與 React 中的 API 支持

Next.js API 路由功能使您能夠在同一代碼庫中編寫後端和前端代碼。 保存在/pages/api/文件夾中的任何頁面都映射到/api/*路由，Next.js 將其視為 API 端點。

例如，您可以創建一個返回當前用戶名的pages/api/user.js API 路由，如下所示：

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

如果您訪問https://app-url/api/user URL，您將看到用戶名對象。

 { username: 'Jane' }

當您想要屏蔽您正在訪問的服務的 URL 或者想要在不對整個後端應用程序進行編碼的情況下對環境變量保密時，API 路由很有用。

表現

Next.js 在通過簡化流程創建性能更好的應用程序方面無疑更勝一籌。 SSR 和 SSG Next.js 應用程序的性能優於客戶端渲染 (CSR) React 應用程序。 通過在服務器上獲取數據並發送瀏覽器需要呈現的所有內容，Next.js 消除了對 API 的數據獲取請求的需要。 這意味著更快的加載時間。

此外，因為 Next.js 支持客戶端路由。 每次用戶導航到另一條路線時，瀏覽器不必從服務器獲取數據。 此外，Next.js 圖像組件支持自動圖像優化。 圖像僅在進入視口時加載。 在可能的情況下，Next.js 還提供 WebP 等現代格式的圖像。

Next.js 還提供字體優化、智能路由預取和捆綁優化。 這些優化在 React 中不會自動可用。

支持

因為 React 比 Next.js 存在的時間更長，所以它擁有更廣泛的社區。 然而，許多 React 開發人員正在採用 Next.js，因此社區正在穩步增長。 開發人員可以更輕鬆地找到他們遇到的問題的現有解決方案，而不必從頭開始構建解決方案。

Next.js 還具有出色的文檔，其中包含易於理解的全面示例。 儘管 React 很受歡迎，但 React 文檔並不那麼易於導航。

你是 Next.js 團隊還是 React 團隊？ 探索這篇文章中的兩個流行選項點擊推特

概括

選擇 Next.js 或 React 取決於應用程序的要求。

Next.js 通過提供提高性能的結構和工具來增強 React 的功能。 這些工具，如路由、代碼拆分和圖像優化，內置於 Next.js 中，這意味著開發人員無需手動配置任何內容。 得益於這些特性，Next.js 易於使用，開發人員可以立即開始編寫業務邏輯。

由於渲染選項不同，Next.js 適用於服務器端渲染應用程序或結合靜態生成和 Node.js 服務器端渲染的應用程序。 此外，由於 Next.js 提供的優化功能，它非常適合需要快速的網站，例如電子商務商店。

React 是一個 JavaScript 庫，可以幫助您創建和擴展健壯的前端應用程序。 它的語法也很簡單，特別是對於具有 JavaScript 背景的開發人員而言。 此外，您可以控制在應用程序中使用的工具以及如何配置它們。

規劃您自己的稱霸世界的應用程序？ 深入了解 Kinsta 為支持 React 和 Next.js 的服務託管 Node.js 應用程序的方法。