- Apa Itu Layout di App Router?
- Layout Global
- Menambahkan Header dan Footer
- Nested Layout
- Contoh Struktur Layout Bersarang
- Kesimpulan
Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah mempelajari dynamic route dan bagaimana Next.js App Router menangani parameter dinamis pada URL. Pada artikel ini, kita akan membahas salah satu fitur terpenting pada App Router, yaitu layout.
Layout memungkinkan kita mendefinisikan struktur tampilan yang konsisten, seperti header, footer, atau sidebar, tanpa perlu menuliskannya berulang di setiap halaman. Konsep ini membuat kode lebih rapi dan mudah dirawat.
Apa Itu Layout di App Router?
Pada Next.js App Router, layout didefinisikan menggunakan file layout.tsx. File ini berfungsi sebagai pembungkus (wrapper) untuk semua halaman di dalam satu route segment.
Setiap folder di dalam app/ dapat memiliki file layout.tsx sendiri. Layout tersebut akan otomatis membungkus semua page.tsx yang berada di dalam folder tersebut dan juga di sub-folder-nya.
Layout Global
Layout global biasanya didefinisikan pada file:
app/layout.tsx
Layout ini akan membungkus seluruh halaman aplikasi. Secara default, file layout.tsx yang dibuat oleh Next.js kurang lebih seperti berikut:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
)
}
Properti children berisi konten dari halaman (page.tsx) yang sedang diakses.
Menambahkan Header dan Footer
Sekarang kita coba menambahkan struktur layout sederhana berupa header dan footer.
Silahkan teman-teman ubah file app/layout.tsx menjadi seperti berikut:
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<header className="flex justify-center">
<h1>My App</h1>
</header>
<main>
{children}
</main>
<footer className="flex justify-center bottom-0 pt-20">
<p>Copyright © 2026</p>
</footer>
</body>
</html>
);
}
Dengan layout ini, semua halaman di aplikasi akan memiliki header dan footer yang sama.
Nested Layout
Selain layout global, App Router juga mendukung nested layout. Artinya, kita bisa membuat layout khusus untuk bagian tertentu dari aplikasi.
Sebagai contoh, kita ingin membuat layout khusus untuk halaman dashboard.
Silahkan teman-teman buat file berikut:
app/dashboard/layout.tsx
Isi file tersebut dengan kode sederhana:
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<section>
<nav>
<p>Dashboard Menu</p>
</nav>
<div>
{children}
</div>
</section>
)
}
Layout ini hanya akan diterapkan pada halaman yang berada di dalam folder dashboard.
Contoh Struktur Layout Bersarang
Berikut contoh struktur folder dengan nested layout:
app/
├── layout.tsx
├── page.tsx
└── dashboard/
├── layout.tsx
└── page.tsx
Pada struktur tersebut, halaman /dashboard akan dibungkus oleh dua layout sekaligus, yaitu layout global dan layout dashboard.
Kesimpulan
Pada artikel ini, kita telah mempelajari konsep layout pada Next.js App Router, mulai dari layout global hingga nested layout. Dengan layout, kita dapat membangun struktur tampilan yang konsisten dan terorganisir tanpa harus menulis ulang kode di setiap halaman.
Pada artikel selanjutnya, kita akan membahas Link, useRouter, dan usePathname untuk kebutuhan navigasi yang lebih lanjut di Next.js App Router.
Terima Kasih
Artikel ini dibaca sebanyak 873 kali
SAWERIA
Memuat komentar...