章节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` 会在*构建时*运行。

回退

回想一下，我们从 `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 路由

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

`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']
}

查看 catch all routes 文档以了解更多信息。

路由

如果你想访问 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 路由。