Navigasi Bersama
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 12 dari 47.
Bar navigasi adalah elemen klasik yang ditempatkan dalam layout: ditulis sekali, muncul di setiap rute, dan tidak pernah dipasang ulang.
// app/layout.jsx
import Link from 'next/link';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<nav>
<Link href="/">Home</Link>
</nav>
{children}
</body>
</html>
);
}Perhatikan letak {children}: setelah nav. Apa pun yang kamu letakkan sebelumnya akan muncul di atas halaman, dan apa pun yang kamu letakkan setelahnya akan muncul di bawah. Layout ini hanya JSX. Satu-satunya aturan adalah {children} harus ada di suatu tempat di dalamnya.
Sekarang tata letak itu adalah file milikmu, bukan file yang terkunci. Tambahkan navigasi, lalu lihat navigasi itu tetap di tempat saat halaman berubah di bawahnya.
Tantangan
MudahBeri Coddy Eats bilah navigasi yang ada di setiap halaman.
Di app/layout.jsx, di dalam <body> dan di atas {children}, tambahkan:
<nav>denganid="nav"- Di dalamnya,
<Link>ke/denganid="home-link"dan teksHome - Dan
<Link>ke/menudenganid="menu-link"dan teksMenu
Halaman-halaman ini terkunci: kamu hanya boleh mengubah layout. Setelah itu, pengujian akan membuka /menu dan memeriksa apakah bilah navigasi masih tampil di layar.
Coba sendiri
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'Coddy Eats',
};
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