Next.js 15 Fullstack Web Apps · Pelajaran

Rute Dinamis dan Segmen Catch-all

Buat rute fleksibel yang menyesuaikan diri dengan konten dinamis menggunakan segmen dinamis dan rute catch-all.

Rute Dinamis dan Segmen Catch-all adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Flexible Routing in Next.js

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.

Creating Dynamic Segments

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.

Accessing Dynamic Parameters

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.

// File: app/blog/[slug]/page.js

export default function BlogPostPage({ params }) {
  const { slug } = params; // If URL is /blog/my-post, slug will be 'my-post'

  return (
    <main>
      <h1>Blog Post: {decodeURIComponent(slug)}</h1>
      <p>This content is for the post identified by '{decodeURIComponent(slug)}'.</p>
    </main>
  );
}

Introducing Catch-all Segments

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.

Creating Catch-all Routes

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'].

Accessing Catch-all Parameters

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.

// File: app/docs/[...slug]/page.js

export default function DocsPage({ params }) {
  const { slug } = params; // If URL is /docs/intro/setup, slug is ['intro', 'setup']

  return (
    <main>
      <h2>Documentation Path: /{slug.join('/')}</h2>
      <p>Segments found: {slug.map(s => `<code>${s}</code>`).join(', ')}</p>
    </main>
  );
}

Optional Catch-all Segments

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.

Optional Catch-all Example

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.

// File: app/docs/[[...slug]]/page.js

export default function OptionalDocsPage({ params }) {
  const { slug } = params; // If URL is /docs, slug is undefined
                           // If URL is /docs/intro, slug is ['intro']

  const pathDisplay = slug ? slug.join('/') : 'Home Index';

  return (
    <main>
      <h2>Docs: {pathDisplay}</h2>
      <p>This page handles both the base path and any sub-paths.</p>
    </main>
  );
}

Quick Check on Routing

Which of the following statements about Next.js dynamic and catch-all routes are TRUE?

Recap: Dynamic & Catch-all Routes

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rute Dinamis dan Segmen Catch-all” gratis?

Ya — teks lengkap “Rute Dinamis dan Segmen Catch-all” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Rute Dinamis dan Segmen Catch-all”?

Buat rute fleksibel yang menyesuaikan diri dengan konten dinamis menggunakan segmen dinamis dan rute catch-all. Kamu berlatih Next.js 15 Fullstack Web Apps dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Rute Dinamis dan Segmen Catch-all” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Next.js 15 Fullstack Web Apps