Next.js是一个极速的React框架，受到如Hulu和Netflix这样的数据密集型流媒体网站的信任。如果你已经熟悉React，那么你绝对应该了解这一日益流行的技术。尽管React和Next.js都有助于创建有效的web用户界面，但它们有一些关键的区别：Next.js比React更加丰富的特性和更有见解。它特别适合注重搜索引擎优化（SEO）或预渲染的网站。

1. Next.js vs. React
React，首次亮相于2013年，比Next.js更为成熟。但这个较年轻的框架，于2016年发布，正在日益受到欢迎，截至2023年10月，它在GitHub上的星标数量超过了113K，每周的npm下载量达到了数百万。让我们看看在四个主要领域中，这两者如何比较：

开发速度： Next.js 提供了开箱即用的特性，这些特性简化了开发高级 React 应用的过程。在 Next.js 12 中引入了自己的编译器后，这个框架也提高了构建速度。与 React 相比，Next.js 减少了工程师等待代码刷新的时间，最大限度地减少了开发者的挫败感和工作延误。

数据获取和加载时间： Next.js 可以遍历 React 树并在服务器中查询数据，从而允许预加载页面数据。这通常会使得由 Next.js 服务的页面的应用加载时间比用原生 React 编写的页面的加载时间要短。

渲染和 SEO： Next.js 提供了预渲染，而 React 使用客户端渲染。预渲染页面使得在普通的 React 应用中难以实现的有效的 SEO 策略 成为可能。

路由： Next.js 提供了一个结构化的，预定义的文件系统进行路由。其系统的灵活性相比于 React 的各种库选项（例如，React Router）要少，但简化了页面设置和路由。

React非常适合各种类型的项目，包括用户仪表板、后端系统、内部组织工具和数据可视化系统。Next.js是理想的工具包，可以增强从预渲染的力量中受益的React应用，包括电子商务商店、社交媒体应用、票务预订系统和教育平台。让我们更详细地探索一些它的使用案例。

2. 在Next.js中的渲染
渲染是将React代码转换为浏览器随后显示为页面用户界面的HTML的过程。Next.js提供了三种渲染方法——客户端渲染(CSR)，服务器端渲染(SSR)和静态站点生成(SSG)——以及增量静态再生(ISR)的附加优势。ISR结合了服务器端渲染和半静态缓存机制，以减轻服务器负载并提供与静态站点相似的速度。

服务器端渲染和静态站点生成属于预渲染的范畴，在此过程中，HTML页面在发送到客户端之前被生成。使用Next.js的一个大优点是它为预渲染React应用程序增加了强大的支持。

3. 客户端渲染
客户端渲染是原生React应用程序的默认方式。这种方法在客户端生成页面的HTML。换句话说，渲染工作在用户的浏览器中进行，用户设备的JavaScript生成HTML。在渲染完成后，用户界面出现，此时网页也具有交互性（即，水合）。使用React的useEffect或useSWR，Next.js组件的CSR是可能的。

4. 服务器端渲染
Next.js还支持在服务器上生成页面的HTML。在这种情况下，生成的HTML会发送给客户端，这样网页的用户界面会在水化之前出现。然后，当客户端完成JavaScript的初始化后，可查看的网页就准备好进行交互了。

在我们希望Next.js执行服务器端渲染的页面上，需要添加一些简单的配置函数到页面中。

5. 静态站点生成
Next.js还提供静态站点生成，在此过程中，所有静态HTML页面在构建时从JavaScript渲染。将React代码库生成为静态站点需要相比React单页应用程序更多的预先构建时间。然而，这里的回报是拥有可以以站点内容允许的最大速度提供和缓存的静态内容，而不需要SSR的计算开销。

我们可以执行我们想要用getStaticProps() 和 getStaticPaths() 静态生成的 Next.js页面上的SSG，后者定义了静态页面的路由。

6. Next.js搜索引擎优化
Next.js 的速度和预渲染网站所有页面的能力，使搜索引擎能够快速而轻松地爬行和索引网站，从而提高 SEO。SEO 对许多企业和网站至关重要，因为具有更好 SEO 的网站在搜索结果中的排名较高。用户更有可能点击排名较高的网站，排名第一的网站的平均点击率为 27.6%，这个比率是排名第十的网站的点击率2.4%的十倍。

拥有大量内容的 React 网站以及由此产生的用于渲染的 JavaScript 代码 在处理 Google 爬行和索引时 面临 SEO 挑战。Next.js 能够轻松地执行服务器端渲染 (SSR) 不仅增强了 SEO 排名，而且还提高了网站的感知和实际加载时间，为用户提供了最佳的体验。

7. 开始使用Next.js
现在我们将看一下 Next.js 的设置、路由、页面和导航的基本知识，以便您可以享受预渲染和 SEO 的好处。在开始我们的 Next.js 教程之前，确保您的系统上已经下载了最新版本的 Node.js。您可以使用 node --version 命令在您的机器上验证 Node.js 的版本。

设置 Next.js 项目有两种方式：
.自动设置，带有预定义的配置

.手动设置和配置

