# Next.js vs. React: A Comparative Tutorial # Next.js 与 React：对比教程 **Discover the differences between React and Next.js, a framework used by companies like TikTok, Hulu, and Nike to supercharge their web apps. Plus: Learn when and how to use Next.js, including rendering, routing, page, and navigation tips.** **探索 React 与 Next.js 之间的差异，Next.js 是 TikTok、Hulu 和 Nike 等公司用于增强其 Web 应用程序的框架。此外：了解何时以及如何使用 Next.js，包括渲染、路由、页面和导航技巧。** --- Next.js is a lightning-fast React framework trusted by data-heavy streaming sites like Hulu and Netflix. If you’re already versed in React, you should definitely get to know this increasingly popular technology. Next.js 是一个闪电般快速的 React 框架，深受 Hulu 和 Netflix 等数据密集型流媒体网站的信赖。如果你已经精通 React，那么绝对应该了解这项日益流行的技术。 Though both React and Next.js help create effective web user interfaces, they have some key differences: Next.js is more feature-rich and opinionated than React. It is especially well-suited for websites focused on search engine optimization (SEO) or pre-rendering. 虽然 React 和 Next.js 都能帮助创建高效的 Web 用户界面，但它们有一些关键区别：Next.js 比 React 功能更丰富，也更具“约束力”（opinionated）。它特别适合注重搜索引擎优化（SEO）或预渲染（pre-rendering）的网站。 ## Next.js vs. React ## Next.js 与 React 的对比 React, which debuted in 2013, is much more established than Next.js. But the younger framework, released in 2016, is growing in popularity, with more than 113K GitHub stars as of October 2023 and millions of weekly npm downloads. Let’s see a basic Next.js vs. React performance comparison that breaks down when to use Next.js vs. React: React 首次亮相于 2013 年，比 Next.js 成熟得多。但这位于 2016 年发布的年轻框架正在迅速普及，截至 2023 年 10 月，它在 GitHub 上拥有超过 11.3 万颗星，每周 npm 下载量达数百万次。让我们通过一个基本的性能对比，来分析何时该使用 Next.js，何时该使用 React： * **Development speed:** Next.js provides out-of-the-box features that ease the development process for making an advanced React app. With the introduction of its own compiler in Next.js 12, the framework also increased build speeds. Compared to React, Next.js reduces the amount of time an engineer needs to wait for code to refresh, minimizing developer frustration and slowdowns. **开发速度：** Next.js 提供了开箱即用的功能，简化了构建高级 React 应用的开发流程。随着 Next.js 12 引入了自己的编译器，该框架还提高了构建速度。与 React 相比，Next.js 减少了工程师等待代码刷新的时间，最大限度地减少了开发者的挫败感和进度延误。 * **Data fetching and load times:** Next.js can traverse the React tree and query for data in the server, allowing for pre-loaded page data. This often results in lower application load times for pages served by Next.js compared to pages written in vanilla React. **数据获取和加载时间：** Next.js 可以遍历 React 组件树并在服务端查询数据，从而实现页面数据的预加载。与使用原生（Vanilla）React 编写的页面相比，由 Next.js 提供的页面通常具有更短的应用加载时间。 * **Rendering and SEO:** Next.js offers pre-rendering, whereas React uses client-side rendering. Pre-rendered pages enable effective SEO strategies that are challenging to achieve in a plain React app. **渲染和 SEO：** Next.js 提供预渲染（Pre-rendering），而 React 使用客户端渲染（CSR）。预渲染页面能够实现有效的 SEO 策略，而在纯 React 应用中实现这一点极具挑战性。 * **Routing:** Next.js provides a structured, predefined file system for routing. Its system offers reduced flexibility compared to React’s various library options (e.g., React Router), but simplifies page setup and routing. **路由：** Next.js 提供了一个结构化的、预定义的文件系统路由。与 React 多样的库选项（如 React Router）相比，其系统的灵活性稍低，但简化了页面设置和路由管理。 React serves a variety of project types very well, including user dashboards, back-end systems, internal organization tools, and data visualization systems. Next.js is the ideal toolkit with which to enhance React applications that benefit from the power of pre-rendering, including e-commerce stores, social media apps, ticket-booking systems, and education platforms. Let’s explore some of its use cases in more detail, so you can answer the question, “Should I use Next.js?” React 非常适合多种类型的项目，包括用户仪表盘、后台系统、内部组织工具和数据可视化系统。而 Next.js 则是增强 React 应用的理想工具包，特别适合那些能从预渲染能力中获益的应用，包括电子商务商店、社交媒体应用、票务系统和教育平台。让我们更详细地探讨它的一些用例，以便你回答“我应该使用 Next.js 吗？”这个问题。 ## Rendering in Next.js ## Next.js 中的渲染 Rendering is the process that converts React code into HTML that the browser then displays as the page’s user interface. Next.js provides three rendering methods—client-side rendering (CSR), server-side rendering (SSR), and static site generation (SSG)—and the added bonus of incremental static regeneration (ISR). ISR combines server-side rendering with a semi-static caching mechanism that relieves server load and provides speeds similar to those achieved by a static site. 渲染是将 React 代码转换为 HTML 的过程，浏览器随后将这些 HTML 显示为页面的用户界面。Next.js 提供三种渲染方法——客户端渲染（CSR）、服务端渲染（SSR）和静态站点生成（SSG）——以及额外的增量静态再生（ISR）。ISR 结合了服务端渲染和半静态缓存机制，既减轻了服务器负载，又提供了可与静态站点媲美的速度。 Server-side rendering and static site generation fall under the umbrella of pre-rendering, in which HTML pages are generated before being sent to the client side. A great advantage of using Next.js is that it adds powerful support for pre-rendering React apps. 服务端渲染和静态站点生成都属于预渲染（Pre-rendering）的范畴，即 HTML 页面在发送到客户端之前就已经生成。使用 Next.js 的一大优势在于它为 React 应用增加了强大的预渲染支持。 ### Client-side Rendering ### 客户端渲染 (CSR) Client-side rendering is the default for vanilla React applications. This method generates the page’s HTML on the client side. In other words, rendering efforts take place in the user’s browser, and JavaScript from the user’s device generates the HTML. The UI appears after the rendering is complete, when the webpage is also interactive (i.e., hydrated). 客户端渲染是原生 React 应用的默认方式。这种方法在客户端生成页面的 HTML。换句话说，渲染工作发生在用户的浏览器中，由用户设备上的 JavaScript 生成 HTML。用户界面（UI）在渲染完成后才会显示，此时网页也具备了交互性（即完成了“水合/Hydration”）。 CSR is possible for Next.js components using React’s `useEffect` or `useSWR`. Next.js 组件可以通过使用 React 的 `useEffect` 或 `useSWR` 来实现 CSR。 ### Server-side Rendering ### 服务端渲染 (SSR) Next.js also enables the generation of a page’s HTML on the server. In this case, the generated HTML is sent to the client so that the webpage’s UI appears before hydration. Then, the viewable webpage is ready for interaction after the client finishes initializing the JavaScript. Next.js 还支持在服务器上生成页面的 HTML。在这种情况下，生成的 HTML 会被发送到客户端，因此网页的 UI 在“水合”之前就已经显示出来。然后，在客户端完成 JavaScript 初始化后，可见的网页就准备好进行交互了。 On pages where we want Next.js to perform server-side rendering, some simple configuration functions are added to the page. 在我们需要 Next.js 执行服务端渲染的页面上，只需添加一些简单的配置函数即可（如 `getServerSideProps`）。 ### Static Site Generation ### 静态站点生成 (SSG) Next.js also offers static site generation, in which all static HTML pages are rendered from the JavaScript at build time. Generating a static site from a React code base requires more upfront build time compared to a React single-page application. However, the payoff here is having static content that can be served and cached at the maximum speed allowed by the site content without the computational overhead of SSR. Next.js 还提供静态站点生成，即所有的静态 HTML 页面都是在构建时（build time）通过 JavaScript 渲染的。与 React 单页应用（SPA）相比，从 React 代码库生成静态站点需要更多的前期构建时间。然而，其回报是获得了静态内容，这些内容可以以最快的速度被分发和缓存，且没有 SSR 的计算开销。 We can perform SSG on Next.js pages that we want to generate statically with `getStaticProps()` and `getStaticPaths()`, the latter of which defines the routes for static pages. 我们可以使用 `getStaticProps()` 和 `getStaticPaths()` 对想要静态生成的 Next.js 页面执行 SSG，后者用于定义静态页面的路由。 ## Next.js Search Engine Optimization ## Next.js 搜索引擎优化 (SEO) Next.js’s speed and ability to pre-render all pages of a website allows search engines to quickly and easily crawl and index the website, improving SEO. SEO is critical for many businesses and websites because websites with better SEO appear higher in search results. Users are more likely to click on higher-ranked websites, with the top result having an average click-through rate of 27.6%, a rate that is ten times greater than the tenth result’s click-through rate of 2.4%. Next.js 的速度以及预渲染网站所有页面的能力，使得搜索引擎能够快速、轻松地抓取和索引网站，从而提升 SEO。对于许多企业和网站来说，SEO 至关重要，因为 SEO 更好的网站在搜索结果中排名更高。用户更有可能点击排名靠前的网站，排名第一的结果平均点击率（CTR）为 27.6%，这一比率是排名第十的结果（2.4%）的十倍以上。 React websites with large amounts of content—and the resultant JavaScript code used for rendering—face SEO challenges when dealing with Google crawling and indexing. 拥有大量内容的 React 网站——以及随之而来的用于渲染的大量 JavaScript 代码——在应对 Google 的抓取和索引时会面临 SEO 挑战。 The ability of Next.js to easily perform server-side rendering (SSR) not only enhances SEO rankings, but also improves a website’s perceived and actual load time for an optimal user experience. Next.js 轻松执行服务端渲染（SSR）的能力不仅提升了 SEO 排名，还改善了网站的感知加载时间和实际加载时间，从而提供了最佳的用户体验。 ## Getting Started With Next.js ## Next.js 入门 Now we’ll look at the essentials of Next.js setup, routing, pages, and navigation so you can reap the benefits of pre-rendering and SEO. Before starting our Next.js tutorial, ensure that you have the latest version of Node.js downloaded on your system. You can verify the Node.js version on your machine with `node --version`. 现在我们来看看 Next.js 的设置、路由、页面和导航的基础知识，以便你能享受到预渲染和 SEO 的好处。在开始我们的 Next.js 教程之前，请确保你的系统上下载了最新版本的 Node.js。你可以通过 `node --version` 来验证机器上的 Node.js 版本。 There are two ways to set up a Next.js project: 有两种方法可以设置 Next.js 项目： * Automatic setup, with predefined configurations 自动设置，包含预定义配置 * Manual setup and configurations 手动设置和配置 We’ll follow the automatic setup to get started on our project more easily. The `create-next-app` CLI tool manages the automatic setup and makes it possible to quickly build applications. Let’s create our project with the built-in Next.js support for TypeScript, a strict syntactical superset of JavaScript, to ensure proper type structure: 我们将采用自动设置以便更轻松地开始项目。`create-next-app` 命令行工具负责管理自动设置，并使快速构建应用程序成为可能。让我们利用 Next.js 内置的 TypeScript 支持来创建项目（TypeScript 是 JavaScript 的严格语法超集），以确保正确的类型结构： ```shell npx create-next-app@latest --typescript ``` `create-next-app` will ask for the name of your application. Your project name must consist of lowercase letters and use hyphens instead of spaces. For example, I’ve named my application `next-js-tutorial`. Once setup is complete, you’ll see a success note in your terminal. `create-next-app` 会询问你的应用程序名称。你的项目名称必须由小写字母组成，并使用连字符代替空格。例如，我将我的应用程序命名为 `next-js-tutorial`。设置完成后，你将在终端中看到成功提示。 In our new project, we can see that Next.js mandates a rigid file structure system: 在我们的新项目中，可以看到 Next.js 强制执行了一套严格的文件结构系统： * The website’s `pages` and `styles` are organized into their own folders. 网站的 `pages`（页面）和 `styles`（样式）被组织在各自的文件夹中。 * APIs are stored in the `pages/api` folder. API 存储在 `pages/api` 文件夹中。 * Publicly available assets are held in the `public` folder. 公开可用的资源保存在 `public` 文件夹中。 ![File Structure for Next.js Projects](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2FUntitled-c3ce1a44e9f08dee0d5f1383703012c7.png) *(Caption: File Structure for Next.js Projects / Next.js 项目的文件结构)* ## Next.js Routing and Pages ## Next.js 的路由和页面 Next.js uses its file structure inside the `pages` directory to define the application routes. Next.js 使用其 `pages` 目录内的文件结构来定义应用程序的路由。 We define all routes in the `pages` folder. The default `pages/index.tsx` file is the application’s entry point where we define custom fonts, application tracking codes, and other items requiring global access. 我们在 `pages` 文件夹中定义所有路由。默认的 `pages/index.tsx` 文件是应用程序的入口点，我们在其中定义自定义字体、应用程序跟踪代码以及其他需要全局访问的项目。 There are two methods for adding new routes: 添加新路由有两种方法： * Add a file ending in `.tsx` directly in `pages`. 直接在 `pages` 中添加一个以 `.tsx` 结尾的文件。 * Add an `index.tsx` file under a new subfolder of `pages` (`index` files are automatically routed to the directory root). 在 `pages` 的新子文件夹下添加一个 `index.tsx` 文件（`index` 文件会自动路由到该目录的根路径）。 Let’s examine a few concrete Next.js examples for routing. We’ll implement a simple page route for our tutorial, then touch on nested and dynamic routing concepts. 让我们来看几个具体的 Next.js 路由示例。我们将为教程实现一个简单的页面路由，然后简要介绍嵌套路由和动态路由的概念。 ### Page Routes ### 页面路由 We can add a basic page route, such as `about-us`, with an `about-us.tsx` file: 我们可以通过添加一个 `about-us.tsx` 文件来增加一个基本的页面路由，例如 `about-us`： ```text |— pages | |— _app.tsx | |— about-us.tsx | |— api | |— index.tsx ``` Or we can use an `index.tsx` file under a `pages/about-us` folder: 或者我们可以使用 `pages/about-us` 文件夹下的 `index.tsx` 文件： ```text |— pages | |— _app.tsx | |— about-us | | |— index.tsx | |— api | |— index.tsx ``` Go ahead and add the `about-us.tsx` page route to your project. 现在，请将 `about-us.tsx` 页面路由添加到你的项目中。 ```tsx import styles from '../styles/Home.module.css' const AboutUs: NextPage = () => { return (

