实现 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 函数添加到底部。它将返回 posts 目录中所有文件名（不包括 .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 函数并在 getStaticPaths 中使用它。打开 pages/posts/[id].js 并将以下代码复制到导出的 Post 组件之上。

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

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

• paths 包含由 getAllPostIds() 返回的已知路径数组，其中包括由 pages/posts/[id].js 定义的参数。在 paths 键文档 中了解更多信息。
• 现在先忽略 fallback: false - 我们稍后会解释。

我们快完成了 - 但我们仍然需要实现 getStaticProps。让我们在下一页进行操作！