M

MLOG

Bahasa Indonesia

Buka potensi UI yang skalabel dan dinamis di Next.js. Panduan komprehensif kami membahas Route Groups untuk organisasi dan Parallel Routes untuk dasbor kompleks. Tingkatkan kemampuan Anda sekarang!

Menguasai App Router Next.js: Pendalaman Arsitektur Route Groups dan Parallel Routes

Rilisnya App Router Next.js menandai pergeseran paradigma dalam cara pengembang membangun aplikasi web dengan framework React yang populer. Beralih dari konvensi berbasis file dari Pages Router, App Router memperkenalkan model yang lebih kuat, fleksibel, dan berpusat pada server. Evolusi ini memberdayakan kita untuk menciptakan antarmuka pengguna yang sangat kompleks dan berkinerja tinggi dengan kontrol dan organisasi yang lebih baik. Di antara fitur-fitur paling transformatif yang diperkenalkan adalah Route Groups dan Parallel Routes.

Bagi para pengembang yang bertujuan membangun aplikasi kelas enterprise, menguasai kedua konsep ini bukan hanya bermanfaat—ini sangat penting. Keduanya memecahkan tantangan arsitektural umum yang berkaitan dengan manajemen layout, organisasi rute, dan pembuatan antarmuka dinamis multi-panel seperti dasbor. Panduan ini memberikan eksplorasi komprehensif tentang Route Groups dan Parallel Routes, mulai dari konsep dasar hingga strategi implementasi tingkat lanjut dan praktik terbaik untuk audiens pengembang global.

Memahami App Router Next.js: Penyegaran Singkat

Sebelum kita mendalami lebih spesifik, mari kita tinjau sejenak prinsip-prinsip inti dari App Router. Arsitekturnya dibangun di atas sistem berbasis direktori di mana folder mendefinisikan segmen URL. File-file khusus di dalam folder-folder ini mendefinisikan UI dan perilaku untuk segmen tersebut:

Struktur ini, dikombinasikan dengan penggunaan default React Server Components (RSC), mendorong pendekatan server-first yang dapat secara signifikan meningkatkan kinerja dan pola pengambilan data. Route Groups dan Parallel Routes adalah konvensi tingkat lanjut yang dibangun di atas fondasi ini.

Mengupas Route Groups: Mengatur Proyek Anda agar Tetap Teratur dan Skalabel

Seiring berkembangnya aplikasi, jumlah rute bisa menjadi tidak terkendali. Anda mungkin memiliki satu set halaman untuk pemasaran, satu lagi untuk otentikasi pengguna, dan yang ketiga untuk dasbor aplikasi inti. Secara logis, ini adalah bagian-bagian terpisah, tetapi bagaimana Anda mengaturnya di sistem file Anda tanpa mengacaukan URL Anda? Inilah masalah yang dipecahkan oleh Route Groups.

Apa Itu Route Groups?

Route Group adalah mekanisme untuk mengatur file dan segmen rute Anda ke dalam grup logis tanpa memengaruhi struktur URL. Anda membuat sebuah route group dengan membungkus nama folder dalam tanda kurung, misalnya, (marketing) atau (app).

Nama folder di dalam tanda kurung murni untuk tujuan organisasi. Next.js sepenuhnya mengabaikannya saat menentukan path URL. Misalnya, file di app/(marketing)/about/page.js akan disajikan di URL /about, bukan /(marketing)/about.

Kasus Penggunaan Utama dan Manfaat Route Groups

Meskipun organisasi sederhana adalah sebuah keuntungan, kekuatan sejati Route Groups terletak pada kemampuannya untuk mempartisi aplikasi Anda menjadi beberapa bagian dengan layout bersama yang berbeda.

1. Membuat Layout Berbeda untuk Segmen Rute

Ini adalah kasus penggunaan yang paling umum dan kuat. Bayangkan sebuah aplikasi web dengan dua bagian utama:

Tanpa Route Groups, menerapkan root layout yang berbeda untuk bagian-bagian ini akan menjadi rumit. Dengan Route Groups, ini menjadi sangat intuitif. Anda dapat membuat file layout.js yang unik di dalam setiap grup.

Berikut adalah struktur file khas untuk skenario ini:

app/
├── (marketing)/
│   ├── layout.js      // Layout publik dengan header/footer pemasaran
│   ├── page.js        // Merender di '/'
│   └── about/
│       └── page.js    // Merender di '/about'
├── (app)/
│   ├── layout.js      // Layout dasbor dengan sidebar
│   ├── dashboard/
│   │   └── page.js    // Merender di '/dashboard'
│   └── settings/
│       └── page.js    // Merender di '/settings'
└── layout.js          // Root layout (misalnya, untuk tag <html> dan <body>)