About Us Example Page

) } export default AboutUs ``` We’ll see page routing in action when we use it in combination with Next.js navigation. For now, we’ll return a placeholder `NextPage` with a title string so the navigation will work properly. 当我们将页面路由与 Next.js 导航结合使用时，就能看到它的实际效果。目前，我们先返回一个带有标题字符串的占位符 `NextPage`，以便导航能够正常工作。 ### Nested Routes ### 嵌套路由 Nested routes allow for multiple layouts to be reused and selectively updated on a page (for example, when a user clicks a URL, you may want to update the body content but preserve the header and footer layouts). 嵌套路由允许在页面上复用和选择性更新多个布局（例如，当用户点击 URL 时，你可能希望更新正文内容，但保留页眉和页脚布局）。 ```text |— pages | |— _app.tsx | |— api | |— index.tsx | |— parent | | |— child.tsx ``` We define the nested route `/parent/child` with a `parent` folder and a nested `child` folder or file (our example shows a file). 我们通过一个 `parent` 文件夹和一个嵌套的 `child` 文件夹或文件（我们的示例显示的是文件）来定义嵌套路由 `/parent/child`。 ### Dynamic Routes ### 动态路由 Dynamic routes allow layouts to respond to real-time changes in cases where predefined paths do not suffice. Let’s say we want to create a `/product/[productId]` route (i.e., when a product is clicked, expand its component). Assuming that `productId` is a variable accessible in our definition of `Product`, we can easily add a dynamic route by creating a `product` folder and wrapping our `productId` page in brackets: 动态路由允许布局在预定义路径无法满足需求的情况下响应实时变化。假设我们想创建一个 `/product/[productId]` 路由（即当点击产品时，展开其组件）。假设 `productId` 是我们在 `Product` 定义中可以访问的变量，我们可以通过创建一个 `product` 文件夹并将 `productId` 页面用方括号括起来，轻松添加动态路由： ```text |— pages | |— _app.tsx | |— api | |— index.tsx | |— product | | |— [productId].tsx ``` This way, a route like `product/testId` will have its query parameters set (i.e., `productId` is set to `testId`). 这样，像 `product/testId` 这样的路由就会设置好它的查询参数（即 `productId` 被设置为 `testId`）。 Finally, it is also possible to combine routing techniques. For example, we could create the nested dynamic route `pages/post/[postId]/[comment].tsx`. 最后，也可以组合多种路由技术。例如，我们可以创建嵌套动态路由 `pages/post/[postId]/[comment].tsx`。 ## Next.js Navigation ## Next.js 导航 Next.js uses its own custom `Link` components instead of the `` HTML tag when navigating between client-side pages to allow Next.js to optimize navigation and data pre-fetching. `Link` operates similarly to the `` tag and uses `href` as the route to be opened. You must use the `passHref` prop to force `Link` to pass its route value to child components (i.e., when using custom-styled components). 在客户端页面之间导航时，Next.js 使用其自定义的 `Link` 组件而不是 HTML 的 `` 标签，这允许 Next.js 优化导航和数据预取。`Link` 的操作类似于 `` 标签，并使用 `href` 作为要打开的路由。当使用自定义样式组件作为子组件时，必须使用 `passHref` 属性强制 `Link` 将其路由值传递给子组件。 The major benefit to using `Link` instead of the `` tag is that it pre-loads data in the background when a user hovers over or near a link. This makes the content more readily available for the client to process, delivering improved app performance. You may still use the `` tag in Next.js when linking to external pages outside of the app. 使用 `Link` 而不是 `` 标签的主要好处是，当用户将鼠标悬停在链接上或靠近链接时，它会在后台预加载数据。这使得内容更容易被客户端处理，从而提高了应用性能。在 Next.js 中链接到应用外部的页面时，你仍然可以使用 `` 标签。 To link to our About Us page from the Next.js project blueprint, open the `pages/index.tsx` main app file. We’ll first import the `Link` component from `next/link`, and then add a linked paragraph below the `

