Next.js 动态路由 getStaticPaths
2023年03月31日 - 约 412 字

动态路由实现 getStaticPaths

首先，让我们设置文件：

在 pages/posts 目录中创建一个名为 [id] .js 的文件。
另外，删除 pages/posts 目录中的 first-post.js - 我们将不再使用此文件。
然后，打开编辑器中的 pages/posts/[id].js 并粘贴以下代码。稍后我们将填写...：

import Layout from '../../components/layout';

export default function Post() {
  return <Layout>...</Layout>;
}

然后，打开 lib/posts.js 并在底部添加以下 getAllPostIds 函数。它将返回帖子目录中文件名（不包括.md）的列表：

export function getAllPostIds() {
  const fileNames = fs.readdirSync(postsDirectory);

  // Returns an array that looks like this:
  // [
  //   {
  //     params: {
  //       id: 'ssg-ssr'
  //     }
  //   },
  //   {
  //     params: {
  //       id: 'pre-rendering'
  //     }
  //   }
  // ]
  return fileNames.map((fileName) => {
    return {
      params: {
        id: fileName.replace(/\.md$/, ''),
      },
    };
  });
}

重要提示：返回的列表不仅仅是字符串数组-它必须是像上面的注释所示的对象数组。每个对象必须具有 params 键，并包含一个带有id键的对象（因为我们在文件名中使用[id]）。否则， getStaticPaths 将失败。

导入 getAllPostIds

最后，我们将导入 getAllPostIds 函数并在 getStaticPaths 中使用它。打开 pages/posts/[id].js 并将以下代码复制到导出的Post组件上方：

import { getAllPostIds } from '../../lib/posts';

export async function getStaticPaths() {
  const paths = getAllPostIds();
  return {
    paths,
    fallback: false,
  };
}

路径包含由 getAllPostIds（） 返回的已知路径数组，其中包括由 pages/posts/[id].js 定义的参数。
了解有关路径键文档的更多信息暂时忽略 fallback：false -稍后我们将解释这个内容。

Next.js 动态路由 getStaticPaths2023年03月31日 - 约 412 字

动态路由实现 getStaticPaths

导入 getAllPostIds

Next.js 动态路由 getStaticPaths
2023年03月31日 - 约 412 字