0Pricing
React Academy · レッスン

Dynamic RoutesとRoute Groups

[slug] dynamic segments、(folder)によるroute groups、parallel routesを作成します。

「Dynamic RoutesとRoute Groups」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

動的セグメント

フォルダ名を角括弧で囲むと、動的セグメントを作成できます。その値は、ページに渡されるparamsから取得できます。

// app/products/[id]/page.tsx
export default function ProductPage({ params }: { params: { id: string } }) {
  return <h1>Product {params.id}</h1>;
}
// → /products/123 → params.id = '123'

型付きParams

URL内のParamsは常に文字列です。数値IDとして扱う場合は、明示的にパースしてください。

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) notFound();
  return <article>{post.content}</article>;
}

キャッチオールセグメント

[...slug]を使用すると、任意の数のパスセグメントに一致させられます。その値は文字列の配列です。

// app/docs/[...path]/page.tsx
export default function DocsPage({ params }: { params: { path: string[] } }) {
  // /docs/react/hooks → params.path = ['react', 'hooks']
  return <DocViewer path={params.path} />;
}

オプショナルキャッチオール

[[...slug]]はルートセグメントにも一致します。オプションのパスプレフィックスに便利です。

// app/[[...lang]]/page.tsx
// Matches /, /en, /en/about, /fr/products/123
export default function Page({ params }: { params: { lang?: string[] } }) {
  const lang = params.lang?.[0] ?? 'en';
  return <div lang={lang}>...</div>;
}

generateStaticParams

generateStaticParams()をエクスポートすると、ビルド時に動的ルートを事前レンダリングし、パラメーターの組み合わせごとに静的HTMLを生成できます。

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(p => ({ slug: p.slug }));
}
// → builds /blog/hello-world, /blog/react-tips etc. statically

ルートグループ — (folder)

フォルダ名を括弧で囲むと、ルートグループを作成できます。URLセグメントを追加せずにファイルを整理できます。

// File structure:
// app/(marketing)/about/page.tsx → /about
// app/(marketing)/blog/page.tsx  → /blog
// app/(app)/dashboard/page.tsx   → /dashboard
// (marketing) and (app) don't appear in URLs

共有レイアウトを持つルートグループ

各ルートグループには独自のlayout.tsxを配置できます。URLをネストせずに、セクションごとに異なるレイアウトを適用できます。

// app/(marketing)/layout.tsx — marketing shell
// app/(app)/layout.tsx — authenticated app shell
// Both groups share app/layout.tsx as the root

並列ルート — @slot

フォルダ名の先頭に@を付けると、スロットを作成できます。スロットは親レイアウト内で同時にレンダリングされます。モーダル、分割画面、タブなどに便利です。

// app/@modal/login/page.tsx
// app/layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    <div>
      {children}
      {modal} {/* renders @modal/login/page.tsx side by side */}
    </div>
  );
}

インターセプトルート — (..)

(..)記法を使用すると、ルートをインターセプトしてインラインでレンダリングできます。たとえば、新しいページへ移動する代わりに写真をモーダルで開けます。

// Soft navigation shows modal:
// app/@modal/(..)/photos/[id]/page.tsx
// Hard navigation shows full page:
// app/photos/[id]/page.tsx

動的ルートメタデータ

動的ルートで非同期のgenerateMetadata関数をエクスポートすると、ルートのParamsに基づいてページごとのSEOタグを設定できます。

export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return { title: product.name, description: product.description };
}

確認問題

Next.jsのApp Routerでフォルダ名を括弧で囲むと、どうなりますか？

まとめ

[id]は動的セグメントを作成し、[...slug]はすべてのサブパスをキャッチし、[[...slug]]はそれらをオプションにします。(name)を使ったルートグループは、URLに影響を与えずにコードを整理し、グループごとのレイアウトを可能にします。ビルド時の事前レンダリングにはgenerateStaticParamsを使用します。

よくある質問

「Dynamic RoutesとRoute Groups」レッスンは無料ですか？

はい。「Dynamic RoutesとRoute Groups」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Dynamic RoutesとRoute Groups」で何を学びますか？

[slug] dynamic segments、(folder)によるroute groups、parallel routesを作成します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「Dynamic RoutesとRoute Groups」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. App Routerのファイル規約
  2. Next.jsのServer ComponentsとClient Components
  3. Dynamic RoutesとRoute Groups
  4. Metadata APIとApp RouterのSEO
← React Academyに戻る