页面路径依赖外部数据

在上一课中，我们讨论了页面内容依赖外部数据的情况。我们使用 getStaticProps 来获取渲染首页所需的数据。

本课我们将讨论页面路径依赖外部数据的情况。Next.js 允许您静态生成路径依赖外部数据的页面，从而实现 Next.js 中的动态 URL 功能。

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

在我们的案例中，我们希望为博客文章创建动态路由 (dynamic routes):

• 我们希望每篇文章的路径为 /posts/<id>，其中 <id> 是顶级 posts 目录下 Markdown 文件的名称
• 由于我们有 ssg-ssr.md 和 pre-rendering.md 文件，对应的路径将是 /posts/ssg-ssr 和 /posts/pre-rendering

步骤概述

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

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

在 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() {
  // 返回 id 的可能值列表
}

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

import Layout from '../../components/layout';
 
export default function Post() {
  return <Layout>...</Layout>;
}
 
export async function getStaticPaths() {
  // 返回 id 的可能值列表
}
 
export async function getStaticProps({ params }) {
  // 使用 params.id 获取博客文章所需数据
}

以下是我们刚才讨论内容的图示总结：

让我们在下一页尝试实现吧！