Rute Bertingkat
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 6 dari 47.
Sekarang lakukan. Menambahkan halaman ke aplikasi Next.js memerlukan dua langkah: buat folder, lalu masukkan page.jsx ke dalamnya.
// app/about/page.jsx -> /about
export default function About() {
return <h1>About us</h1>;
}Itu seluruh isi file. Tidak ada tabel route yang perlu diperbarui, tidak ada import di tempat lain, tidak ada yang perlu dimulai ulang. Komponennya adalah React biasa. Satu-satunya hal yang mengubahnya menjadi URL adalah lokasi kamu menyimpannya.
Dua hal yang perlu kamu ingat:
- Komponen ini harus menjadi default export: dengan begitu, Next.js dapat memilih komponen halaman dari file ini.
- Nama komponennya terserah kamu.
About,AboutPage,Whatever: URL berasal dari folder, bukan dari fungsi.
Ingin /about/team juga? Buat app/about/team/ dan masukkan satu lagi page.jsx ke sana. Polanya tidak berubah seiring berkembangnya situs, itulah intinya.
Tantangan
PemulaAplikasi ini memiliki halaman beranda. Buat halaman tentang.
- Lengkapi file
app/about/page.jsx. - Ekspor sebuah komponen sebagai default darinya.
- Komponen harus mengembalikan
<h1>denganid="about-title"dan teks persisAbout us.
Jangan ubah app/page.jsx: pengujian mengunjungi kedua URL.
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.
