Pages Router：实现 getStaticPaths | Next.js

首先，我们来设置文件结构：

在 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);
 
  // 返回如下结构的数组：
  // [
  //   {
  //     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 —— 我们稍后会解释其作用。