paramsという言葉が分からなかった

Next.jsとmicroCMSを使ったブログを勉強していると、 記事詳細ページのコードで paramsという名前が出てきました。

export default async function Page({
  params,
}: Props) {
  const { slug } = await params;

  return <p>{slug}</p>;
}

コードの形は何となく読めても、 最初は次の部分がよく分かりませんでした。

実際には、paramsはNext.jsがページへ渡してくれる値です。

そして、その中身は フォルダ名とURLの形によって決まります。

paramsとは何？

paramsは、 parameterを短くした名前としてよく使われます。

Next.jsのApp Routerでは、 URLの動的な部分をページ内で受け取るために使います。

例えば、ブログの記事詳細ページに 次のようなURLがあるとします。

このURLの中で、 html-and-tsxの部分は 表示する記事によって変わります。

この動的部分をNext.jsが読み取り、 paramsの中へ入れてページに渡してくれます。

まずは固定URLを見てみる

動的ルーティングを理解する前に、 通常の固定ページを見てみます。

例えば、会社概要ページを /aboutというURLで表示したい場合、 次のようなフォルダを作ります。

src
└── app
    └── about
        └── page.tsx

aboutというフォルダ名が、 そのままURLの一部分になります。

このページは常に/aboutで表示されるため、 URLの一部が記事によって変わることはありません。

動的ルーティングとは？

ブログの記事詳細ページでは、 記事ごとにURLの最後が変わります。

これらの記事ごとに、 次のようなフォルダを一つずつ作ることもできます。

src
└── app
    └── blog
        ├── html-and-tsx
        │   └── page.tsx
        ├── nextjs-basic
        │   └── page.tsx
        └── microcms-start
            └── page.tsx

しかし、記事が100件になれば、 100個のフォルダを作ることになります。

microCMSで記事を追加するたびに Next.js側へ新しいフォルダを作るのも現実的ではありません。

そこで使うのが、 動的ルーティングです。

src
└── app
    └── blog
        └── [slug]
            └── page.tsx

[slug]というフォルダが、 さまざまな記事URLをまとめて受け取ります。

[slug]とparamsの関係

それでは、 [slug]フォルダがどのようにparamsへつながるのか 見てみます。

角括弧の中にslugと書いたため、 paramsのプロパティ名もslugになります。

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export default async function BlogPage({
  params,
}: Props) {
  const { slug } = await params;

  return (
    <main>
      <h1>記事詳細ページ</h1>
      <p>現在のslug：{slug}</p>
    </main>
  );
}

URLが/blog/html-and-tsxなら、 画面には次のように表示されます。

[id]の場合はどうなる？

角括弧の中は、 必ずslugでなければいけないわけではありません。

商品詳細ページやmicroCMSのコンテンツIDを使う場合は、 [id]という名前もよく使われます。

src
└── app
    └── products
        └── [id]
            └── page.tsx

type Props = {
  params: Promise<{
    id: string;
  }>;
};

export default async function ProductPage({
  params,
}: Props) {
  const { id } = await params;

  return (
    <main>
      <h1>商品詳細</h1>
      <p>商品ID：{id}</p>
    </main>
  );
}

角括弧内の名前は自由に決められる

動的フォルダの名前は、 URLの値の意味が分かる名前を自分で決められます。

ただし、フォルダ名とparamsのプロパティ名は 必ず一致させます。

// フォルダは [id]

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

// フォルダは [id]

type Props = {
  params: Promise<{
    id: string;
  }>;
};

Next.js 16でのparamsの書き方

Next.js 16のApp Routerでは、 Server Componentへ渡されるparamsを Promiseとして受け取ります。

そのため、型にPromiseを付け、 await paramsで中身を取り出します。

現在の基本形

type Props = {
  params: Promise<{
    slug: string;
  }>;
};

export default async function Page({
  params,
}: Props) {
  const { slug } = await params;

  return <p>{slug}</p>;
}

以前の書籍や記事で見かける形

type Props = {
  params: {
    slug: string;
  };
};

export default function Page({
  params,
}: Props) {
  return <p>{params.slug}</p>;
}

microCMSの記事詳細ページでparamsを使う

microCMSの記事詳細ページでは、 URLから取得したIDやslugを使って、 表示する記事を指定します。

microCMSから記事詳細を取得する関数

import { createClient } from "microcms-js-sdk";

export type Article = {
  id: string;
  title: string;
  content: string;
};

const client = createClient({
  serviceDomain:
    process.env.MICROCMS_SERVICE_DOMAIN!,
  apiKey:
    process.env.MICROCMS_API_KEY!,
});

export const getArticleDetail = async (
  contentId: string
) => {
  return client.getListDetail<Article>({
    endpoint: "blogs",
    contentId,
  });
};

paramsのidをmicroCMSへ渡す

import {
  getArticleDetail,
} from "@/libs/microcms";

type Props = {
  params: Promise<{
    id: string;
  }>;
};

export default async function ArticlePage({
  params,
}: Props) {
  const { id } = await params;

  const article =
    await getArticleDetail(id);

  return (
    <main>
      <h1>{article.title}</h1>

      <div
        dangerouslySetInnerHTML={{
          __html: article.content,
        }}
      />
    </main>
  );
}

複数階層を受け取るCatch-all Segment

通常の[slug]は、 URLの一つの階層だけを受け取ります。

一方、ドキュメントサイトなどで、 複数階層のURLをまとめて受け取りたい場合があります。

このような場合は、 角括弧の中へ...を付けた Catch-all Segmentを使用できます。

src
└── app
    └── docs
        └── [...slug]
            └── page.tsx

この場合、paramsのslugは文字列ではなく、 文字列の配列になります。

type Props = {
  params: Promise<{
    slug: string[];
  }>;
};

export default async function DocsPage({
  params,
}: Props) {
  const { slug } = await params;

  return (
    <main>
      <p>
        {slug.join(" / ")}
      </p>
    </main>
  );
}

初めてブログを作る段階では、 まず通常の[slug]や[id]を 理解できれば十分です。

paramsでよくあるつまずき

const { slug } = await params;

export default async function Page({
  params,
}: Props) {
  const { slug } = await params;
}

URLとparamsの関係をもう一度整理

ここまでの内容を、 ブログの記事詳細ページを例にしてまとめます。