Next.js 动态路由生成静态页面概述
2023年03月30日 - 约 687 字

引言

我们已经将博客数据填充到索引页面中，但我们还没有创建单独的博客页面。我们希望这些页面的 URL 获取博客数据，这意味着我们需要使用动态路由。

在本课程中，您将学习：

如何使用 getStaticPaths 静态生成具有动态路由的页面。
如何编写 getStaticProps 来获取每篇博客文章的数据。
如何使用 remark 渲染 markdown。
如何漂亮地打印日期字符串。
如何链接到具有动态路由的页面。
关于动态路由的一些有用信息。

页面路径获取外部数据

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

在本课程中，我们将讨论每个页面路径获取外部数据的情况。Next.js允许您静态生成具有依赖于外部数据的路径的页面。这使得Next.js中的动态URL成为可能。

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

在我们的情况下，我们想要为博客文章创建动态路由：

我们希望每篇文章的路径为 /posts/ ，其中是顶级 posts 目录下的 markdown 文件名。由于我们有 first.md 和 about.md ，我们希望路径为 /posts/first 和 /posts/about 。步骤概览我们可以通过执行以下步骤来实现。您现在不必进行这些更改 - 我们将在下一页上完成全部。

首先，我们将在 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
}

让我们在下一篇文章进行尝试！

Next.js 动态路由生成静态页面概述2023年03月30日 - 约 687 字

引言

页面路径获取外部数据

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

Next.js 动态路由生成静态页面概述
2023年03月30日 - 约 687 字