Navigasi: Link & useRouter — CompileDaily Study

Penjelasan

Komponen <Link> dari next/link dipakai untuk navigasi DEKLARATIF (mis. menu navbar) tanpa reload penuh halaman, plus otomatis prefetch halaman tujuan di background untuk transisi lebih cepat. Untuk navigasi TERPROGRAM (mis. redirect setelah submit form), dipakai hook useRouter() dari next/navigation (khusus Client Component).

Contoh Konsep

import Link from 'next/link';

export default function Nav() {
    return (
        <nav>
            <Link href="/">Beranda</Link>
            <Link href="/tentang">Tentang</Link>
        </nav>
    );
}

// Navigasi terprogram (Client Component):
// 'use client';
// import { useRouter } from 'next/navigation';
//
// function TombolSimpan() {
//     const router = useRouter();
//     function handleSimpan() {
//         router.push('/sukses');
//     }
//     return <button onClick={handleSimpan}>Simpan</button>;
// }

Praktikum

Buat komponen navigasi dengan <Link> ke '/kontak' dan '/layanan'. Tulis juga contoh Client Component dengan tombol yang, saat diklik, memakai useRouter().push('/terima-kasih') untuk pindah halaman.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

useRouter() dari next/navigation HANYA bisa dipakai di Client Component (file dengan 'use client' di baris paling atas) — kalau dicoba dipakai langsung di Server Component biasa, Next.js akan error karena hook itu butuh interaktivitas browser.