Tata Letak Utama

Setiap aplikasi memiliki bagian yang tidak pernah berubah: kerangka halaman, header, footer. Di Next.js, bagian-bagian itu berada di layout, dan yang paling luar disebut root layout.

Itulah file yang selama ini selalu ada di hadapanmu:

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

Tiga hal membuatnya berbeda dari halaman:

• File ini wajib, dan satu-satunya file yang merender <html> dan <body>
• File ini menerima children, halaman apa pun yang cocok dengan URL. Jika kamu lupa merender {children}, aplikasi kamu hanya menampilkan kerangka.
• File ini membungkus setiap rute di aplikasi, tanpa perlu halaman mana pun mengimpornya

Data ini tetap tersimpan

Inilah bagian yang mengejutkan banyak orang. Saat pengguna berpindah dari / ke /menu, layout tidak dibuat ulang. Next.js mengganti halaman di dalamnya dan membiarkan layout tetap seperti semula.

Jadi, header bersama tidak berkedip, video di sidebar terus diputar, dan semua state yang tersimpan di layout tetap bertahan saat navigasi: menu yang terbuka tetap terbuka, posisi gulir tetap sama. Layout adalah kerangka yang bertahan lama; halaman silih berganti di dalamnya.

Satu konsekuensi yang perlu diingat: karena layout tidak dijalankan ulang saat navigasi, layout tidak dapat membaca searchParams halaman saat ini. Layout tidak memantau perubahan tersebut.