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 で定義された params が含まれます。詳細については、paths キーのドキュメント を参照してください。
• fallback: false は今は無視してください。後で説明します。

ほぼ完了です。しかし、まだ getStaticProps を実装する必要があります。次のページで実装しましょう！