Next.js 初学者完整指南

2025-05-24

Next.js 初学者完整指南

我一直用Create React App搭建 React 应用，我非常喜欢它。不过最近，我越来越多地使用 Next.js 来搭建应用。它有很多很棒的功能，比如路由和服务端渲染，可以为最终用户和开发者带来卓越的体验。

Next.js 是一个 React 元框架，这意味着它是一个建立在 React 之上的框架，它强化了更多结构并提供了更多功能：例如服务器端渲染、路由、打包等等。在本文中，我们将介绍如何开始使用 Next.js、SSR 与 SSG 以及路由。

如果你以前没用过 React，可以先阅读我的 React 入门教程，然后再回来学习本教程！首先你需要具备 React 基础。

创建 Next.js 应用

我们将创建一个在主页上列出颜色的应用程序。每个颜色都会链接到一个显示该颜色信息的颜色页面！

首先，我们将使用 CLI 初始化一个 Next.js 应用。它的工作原理与大多数应用初始化脚本类似，它会为你生成一堆启动文件。

$ npx create-next-app color-pages
$ cd color-pages
Enter fullscreen mode Exit fullscreen mode

然后，我们将启动开发服务器——它内置热重载并链接到生成的主页上的文档。

$ npm run dev
Enter fullscreen mode Exit fullscreen mode

现在，我们可以开始写代码了！我们首先要创建一个包含颜色的静态 json 文件。创建一个颜色目录，然后在里面添加一个颜色文件。最后，添加颜色！

mkdir data
touch data/colors.json
Enter fullscreen mode Exit fullscreen mode

我使用了很多年度潘通色来制作这个，欢迎随意复制！如果你自己制作，请务必使用这个结构，这样其余代码才能正常工作。

// data/colors.json
[
  { "name": "Illuminating", "hex": "#F5DF4D" },
  { "name": "Classic Blue", "hex": "#0f4c81" },
  { "name": "Living Coral", "hex": "#FA7268" },
  { "name": "Ultra Violet", "hex": "#5f4b8b" },
  { "name": "Greenery", "hex": "#88b04b" },
  { "name": "Rose Quartz", "hex": "#F7CAC9" },
  { "name": "Marsala", "hex": "#B57170" },
  { "name": "Radiant Orchid", "hex": "#b067a1" }
]
Enter fullscreen mode Exit fullscreen mode

路由

现在，我们来处理color页面。使用 Next.js，如果您在文件夹中创建一个文件pages，它会将其转换为路由。因此，您可以创建about.js一个/about页面，但例外情况是，index.js它会将页面路由到/。您也可以创建文件夹来创建路由，例如/blog/my-post-title。如果您将文件名放在 中[]，则括号内的名称将成为参数名称。我们希望为上面数组中的每种颜色创建路由，因此我们将创建一个名为 的文件[color].js，这将使我们能够一次性动态创建“经典蓝”、“紫外光”等颜色的页面，而无需为每个颜色创建单独的 .js 文件。

$ touch pages/[color].js
Enter fullscreen mode Exit fullscreen mode

获取静态路径

现在，让我们创建getStaticPaths()函数。Next.js 会查找此函数，以便为该模板生成所有静态页面——在本例中是颜色页面。我们希望为每种颜色创建一个遵循相同格式的页面，但无需对每个页面进行硬编码。

首先，导入我们的colors数组。然后，在函数内部，我们将循环遍历它们，并为每个路由参数命名。在本例中，我们的路由参数要与文件名color中的参数名称匹配[]。我们希望路由中的颜色与每个颜色名称匹配——因此/Marsala将渲染显示 Marsala 的页面！

最后，我们将以 Next.js 所需的格式返回所有颜色。我们会将它们放入一个fallback设置为 的对象中false——这样，如果您访问/hotpink数组中不存在的颜色，就会返回 404 页面！

// [color].js
// import the colors array
import colors from '../data/colors.json'

export async function getStaticPaths() {
  // loop through the colors array
  const paths = colors.map(color => ({
    // return an object with params.color set to the color's name
    params: { color: color.name }
  }))

  // Paths will look like this:
  // [
  // { params: { color: 'Marsala' } },
  // { params: { color: 'Illuminating'} }
  // ...
  // ]
  return { paths, fallback: false }
}
Enter fullscreen mode Exit fullscreen mode

在大多数大型用例中，您可能需要从文件系统读取文件（例如博客文章的 Markdown 文件）或从外部 API 获取数据。您可以在其中执行任一任务getStaticPaths来生成应用的路径。

获取静态属性

现在，我们将定义getStaticPropsNext.js 所需的函数。此函数将提供props给页面的 React 组件。在我们的用例中，我们只需要当前页面颜色的信息。因此，页面会/Marsala获取数据{ "name": "Marsala", "hex": "#B57170" }——而不是所有其他颜色！

该getStaticProps函数获取传递给它的参数，在本例中是颜色名称。页面/Marsala参数看起来{ color: 'Marsala' }就像我们在getStaticPaths函数中创建的一样。在本例中，我们将在数组中查找名称与参数中的颜色匹配的颜色。然后返回数据——Next.js 要求将返回值嵌套在 { props } 中。