Dalam arsitektur ini:

2. Mengeluarkan Segmen dari Layout Bersama

Terkadang, halaman atau bagian tertentu perlu melepaskan diri sepenuhnya dari layout induk. Contoh umum adalah proses checkout atau halaman arahan khusus yang seharusnya tidak memiliki navigasi situs utama. Anda dapat mencapai ini dengan menempatkan rute tersebut dalam sebuah grup yang tidak berbagi layout tingkat lebih tinggi. Meskipun ini terdengar rumit, ini hanya berarti memberikan sebuah route group file layout.js tingkat atasnya sendiri yang tidak merender `children` dari root layout.

Contoh Praktis: Membangun Aplikasi Multi-Layout

Mari kita bangun versi minimal dari struktur marketing/app yang dijelaskan di atas.

1. Root Layout (app/layout.js)

Layout ini minimal dan berlaku untuk setiap halaman. Ini mendefinisikan struktur HTML esensial.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

2. Layout Pemasaran (app/(marketing)/layout.js)

Layout ini mencakup header dan footer yang menghadap publik.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>Marketing Header</header>
      <main>{children}</main>
      <footer>Marketing Footer</footer>
    </div>
  );
}

3. Layout Dasbor Aplikasi (app/(app)/layout.js)

Layout ini memiliki struktur yang berbeda, menampilkan sidebar untuk pengguna yang terotentikasi.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        Dashboard Sidebar
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

Dengan struktur ini, menavigasi ke /about akan merender halaman dengan `MarketingLayout`, sementara menavigasi ke /dashboard akan merendernya dengan `AppLayout`. URL tetap bersih dan semantik, sementara struktur file proyek kita terorganisir dengan sempurna dan skalabel.

Membuka Potensi UI Dinamis dengan Parallel Routes

Jika Route Groups membantu mengatur bagian-bagian aplikasi yang berbeda, Parallel Routes mengatasi tantangan yang berbeda: menampilkan beberapa tampilan halaman yang independen dalam satu layout. Ini adalah persyaratan umum untuk dasbor kompleks, feed media sosial, atau UI apa pun di mana panel yang berbeda perlu dirender dan dikelola secara bersamaan.

Apa Itu Parallel Routes?

Parallel Routes memungkinkan Anda untuk merender satu atau lebih halaman secara bersamaan dalam layout yang sama. Rute-rute ini didefinisikan menggunakan konvensi folder khusus yang disebut slots. Slot dibuat menggunakan sintaks @folderName. Mereka bukan bagian dari struktur URL; sebaliknya, mereka secara otomatis diteruskan sebagai props ke file `layout.js` induk bersama terdekat.

Misalnya, jika Anda memiliki layout yang perlu menampilkan feed aktivitas tim dan grafik analitik secara berdampingan, Anda dapat mendefinisikan dua slot: `@team` dan `@analytics`.

Ide Inti: Slot

Anggaplah slot sebagai placeholder bernama di layout Anda. File layout secara eksplisit menerima slot-slot ini sebagai props dan memutuskan di mana akan merendernya.

Perhatikan komponen layout ini:

// Sebuah layout yang menerima dua slot: 'team' dan 'analytics'
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

Di sini, `children`, `team`, dan `analytics` semuanya adalah slot. `children` adalah slot implisit yang sesuai dengan `page.js` standar di direktori tersebut. `team` dan `analytics` adalah slot eksplisit yang harus dibuat dengan awalan `@` di sistem file.

Fitur dan Keunggulan Utama

Skenario Dunia Nyata: Membangun Dasbor yang Kompleks

Mari kita rancang sebuah dasbor di URL /dashboard. Dasbor ini akan memiliki area konten utama, panel aktivitas tim, dan panel analitik kinerja.

Struktur File:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // UI untuk slot analitik
    │   └── loading.js     // UI loading khusus untuk analitik
    ├── @team/
    │   └── page.js          // UI untuk slot tim
    ├── layout.js            // Layout yang mengatur slot-slot
    └── page.js              // Slot 'children' implisit (konten utama)

1. Layout Dasbor (app/dashboard/layout.js)

Layout ini menerima dan mengatur ketiga slot tersebut.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // Ganti dengan logika otentikasi nyata

  return isLoggedIn ? (
    <div>
      <h1>Main Dashboard</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>Team Activity</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>Performance Analytics</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>Please log in to view the dashboard.</div>
  );
}

2. Halaman Slot (misalnya, app/dashboard/@analytics/page.js)

