Next.js

Layout

Penjelasan

layout.js membungkus SEMUA page.js di dalam folder yang sama (dan sub-foldernya) dengan UI bersama, mis. navbar/footer — tidak perlu diulang manual di tiap halaman. Layout menerima props children yang berisi halaman aktifnya. Layout bisa BERSARANG: layout di folder dalam otomatis dibungkus lagi oleh layout di folder induknya.

Contoh Konsep

// app/layout.js (root layout, WAJIB ada, membungkus SELURUH aplikasi)
export default function RootLayout({ children }) {
    return (
        <html lang="id">
            <body>
                <nav>Navbar CompileDaily Study</nav>
                {children}
                <footer>Footer</footer>
            </body>
        </html>
    );
}

Praktikum

Bayangkan folder app/dashboard/ punya beberapa halaman (page.js, pengaturan/page.js). Buat app/dashboard/layout.js yang membungkus semuanya dengan sidebar navigasi sederhana, menerima dan merender children.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

app/layout.js (root layout) WAJIB ada dan WAJIB berisi tag <html> dan <body> — beda dengan layout bersarang di folder dalam yang TIDAK BOLEH menulis ulang <html>/<body> lagi, karena itu sudah jadi tanggung jawab root layout satu-satunya.

← Kembali App Router & File-based Routing Lanjutkan → Navigasi: Link & useRouter