เส้นทางแบบไดนามิกและเซกเมนต์ครอบคลุมทั้งหมด

Welcome to dynamic routing in Next.js! Modern web applications often need flexible URLs for content like blog posts, product details, or user profiles.

Instead of creating a separate page for each item, dynamic routes let you use a single page template to handle many different URLs based on their path.

In Next.js, you create a dynamic route by enclosing a folder name in square brackets, like [slug].

This [slug] segment acts as a placeholder. Whatever value is in that part of the URL will be captured and made available to your page component.

• Example: app/blog/[slug]/page.js
• This will match URLs like /blog/hello-world or /blog/nextjs-tips.

When a dynamic route is matched, the value of the dynamic segment (e.g., slug) is passed to your page component as a property of the params object.

By default, Next.js App Router pages are React Server Components, which receive params as a prop.

What if you need to match URLs with an unknown number of segments? For example, a documentation site where paths can be deeply nested (e.g., /docs/getting-started/installation).

This is where catch-all segments come in. They capture all subsequent path segments into an array.

To create a catch-all route, use three dots followed by the segment name inside square brackets: [...slug].

This will match any path that starts with the parent folder and capture all parts after it into an array.

• Example: app/docs/[...slug]/page.js
• Matches: /docs/a, /docs/a/b, /docs/a/b/c.
• slug will be an array: ['a'], ['a', 'b'], ['a', 'b', 'c'].

Similar to dynamic segments, catch-all parameters are available via the params object. However, the value for a catch-all segment is always an array of strings.

Let's see an example of displaying the captured path segments from a URL like /docs/guide/setup/nextjs.

What if you want a catch-all route to also match the base path? For example, you want /docs to show an index page, but /docs/intro to show a specific guide.

You can make a catch-all segment optional by wrapping it in an extra set of square brackets: [[...slug]].

• Example: app/docs/[[...slug]]/page.js
• Matches: /docs and /docs/a/b.

When using [[...slug]], the slug parameter will be an array of strings for sub-paths. However, it will be undefined if only the base path is matched (e.g., /docs).

You'll need to handle the undefined case in your component to show default content.

You've mastered how to make your Next.js application's routing incredibly flexible!

• Dynamic Segments ([slug]) allow a single page to handle many specific URLs, receiving a string parameter.
• Catch-all Segments ([...slug]) capture multiple path segments into an array, useful for nested structures.
• Optional Catch-all Segments ([[...slug]]) extend catch-alls to also match the base path, with the parameter being undefined for the base path.

These powerful patterns are fundamental for building scalable and content-rich applications in Next.js.