章节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