Tata Letak Bersarang
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 13 dari 47.
Layout root bukan satu-satunya. Letakkan layout.jsx di folder mana pun, dan layout itu akan membungkus rute folder tersebut saja.
app/
layout.jsx wraps EVERYTHING
page.jsx /
menu/
layout.jsx wraps /menu and everything under it
page.jsx /menu
pizza/
page.jsx /menu/pizzaKunjungi /menu/pizza dan Next.js menyusunnya secara bertingkat dari luar ke dalam:
RootLayout
MenuLayout
PizzaPageKunjungi / dan hanya layout root yang dijalankan: layout menu tidak ada di path URL tersebut, jadi tidak pernah muncul.
Layout bersarang ditulis persis seperti layout root, tanpa shell: tidak ada <html>, tidak ada <body>. Hanya sebuah komponen yang menerima children.
Begini cara satu bagian situs memiliki sidebar, tab, dan judulnya sendiri, tanpa satu pun pernyataan if tentang URL saat ini.
Tantangan
MudahBagian menu memerlukan judulnya sendiri: di /menu dan halaman hidangannya, tetapi tidak di tempat lain.
app/menu/layout.jsx sudah ada dan meneruskan children begitu saja. Di dalam <section>, di atas {children}, tambahkan:
<h2>denganid="menu-header"dan teksMenu
Pengujian memeriksa apakah judul tampil di /menu dan /menu/pizza, serta apakah judul itu tidak ada saat kembali ke /.
Coba sendiri
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar Next.js
2Routing dan Tautan
Folder Menjadi RuteRute BertingkatMenautkan HalamanRute DinamisHalaman Tidak DitemukanRekap: Routing
3Tata Letak dan Metadata
Tata Letak UtamaNavigasi BersamaTata Letak BersarangMetadata HalamanMetadata DinamisUlasan: Tata Letak