页面路由：动态路由详解 | Next.js

以下是关于动态路由你需要了解的核心信息。

获取外部 API 或查询数据库

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

export async function getAllPostIds() {
  // 替代文件系统，
  // 从外部 API 端点获取文章数据
  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 会在首次请求此类路径时提供一个"后备"版本的页面。
在后台，Next.js 会静态生成请求的路径。对同一路径的后续请求将提供已生成的页面，就像其他在构建时预渲染的页面一样。

如果 fallback 设为 blocking，那么新路径将通过 getStaticProps 进行服务端渲染，并缓存以供后续请求使用，因此每个路径仅发生一次。

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

全捕获路由 (Catch-all Routes)

通过在方括号内添加三个点（...），可以扩展动态路由以捕获所有路径。例如：

pages/posts/[...id].js 不仅匹配 /posts/a，还匹配 /posts/a/b、/posts/a/b/c 等。

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

return [
  {
    params: {
      // 静态生成 /posts/a/b/c
      id: ['a', 'b', 'c'],
    },
  },
  //...
];

在 getStaticProps 中，params.id 将是一个数组：

export async function getStaticProps({ params }) {
  // params.id 将类似于 ['a', 'b', 'c']
}

查看全捕获路由文档以了解更多。

路由 (Router)

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

404 页面

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

// pages/404.js
export default function Custom404() {
  return <h1>404 - 页面未找到</h1>;
}

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

结束！

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

动态路由详解