Struktur Rapi dalam 15 Menit dengan Cara Membuat Layout App Router Next Js

Ditulis oleh Next.js

Cara membuat layout App Router Next.js paling cepat adalah membuat file layout.tsx di dalam folder app lalu mengembalikan komponen dengan props children. File ini membungkus semua halaman di bawahnya, jadi navbar, sidebar, dan footer cukup ditulis sekali. Struktur rapi bisa selesai dalam 15 menit kalau kamu membedakan root layout, section layout, dan nested layout sejak awal.

File Layout yang Wajib Ada di App Router

Folder app memakai konvensi file. layout.tsx berfungsi sebagai bingkai tampilan, page.tsx menjadi isi halaman untuk route tersebut, sedangkan template.tsx mirip layout tetapi membuat instance baru setiap navigasi sehingga state tidak dipertahankan.

Root layout di app/layout.tsx wajib mengembalikan tag html dan body. Next.js membutuhkan struktur ini untuk metadata, font, dan styling global.

  • loading.tsx: tampil otomatis saat segment mengambil data dengan Suspense.
  • error.tsx: menangkap error di segment tersebut, wajib Client Component.
  • not-found.tsx: tampil saat notFound() dipanggil atau route tidak cocok.

Langkah Membuat Layout Bertingkat yang Rapi

  1. Buat root layout di app/layout.tsx untuk font, html lang=”id”, navbar, dan footer global.
  2. Buat section layout, misalnya app/dashboard/layout.tsx untuk sidebar khusus area admin.
  3. Buat nested layout bila perlu, misalnya app/dashboard/settings/layout.tsx untuk tab pengaturan.
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <section>
      <aside>Sidebar</aside>
      <div>{children}</div>
    </section>
  );
}
  • Pakai grup route seperti app/(marketing)/layout.tsx bila beberapa route butuh bingkai sama tanpa mengubah URL.
  • Letakkan layout sedekat mungkin dengan folder yang memakainya agar mudah dilacak.
  • Jaga layout sebagai Server Component kecuali ada interaksi.

BACA JUGA:

Tabel Pola Layout untuk Kebutuhan Umum

Kebutuhan Struktur Folder Catatan
Landing statis app/(marketing)/layout.tsx Satu bingkai untuk home, harga, kontak
Detail dinamis app/blog/[slug]/layout.tsx Terima params untuk breadcrumb atau sidebar
Dashboard paralel app/dashboard/@team/page.tsx Butuh slot dan default.tsx untuk fallback

Jadikan navbar sebagai Client Component hanya bila memakai useState, usePathname, atau menu mobile. Sisa layout biarkan Server Component supaya render awal tetap ringan.

FAQ

Apakah setiap folder wajib punya layout sendiri?

Tidak. Folder tanpa layout otomatis memakai layout dari induk terdekat.

Kenapa perubahan layout tidak muncul setelah edit?

Layout di cache di sisi server, restart dev server dan periksa apakah segment memakai template atau fetch yang ter-cache.

Kapan memakai template dibanding layout?

Pakai template bila butuh state baru atau animasi ulang setiap pindah halaman, misalnya wizard form.

Artikel Terkait