` component: 要从 Next.js 项目蓝图中链接到我们的“关于我们”页面，请打开 `pages/index.tsx` 主应用文件。我们首先从 `next/link` 导入 `Link` 组件，然后在 `

` 组件下方添加一个链接段落： ```xml
Here's our example About Us page
``` Now we can run our app using the `npm run dev` shell command, visit `http://localhost:3000`, and see our added text and About Us page working at `http://localhost:3000/about-us` (the route returned after clicking About Us). 现在我们可以使用 `npm run dev` shell 命令运行应用程序，访问 `http://localhost:3000`，并看到我们添加的文本，以及在 `http://localhost:3000/about-us`（点击“About Us”后返回的路由）上正常工作的“关于我们”页面。 ![Website showing updated link](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2FUntitled-01a888a3710631fcce96d280ff29d333.png) ![Website showing About Us page](https://assets.toptal.io/images?url=https%3A%2F%2Fbs-uploads.toptal.io%2Fblackfish-uploads%2Fpublic-files%2FUntitled-29514af8a7be6cac35f1d6f68f14c4ca.png) ## Supercharge Web Apps With Next.js ## 使用 Next.js 增强 Web 应用程序 There are many factors to consider before choosing a framework for your next website. Though Next.js is more opinionated and less flexible than React, the framework offers great out-of-the-box functionality for advanced projects targeting SEO or pre-rendering capabilities. With the foundations of Next.js in your toolkit, you can supercharge your site and get an edge over vanilla React applications. 在为你的下一个网站选择框架之前，有许多因素需要考虑。虽然 Next.js 比 React 更具约束力且灵活性稍差，但该框架为针对 SEO 或预渲染能力的高级项目提供了出色的开箱即用功能。只要掌握了 Next.js 的基础知识，你就可以增强你的网站，并获得超越原生 React 应用的优势。