動的ルート

なぜ学ぶか： ブログ記事が100本あるとして、100個のフォルダは作れません。「1つのファイルで無数のページを作る」のが動的ルートです。角カッコのフォルダ名という、知らないと読めない記法を種明かしします。

まずはこの例を見てみましょう

src/app/blog/[slug]/page.tsx
                    ↑
        [slug] = 「何でも入る枠」のフォルダ名

/blog/hello   にアクセス → このページが表示され、slug は "hello"
/blog/nextjs  にアクセス → 同じページが表示され、slug は "nextjs"

角カッコのフォルダが「可変の枠」。実際に何が入ったかはparamsで受け取ります。

コード例

// app/blog/[slug]/page.tsx
// /blog/hello にアクセス → params は { slug: "hello" }
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params; // 最近の Next.js では await が必要

  return (
    <article>
      <h1>記事: {slug}</h1>
    </article>
  );
}

（/blog/hello にアクセスした場合）
記事: hello

このlearnアプリも/topics/[topicId]という動的ルートで、1つのファイルから99トピック分のページを作っています。