// [color].js
export async function getStaticProps({ params }) {
  // find the info for just one color
  const color = colors.find(color => color.name === params.color)
  // return it in the necessary format.
  return { props: { color } }
}
Enter fullscreen mode Exit fullscreen mode

在较大的应用程序中，您可以从 API 中提取getStaticProps有关某个项目的信息，或者您可能只需要获取一个 markdown 文件来呈现博客文章。

模板页面

现在我们开始最有趣的部分！创建 React 组件来模板化页面！我们创建的 props 对象getStaticProps将由 Next.js 传递给组件——我们只需要在页面上渲染数据！我们将使用十六进制代码为页面添加背景颜色，并渲染颜色名称。

// [color.js]
export default function Color({ color }) {
  return <div className='color-page' style={{ backgroundColor: color.hex }}>
    <h1>{color.name}</h1>
  </div>
}
Enter fullscreen mode Exit fullscreen mode

我用以下内容替换了 CSS 文件，使页面看起来更好一些。

/* global.css */
html,
body, #__next, .color-page {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  top: 0px;
  position: absolute;
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.color-page {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

链接组件

现在，我们需要做的就是使用Link组件从主页链接到每个颜色对应的页面。我们将index.js使用颜色列表进行更新。

我们将在此Home组件中使用两个 Next.js 特有的组件——Link和Head。<Link>允许你进行客户端路由转换，这将使用户的页面转换更加流畅。我们将用它来代替 和 ，否则就像一个a标签一样。

该<Head>组件允许我们在组件内部将数据插入到 htmlhead标签中。我们将从那里更新页面标题和元标签！

// index.js
import Head from 'next/head'
import Link from 'next/link'

import colors from '../data/colors.json'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Colors!</title>
        <meta name="description" content="App that displays pretty colors to learn Next!" />
      </Head>
      {colors.map(color => (
        <Link href={`/${color.name}`}>
        <h2>{color.name}</h2>
        </Link>
      ))}
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

SSR 与 SSG

我们刚刚构建了一个静态生成的 Next.js 应用——这意味着数据仅在构建时获取。如果我们的颜色来自 API，并且我们已经构建并部署了网站，那么我们的应用将不会因为任何 API 变更而更新（比如添加了 2022 年的年度颜色）。对于许多应用来说，这完全没问题！博客不需要频繁更新内容。

SSG（静态站点生成）允许 Next.js 在站点构建时为每个页面生成 HTML。这些页面随后可以被 CDN 缓存，从而打造出性能卓越的站点。

话虽如此，有时您需要一个动态更新的网站，这就是服务器端渲染的用武之地。SSR（服务器端渲染）允许您仍然在服务器端渲染 HTML，但针对用户对页面的每个请求执行此操作，而不是在构建时执行。

为了使用 SSR 而不是 SSG，我们需要将getStaticProps和替换getStaticPaths为getServerSideProps。请注意，下面的示例将不起作用，因为我们实际上并没有创建 API！

export async function getServerSideProps({ params }) {
  // Make a request to get data about the color via our API
  const res = await fetch(`http://www.color-api.com/${params.color}`)
  const color = await fetch.json()
  // return the data as props that will be passed to the Color component
  return { props: { color } }
}
Enter fullscreen mode Exit fullscreen mode

如果您想了解有关SSR 与 SSG 的更多信息，我有一篇关于其差异的完整博客文章！

部署

请注意，我是 AWS Amplify 团队的开发倡导者，如果您对此有任何反馈或疑问，请联系我或在我们的 discord 上提问 - discord.gg/amplify！

现在您已经编写好了 Next.js 应用，接下来需要将其上线。AWS Amplify支持部署 SSR 和 SSG Next.js 应用，无需您进行任何额外配置。

如果您要创建静态生成的 Next.js 应用，请转到您的package.json文件并将build脚本更改为next build && next export。如果您要创建服务器端渲染的应用，则无需更改任何内容！Next.js 为您生成的脚本正是您所需要的。

"scripts": {
  "dev": "next dev",
+ "build": "next build && next export",
  "start": "next start"
},
Enter fullscreen mode Exit fullscreen mode

然后，在您选择的 git 提供商上创建一个存储库，并将您的代码推送到其中。

  1. 如果您还没有AWS 账户，请创建一个。

  2. 导航至Amplify 控制台

  3. 单击橙色connect app按钮。

  4. GitHub在菜单中选择From your existing code，然后单击继续

放大与不同遥控器的接口

  1. 输入您刚刚创建的 GitHub 仓库的名称（它应该会自动填充！）然后单击next

使用 repo 名称放大接口

  1. 构建设置将自动填充，因此您只需next单击Configure build settings
  2. 点击Save and deploy。

结论

Next.js 拥有出色的开发者体验。它拥有清晰的错误信息、全面易懂的文档，并且功能强大，只需比普通的 React 应用多做一点点工作即可。希望本教程对您有所帮助！

如果您有兴趣学习另一项技能，这里有一个教程，介绍如何使用 Amplify 将 Next.js 前端变成全栈应用程序！

文章来源：https://dev.to/aws/a-complete-beginner-s-guide-to-next-js-1md0
Devto 翻译
PREV
React 初学者完整指南：Hooks 版
NEXT
GraphQL 初学者完整指南