Metadata & SEO di Next.js
Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, skema JSON-LD
1Apa metode yang direkomendasikan untuk mendefinisikan metadata di Next.js App Router?
Apa metode yang direkomendasikan untuk mendefinisikan metadata di Next.js App Router?
Jawaban
Next.js App Router memperkenalkan objek `metadata` yang diekspor dari layouts dan pages untuk mendefinisikan metadata secara type-safe dan teroptimasi. Pendekatan ini menggantikan komponen `<Head>` dari Next.js 12 dan memungkinkan server-side rendering metadata. Export `metadata` bersifat statis dan dianalisis pada build time untuk performa SEO yang lebih baik.
2Bagaimana cara menghasilkan metadata dinamis berdasarkan parameter route di Next.js?
Bagaimana cara menghasilkan metadata dinamis berdasarkan parameter route di Next.js?
Jawaban
Fungsi `generateMetadata` bersifat async dan menerima `params` serta `searchParams` sebagai argumen, memungkinkan pemuatan data untuk membangun metadata secara dinamis. Fungsi ini berjalan di sisi server saat render dan dapat melakukan panggilan API. Ini memungkinkan pembuatan metadata unik untuk setiap halaman dinamis, yang penting untuk SEO halaman detail.
3Bagaimana Next.js menangani penggabungan metadata antara layouts bersarang dan pages?
Bagaimana Next.js menangani penggabungan metadata antara layouts bersarang dan pages?
Jawaban
Next.js secara otomatis menggabungkan metadata dari layouts induk ke pages anak, dengan prioritas pada nilai yang paling dekat dengan page. Field ditimpa (title, description) kecuali `openGraph.images` dan `twitter.images` yang digabungkan sebagai array. Kaskade ini memungkinkan pendefinisian metadata default di level root dan penimpaan di level page.
Apa manfaat menggunakan `title.template` dalam metadata Next.js?
Apa metode yang direkomendasikan untuk mendefinisikan favicon di Next.js App Router?
+15 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
Routing & Navigasi Next.js
API Routes 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