動的ルートとパラメーター
URL内の可変セグメントを処理する動的ルートを実装し、ルートパラメーターにアクセスする方法を学びます
「動的ルートとパラメーター」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはNext.js 15 Fullstack (App Router + Server Actions)学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What are Dynamic Routes?
Imagine you have a blog with many posts. Instead of creating a separate page for each post (like /blog/post-1, /blog/post-2), you can use dynamic routes.
Dynamic routes allow you to create pages that respond to variable segments in the URL, making your application scalable and maintainable.
Defining a Basic Dynamic Route
In Next.js App Router, you define a dynamic route segment by wrapping a folder name in square brackets []. For example, to create a dynamic route for blog posts, you'd create a folder named [slug].
app/blog/[slug]/page.js
This structure will match URLs like /blog/first-post, /blog/another-article, etc.
Accessing Route Parameters
When a dynamic route is matched, the variable part of the URL becomes available as a route parameter. You can access these parameters within your page component via the params prop.
For app/blog/[slug]/page.js, the URL /blog/my-first-post would make params.slug equal to 'my-first-post'.
Demo: Simple Dynamic Page
Let's see how to create a simple dynamic page that displays the slug parameter from the URL. Place this code in app/blog/[slug]/page.js.
export default function BlogPostPage({ params }) {
// params.slug will contain the dynamic part of the URL
return (
<div>
<h1>Blog Post: {params.slug}</h1>
<p>This content is dynamically loaded!</p>
</div>
);
}Understanding Catch-all Segments
What if you need to match a path with an unknown number of segments? This is where catch-all segments come in handy. You define them using a spread syntax: [...slug].
app/docs/[...slug]/page.js
This will match URLs like /docs/a, /docs/a/b, /docs/a/b/c, etc.
Accessing Catch-all Parameters
When using a catch-all segment, the params prop will contain an array of the matched segments. So, for app/docs/[...slug]/page.js:
/docs/a->params.slugis['a']/docs/a/b/c->params.slugis['a', 'b', 'c']
Demo: Catch-all Page
Here's how you can display all segments from a catch-all route. Place this code in app/docs/[...slug]/page.js.
export default function DocsPage({ params }) {
// params.slug is an array of path segments
const path = params.slug.join('/');
return (
<div>
<h1>Documentation Path: /{path}</h1>
<p>Showing content for: {path}</p>
</div>
);
}Optional Catch-all Segments
Sometimes you want a catch-all segment that can also match the base path (i.e., zero segments). This is an optional catch-all, defined with double square brackets: [[...slug]].
app/users/[[...id]]/page.js
This will match /users (where params.id is undefined) AND /users/123 (where params.id is ['123']).
Demo: Optional Catch-all
This example shows an optional catch-all route that displays a user ID or 'Guest' if no ID is provided. Place this in app/users/[[...id]]/page.js.
export default function UserProfilePage({ params }) {
// params.id will be undefined for /users, or ['123'] for /users/123
const userId = params.id ? params.id[0] : 'Guest';
return (
<div>
<h1>Welcome, {userId}</h1>
<p>This page handles both base and dynamic paths.</p>
</div>
);
}Dynamic Routes Quiz
Which of the following file structures would allow a Next.js App Router application to handle URLs like /products/electronics/laptops and access 'electronics' and 'laptops' separately?
Recap: Dynamic Routes & Params
Great job! You've learned the essentials of dynamic routing in Next.js App Router:
[slug]creates a single dynamic segment.[...slug]creates a catch-all segment for multiple paths, returning an array.[[...slug]]creates an optional catch-all, matching zero or more segments.- All dynamic segments are accessed via the
paramsprop in yourpage.jscomponents.
This powerful feature is key for building flexible and scalable web applications!
よくある質問
「動的ルートとパラメーター」レッスンは無料ですか？
はい。「動的ルートとパラメーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。
「動的ルートとパラメーター」で何を学びますか？
URL内の可変セグメントを処理する動的ルートを実装し、ルートパラメーターにアクセスする方法を学びます ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「動的ルートとパラメーター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このNext.js 15 Fullstack (App Router + Server Actions)レッスンでコードを書いて実行できますか？
はい。すべてのNext.js 15 Fullstack (App Router + Server Actions)レッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。