Setiap file `page.js` slot berisi UI untuk panel spesifik tersebut.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // Mensimulasikan permintaan jaringan
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>Page Views: {data.views}</p>
      <p>Revenue: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>Loading analytics data...</p>;
}

Dengan pengaturan ini, ketika pengguna menavigasi ke /dashboard, Next.js akan merender `DashboardLayout`. Layout akan menerima konten yang dirender dari dashboard/page.js, dashboard/@team/page.js, dan dashboard/@analytics/page.js sebagai props dan menempatkannya sesuai. Yang terpenting, panel analitik akan menampilkan status `loading.js`-nya sendiri selama 3 detik tanpa memblokir rendering sisa dasbor.

Menangani Rute yang Tidak Cocok dengan `default.js`

Sebuah pertanyaan kritis muncul: Apa yang terjadi jika Next.js tidak dapat mengambil status aktif dari sebuah slot untuk URL saat ini? Misalnya, selama pemuatan awal atau pemuatan ulang halaman, URL mungkin /dashboard, yang tidak memberikan instruksi spesifik tentang apa yang harus ditampilkan di dalam slot @team atau `@analytics`. Secara default, Next.js akan merender error 404.

Untuk mencegah hal ini, kita dapat menyediakan UI cadangan (fallback) dengan membuat file default.js di dalam rute paralel.

Contoh:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>No analytics data selected.</p>
    </div>
  );
}

Sekarang, jika slot analitik tidak cocok, Next.js akan merender konten dari `default.js` alih-alih halaman 404. Ini penting untuk menciptakan pengalaman pengguna yang mulus, terutama pada pemuatan awal dari pengaturan rute paralel yang kompleks.

Menggabungkan Route Groups dan Parallel Routes untuk Arsitektur Tingkat Lanjut

Kekuatan sejati dari App Router terwujud saat Anda menggabungkan fitur-fiturnya. Route Groups dan Parallel Routes bekerja sama dengan indah untuk menciptakan arsitektur aplikasi yang canggih dan sangat terorganisir.

Kasus Penggunaan: Penampil Konten Multi-Modal

Bayangkan sebuah platform seperti galeri media atau penampil dokumen di mana pengguna dapat melihat item tetapi juga membuka jendela modal untuk melihat detailnya tanpa kehilangan konteks halaman latar belakang. Ini sering disebut "Intercepting Route" dan merupakan pola kuat yang dibangun di atas rute paralel.

Mari kita buat galeri foto. Saat Anda mengklik sebuah foto, foto itu terbuka dalam modal. Tetapi jika Anda menyegarkan halaman atau menavigasi ke URL foto secara langsung, itu harus menampilkan halaman khusus untuk foto tersebut.

Struktur File:

app/
├── @modal/(..)(..)photos/[id]/page.js  // Rute yang dicegat untuk modal
├── photos/
│   └── [id]/
│       └── page.js                  // Halaman foto khusus
├── layout.js                        // Root layout yang menerima slot @modal
└── page.js                          // Halaman galeri utama

Penjelasan:

Pola ini menggabungkan rute paralel (slot `@modal`) dengan konvensi perutean tingkat lanjut untuk menciptakan pengalaman pengguna yang mulus yang akan sangat rumit untuk diimplementasikan secara manual.

Praktik Terbaik dan Kesalahan Umum

Praktik Terbaik Route Groups

Praktik Terbaik Parallel Routes

Kesalahan Umum yang Harus Dihindari

Kesimpulan: Membangun Masa Depan Aplikasi Web

App Router Next.js, dengan fitur-fitur seperti Route Groups dan Parallel Routes, menyediakan fondasi yang kuat dan skalabel untuk pengembangan web modern. Route Groups menawarkan solusi elegan untuk mengorganisir kode dan menerapkan layout yang berbeda tanpa mengorbankan semantik URL. Parallel Routes membuka kemampuan untuk membangun antarmuka multi-panel yang dinamis dengan status independen, sesuatu yang sebelumnya hanya dapat dicapai melalui manajemen state sisi klien yang kompleks.

Dengan memahami dan menggabungkan pola arsitektural yang kuat ini, Anda dapat melampaui situs web sederhana dan mulai membangun aplikasi yang canggih, berkinerja tinggi, dan dapat dipelihara yang memenuhi tuntutan pengguna saat ini. Kurva pembelajarannya mungkin lebih curam daripada Pages Router klasik, tetapi imbalan dalam hal arsitektur aplikasi dan pengalaman pengguna sangat besar. Mulailah bereksperimen dengan konsep-konsep ini di proyek Anda berikutnya dan buka potensi penuh dari Next.js.

Menguasai App Router Next.js: Pendalaman Arsitektur Route Groups dan Parallel Routes | MLOG