页面路径依赖外部数据

在上一课中，我们介绍了 **页面内容** 依赖外部数据的情况。我们使用了 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
}

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

让我们在下一课中尝试一下！