Catatan Kuliah: Next.js - Routing dan Layout

Pengenalan

• Pembicara: Habib Saepuloh
• Tema: Routing dan Layout dalam Next.js

Konsep Routing di Next.js

• Folder pages digunakan sebagai routing utama.
• File dalam folder pages menjadi rute aplikasi.
  • Contoh: index.tsx diakses melalui localhost:3000.
  • Contoh: Membuat about.tsx: const AboutPage = () => { return <div><h1>About Page</h1></div>; } export default AboutPage;
• Jika file tidak ada, seperti profile, akan muncul halaman 404 secara otomatis.

Struktur Folder

• Struktur folder dapat digunakan untuk mengorganisasi route.
  • Contoh: Memindahkan about.tsx ke dalam folder about dan mengganti namanya menjadi index.tsx.
  • Akses ke about tetap sama, localhost:3000/about.

Nested Routing

• Membuat folder dalam pages untuk nested routes.
  • Contoh: Membuat folder setting dengan subfolder user dan app:
    • setting/user/index.tsx
    • setting/app/index.tsx
• Untuk mengakses, gunakan path: localhost:3000/setting/user dan localhost:3000/setting/app.

Dynamic Routing

• Menggunakan dynamic routing untuk detail produk atau halaman yang berubah-ubah.
  • Contoh: Folder produk dengan index.tsx dan file [id].tsx untuk dynamic route.
  • Memanfaatkan useRouter untuk mengambil parameter dari URL.

Penggunaan useRouter

• Contoh penggunaan useRouter untuk mendapatkan query: const router = useRouter(); const { id } = router.query;

Layouting dalam Next.js

• Menciptakan layout aplikasi dengan folder komponen.
• Contoh: Membuat komponen Navbar dan Footer.
• Menggunakan children untuk menyisipkan konten dalam layout: const AppShell = ({ children }) => { return ( <div> <Navbar /> {children} <Footer /> </div> ); }

Kesimpulan

• Telah dibahas tentang routing, nested routing, dynamic routing, dan layouting di Next.js.
• Pengaturan routing di Next.js lebih sederhana dibandingkan framework lain seperti Laravel.

Penutup

• Jangan lupa untuk subscribe, komen, like, dan share video.