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` を実装する必要があります。次のページで行いましょう！