841-biborokuWebフロントエンドの備忘録

Next.jsの動的ルーティングでカテゴリ・記事スラッグを使ったディレクトリ構造を再現する

microCMSに登録した記事と記事に紐づけたカテゴリのデータをもとに、Next.jsの動的ルーティングを使用しディレクトリ構造を再現してみました。

{
  "id": "6toijsnfw",
  "title": "記事タイトル",
  "slug": "post-slug",
  "category": {
    "id": "23kopsdfwe",
    "title": "カテゴリ名",
    "slug": "category-slug",
  }
}

CASE1:https://ドメイン/category-slug/post-slug/

カテゴリのスラッグを受け取れるようにブラケットで囲んだ[categorySlug]フォルダを作成します。

その下に記事スラッグ用の[slug].tsxファイルを作成します。


ブラケット内に指定する名前はparamsに指定するキー名と一致していれば、データが取得できます。

src/pages/[categorySlug]/[slug].tsx

export const getStaticPaths: GetStaticPaths = async () => {
  const contents = await (記事を取得);
  const paths = contents.map((content: PostPageProps) => ({
    params: {
      categorySlug: content.category.slug,
      slug: content.slug,
    },
  }));
  return {
    paths,
    fallback: false,
  };
}

記事に複数カテゴリを設定している場合、カテゴリ情報が配列になっているので以下のように変更すると取得できます。

categorySlug: content.category[0].slug,

※カテゴリは必須項目とし、最低1件は紐づける想定です。

CASE2:https://ドメイン/entry/post-slug/

第一階層は/entry/の固定で、第二階層は記事スラッグだけを利用して再現する場合は以下の通り。

ブラケットなしのentryフォルダを作成し、[slug].tsxファイルを作成します。

CASE1のslug: content.slug,だけで実現できます。

src/pages/entry/[slug].tsx

const paths = contents.map((content: PostPageProps) => ({
  params: {
    slug: content.slug,
  },
}));

📒Next.js公式

Dynamic Routes

シェア