我们将遵循自动设置来更容易地开始我们的项目。create-next-app CLI 工具管理自动设置，并使得快速构建应用程序成为可能。让我们使用 Next.js 内置的 TypeScript 支持来创建我们的项目，TypeScript 是 JavaScript 的一个严格的语法超集，以确保正确的类型结构：

$ npx create-next-app@latest --typescript

create-next-app会询问您的应用程序的名称。您的项目名称必须由小写字母组成，并使用连字符代替空格。例如，我命名我的应用程序为next-js-tutorial。一旦设置完成，您将在终端中看到成功的提示。

在我们的新项目中，我们可以看到Next.js强制要求一种严格的文件结构系统：
.网站的pages和styles被组织在它们自己的文件夹中。
.API存储在pages/api文件夹中。
.公开可用的资产保存在public文件夹中。

8. Next.js路由和页面
Next.js 使用其在 pages 目录内的文件结构来定义应用程序的路由。我们在 pages 文件夹中定义所有路由。默认的 pages/index.tsx 文件是我们定义自定义字体，应用跟踪代码以及需要全局访问的其他项目的应用程序的入口点。

添加新路由有两种方法：
.直接在 pages 中添加以 .tsx 结尾的文件。
.在 pages 的新子文件夹下添加 index.tsx 文件（index 文件会自动路由到目录根）。
让我们看几个具体的 Next.js 路由示例。我们将实施一个简单的页面路由作为我们的教程，然后讨论嵌套和动态路由概念。

9. 页面路由
我们可以添加一个基本的页面路由，例如 about-us，通过一个 about-us.tsx 文件：

|— pages
|    |— _app.tsx
|    |— about-us.tsx
|    |— api
|    |— index.tsx

或者我们可以在 pages/about-us 文件夹下使用一个 index.tsx 文件：

|— pages
|    |— _app.tsx
|    |— about-us
|    |    |— index.tsx
|    |— api
|    |— index.tsx

请在您的项目中添加 about-us.tsx 页面路由。

import styles from '../styles/Home.module.css'
 // 堆代码 duidaima.com
const AboutUs: NextPage = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          About Us Example Page
        </h1>
      </main>
    </div>
  )
}

export default AboutUs

当我们将页面路由与Next.js导航结合使用时，我们将看到页面路由的实际应用。现在，我们将返回一个带有标题字符串的占位符 NextPage，以便导航能够正常工作。

10. 嵌套路由
嵌套路由 允许多个布局被重复使用，并在页面上选择性地更新（例如，当用户点击一个URL时，您可能希望更新主体内容，但保留头部和底部布局）。

|— pages
|    |— _app.tsx
|    |— api
|    |— index.tsx
|    |— parent
|    |    |— child.tsx

我们在一个parent文件夹和一个嵌套的child文件夹或文件中定义了嵌套路由/parent/child（我们的示例显示了一个文件）。

11. 动态路由
动态路由 允许布局响应实时变化，以应对预定义路径不足的情况。假设我们想创建一个/product/[productId]路由（即，当点击产品时，展开其组件）。假设productId是我们在定义Product时可以访问的变量，我们可以通过创建一个product文件夹并将我们的productId页面用括号包裹起来，轻松添加一个动态路由：

|— pages
|    |— _app.tsx
|    |— api
|    |— index.tsx
|    |— product
|    |    |— [productId].tsx

这样，像 product/testId 这样的路由将会设置其查询参数（即，productId 被设置为 testId）。最后，也可以组合路由技术。例如，我们可以创建嵌套的动态路由 pages/post/[postId]/[comment].tsx。

12. Next.js导航
Next.js 使用自己定制的 Link 组件而不是 <a> HTML 标签来在客户端页面之间进行导航，这使得 Next.js 能够优化导航和数据预获取。Link 的操作方式类似于 <a> 标签，并使用 href 作为要打开的路由。您必须使用 [passHref 属性](https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag) 强制 Link 向子组件传递其路由值（即，当使用自定义样式组件时）。

使用 Link 而不是 <a> 标签的主要好处是，当用户悬停在链接上或接近链接时，它会在后台预加载数据。这使得内容更容易为客户端处理，提供改善的应用程序性能。当链接到应用程序外部的外部页面时，您仍然可以在 Next.js 中使用 <a> 标签。

要从 Next.js 项目蓝图链接到我们的关于我们的页面，请打开 pages/index.tsx 主应用文件。我们将首先从 next/link 导入 Link 组件，然后在 <h1> 组件下方添加一个链接段落：

<p className={styles.description}>
  Here's our example <Link href="/about-us">About Us</Link> page
</p>

现在我们可以使用npm run dev shell命令运行我们的应用程序，访问http://localhost:3000，并在http://localhost:3000/about-us看到我们添加的文本和关于我们的页面正常工作（点击关于我们后返回的路由）。

13. Next.js驱动网页应用
在选择下一个网站的框架之前，有许多因素需要考虑。虽然 Next.js 比 React 更有主见且灵活性较低，但该框架为目标 SEO 或预渲染功能的高级项目提供了出色的开箱即用功能。有了 Next.js 的基础在你的工具箱中，你可以超级驱动你的网站，并在纯粹的 React 应用程序上取得优势。