Next.js
Pengenalan Next.js
Apa itu Next.js, cara instalasi lewat create-next-app, dan cara menjalankan project pertamamu.
App Router & File-based Routing
Setiap folder di app/ otomatis jadi satu route, tanpa perlu daftar route manual.
Layout
Membungkus banyak halaman dengan UI bersama (mis. navbar, footer) lewat file layout.js.
Navigasi: Link & useRouter
Berpindah halaman tanpa reload lewat komponen Link, dan navigasi terprogram lewat useRouter.
Dynamic Routes
Membuat route dengan parameter dinamis lewat penamaan folder [param].
Server Components vs Client Components
Perbedaan komponen yang dirender di server (default) dengan yang butuh interaktivitas browser.
Data Fetching di Server Component
Server Component boleh langsung async dan fetch data tanpa useEffect.
Loading & Error UI
Menampilkan UI loading dan error otomatis lewat file loading.js dan error.js.
Static vs Dynamic Rendering
Next.js otomatis memilih render halaman sekali saat build (static) atau tiap request (dynamic).
Route Handlers (API Routes)
Membuat endpoint API sendiri lewat file route.js di dalam app/api/.
Server Actions
Menjalankan kode server langsung dari form/event di Client Component, tanpa bikin API endpoint terpisah.
Metadata & SEO
Mengatur judul, deskripsi, dan meta tag SEO lewat export metadata atau generateMetadata.
Image Optimization dengan next/image
Komponen Image bawaan yang otomatis optimasi ukuran, format, dan lazy loading gambar.
Client-side State di Next.js
Memakai useState/useEffect di Client Component, sama seperti React biasa.
Fetching Data di Client Component
Fetch data di browser lewat useEffect, dipakai saat data bergantung pada interaksi user.
Middleware di Next.js
Kode yang berjalan sebelum request mencapai route, lewat file middleware.js di root project.
Environment Variables
Menyimpan konfigurasi rahasia lewat .env.local, dan variabel khusus yang boleh diakses browser lewat prefix NEXT_PUBLIC_.
Static Assets & CSS Modules
Menyimpan file statis di folder public/, dan CSS yang otomatis ter-scope per komponen lewat CSS Modules.
Tugas Akhir
Latihan akhir menggabungkan App Router, Server Component fetch, dan Server Action dalam satu aplikasi Catatan.