章节30

页面路径取决于外部数据

在之前的课程中，我们讨论了页面内容取决于外部数据的情况。我们使用 getStaticProps 来获取渲染首页所需的数据。

在本课程中，我们将讨论每页页面路径取决于外部数据的情况。Next.js 允许您静态生成页面，其路径取决于外部数据。这在 Next.js 中实现了动态 URL。

如何使用动态路由静态生成页面

在我们的例子中，我们想要为博客文章创建动态路由

我们希望每篇文章的路径为 /posts/<id>，其中 <id> 是顶层 posts 目录下 markdown 文件的名称。
因为我们有 ssg-ssr.md 和 pre-rendering.md，我们希望路径为 /posts/ssg-ssr 和 /posts/pre-rendering。

步骤概览

我们可以通过以下步骤来实现。您现在不必进行这些更改 — 我们将在下一页完成所有操作。

首先，我们将在 pages/posts 下创建一个名为 [id].js 的页面。以 [ 开头并以 ] 结尾的页面是 Next.js 中的动态路由。

在 pages/posts/[id].js 中，我们将编写代码来渲染文章页面 — 就像我们创建的其他页面一样。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}

现在，这是新的内容：我们将从此页面导出一个名为 getStaticPaths 的异步函数。在这个函数中，我们需要返回 id 的可能值列表。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Return a list of possible value for id
}

最后，我们需要再次实现 getStaticProps — 这次是为了获取给定 id 的博客文章的必要数据。getStaticProps 会接收 params，其中包含 id（因为文件名是 [id].js）。

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // Return a list of possible value for id
}
 
export async function getStaticProps({ params }) {
  // Fetch necessary data for the blog post using params.id
}

这是我们刚才讨论内容的图形化总结

How to Statically Generate Pages with Dynamic Routes

让我们在下一页尝试一下！

页面路径取决于外部数据

如何使用动态路由静态生成页面

步骤概览

您已完成章节30