章节36

动态路由详情

这里有一些关于动态路由的您应该了解的重要信息。

获取外部 API 或查询数据库

像 getStaticProps 一样，getStaticPaths 可以从任何数据源获取数据。在我们的示例中，getAllPostIds（由 getStaticPaths 使用）可以从外部 API 端点获取

export async function getAllPostIds() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..');
  const posts = await res.json();
  return posts.map((post) => {
    return {
      params: {
        id: post.id,
      },
    };
  });
}

开发环境 vs. 生产环境

在开发环境（npm run dev 或 yarn dev）中，getStaticPaths 在每次请求时运行。
在生产环境中，getStaticPaths 在构建时运行。

Fallback

回想一下，我们从 getStaticPaths 返回了 fallback: false。这意味着什么？

如果 fallback 为 false，则任何未被 getStaticPaths 返回的路径都将导致 404 页面。

如果 fallback 为 true，则 getStaticProps 的行为会改变

从 getStaticPaths 返回的路径将在构建时渲染为 HTML。
在构建时未生成的路径不会导致 404 页面。相反，Next.js 将在首次请求此类路径时提供页面的“fallback”版本。
在后台，Next.js 将静态生成请求的路径。后续对同一路径的请求将提供生成的页面，就像其他在构建时预渲染的页面一样。

如果 fallback 为 blocking，则新路径将使用 getStaticProps 进行服务器端渲染，并为将来的请求缓存，因此每个路径仅发生一次。

这超出了我们课程的范围，但您可以在 fallback 文档中了解更多关于 fallback: true 和 fallback: 'blocking' 的信息。

捕获所有路由

动态路由可以扩展为捕获所有路径，方法是在方括号内添加三个点 (...)。例如

pages/posts/[...id].js 匹配 /posts/a，但也匹配 /posts/a/b、/posts/a/b/c 等等。

如果您这样做，在 getStaticPaths 中，您必须返回一个数组作为 id 键的值，如下所示

return [
  {
    params: {
      // Statically Generates /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

并且 params.id 在 getStaticProps 中将是一个数组

export async function getStaticProps({ params }) {
  // params.id will be like ['a', 'b', 'c']
}

请查看捕获所有路由文档以了解更多信息。

路由器

如果您想访问 Next.js 路由器，您可以通过从 next/router 导入 useRouter hook 来实现。

404 页面

要创建自定义 404 页面，请创建 pages/404.js。此文件在构建时静态生成。

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>;
}

请查看我们的错误页面文档以了解更多信息。

就这样！

在下一课中，我们将讨论 Next.js 中的 API 路由。