Routing & Navigasi Next.js
Dynamic routes, route groups, parallel routes, intercepting routes, useRouter, Link, redirect
1Apa sintaks untuk membuat rute dinamis di Next.js App Router?
Apa sintaks untuk membuat rute dinamis di Next.js App Router?
Jawaban
Rute dinamis di Next.js App Router menggunakan tanda kurung siku untuk mendefinisikan segmen URL variabel. Misalnya, [id] membuat rute yang menangkap nilai apa pun di posisi tersebut dalam URL. Nilai ini kemudian dapat diakses melalui parameter halaman. Konvensi ini memungkinkan pembuatan halaman generik yang beradaptasi dengan konten berbeda tanpa membuat file terpisah untuk setiap variasi.
2Apa peran utama komponen Link di Next.js?
Apa peran utama komponen Link di Next.js?
Jawaban
Komponen Link adalah elemen navigasi yang direkomendasikan di Next.js. Ia secara otomatis melakukan prefetch rute yang terlihat di viewport dan memungkinkan navigasi sisi klien tanpa pemuatan ulang halaman penuh. Berbeda dengan tag a standar, Link mempertahankan status aplikasi dan memberikan transisi yang mulus antar halaman, secara signifikan meningkatkan pengalaman pengguna dan performa.
3Bagaimana cara mengakses parameter rute dinamis di Server Component?
Bagaimana cara mengakses parameter rute dinamis di Server Component?
Jawaban
Di Next.js App Router, Server Components secara otomatis menerima objek params yang berisi segmen URL dinamis. Objek ini diteruskan sebagai prop ke fungsi komponen. Misalnya, untuk rute [id], params.id akan berisi nilai yang ditangkap. Pendekatan ini menyederhanakan akses parameter tanpa memerlukan hooks sisi klien.
Apa keuntungan utama dari route groups di Next.js?
Apa perbedaan antara useRouter dan usePathname?
+19 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Form & Controlled Components
Pengambilan Data & API
React Query (TanStack Query)
Styling & CSS-in-JS
Dasar-dasar Next.js
TypeScript dengan React
Data Fetching Next.js
Server Actions Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Pengujian React
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Fitur Lanjutan Next.js
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Keamanan React & Praktik Terbaik
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis