Pages Router: 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);
 
  // 以下のような配列を返します:
  // [
  //   {
  //     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で定義されたparamsが含まれます。詳細はpathsキーのドキュメントを参照してください。
今のところfallback: falseは無視してください — これは後で説明します。