动态路由详情

以下是一些关于动态路由你需要了解的重要信息。

获取外部 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,
      },
    };
  });
}

开发环境与生产环境

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

回退

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

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

如果fallback 为 true，则getStaticProps的行为会发生变化。

• 从getStaticPaths返回的路径将在构建时渲染为 HTML。
• 在构建时尚未生成的路径**不会**导致出现 404 页面。相反，Next.js 将在第一次请求此类路径时提供页面的“回退”版本。
• 在后台，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 钩子来实现。

404 页面

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

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

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

更多示例

我们创建了几个示例来说明getStaticProps 和 getStaticPaths——查看它们的源代码以了解更多信息。

• 使用 markdown 文件的博客入门（演示）
• WordPress 示例（演示）
• DatoCMS 示例（演示）
• TakeShape 示例（演示）
• Sanity 示例（演示）

就是这样！

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