Menautkan Halaman
Termasuk bagian Dasar-Dasar Next.js dalam perjalanan React di Coddy. Pelajaran 7 dari 47.
Dua halaman yang tidak bisa dijangkau siapa pun belum bisa disebut situs. Kamu membutuhkan tautan, dan Next.js punya tautannya sendiri:
import Link from 'next/link';
export default function Home() {
return (
<nav>
<Link href="/about">About</Link>
</nav>
);
}Tag ini tampak seperti <a>, dan di HTML yang sudah selesai, tag ini memang adalah tag tersebut: href-nya sama, bisa diklik kanan, serta dapat dibaca oleh pembaca layar dan mesin pencari. Jadi, mengapa tidak langsung menulis <a href="/about">?
Karena itulah yang dilakukan browser terhadap tautan biasa: browser membuang halaman saat ini lalu memuat halaman baru secara keseluruhan. Setiap script diunduh ulang, React dimulai dari awal, dan semua yang ada di memori hilang: menu yang terbuka, formulir yang terisi sebagian, item di keranjang.
Link mencegat klik dan hanya mengganti bagian layar yang benar-benar berbeda. Aplikasi tidak pernah dimulai ulang, jadi status tetap ada dan halaman baru langsung muncul.
<a href>: pemuatan ulang penuh, aplikasi dimulai ulang, status hilang<Link href>: URL yang sama,<a>yang sama di HTML, tanpa pemuatan ulang
Aturannya sederhana: di dalam aplikasimu, selalu gunakan Link. Gunakan <a> biasa untuk tautan yang mengarah ke luar situsmu.
Tantangan
MudahKedua halaman sudah ada, tetapi belum ada cara untuk berpindah di antara keduanya. Hubungkan keduanya dengan Link.
- Di kedua file, impor
Linkdarinext/link. - Di
app/page.jsx, tambahkan tautan ke/aboutdenganid="to-about". - Di
app/about/page.jsx, tambahkan tautan kembali ke/denganid="to-home".
Teks tautan bebas kamu tentukan. Tes akan mengeklik setiap tautan dan memeriksa apakah kamu tiba di halaman yang benar.
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.
