← Semua track
▲

Next.js

App Router, server components, sampai deploy production.

±60 jam · 0/57 selesai (0%)

💡 Saran (bukan syarat): sebaiknya selesaikan dulu React. Tapi semua materi tetap terbuka — kamu yang menentukan.

Modul 1: App Router: Halaman & Layout

Routing berbasis file — fondasi semua aplikasi Next.js modern.

7 bab dalam modul ini
  1. 1.1Kenapa Next.js: masalah yang diselesaikan di atas React
  2. 1.2Struktur app/: page, layout, folder = route
  3. 1.3Dynamic route [slug] & catch-all
  4. 1.4Nested layout & template
  5. 1.5loading.tsx, error.tsx, not-found.tsx
  6. 1.6Link & navigasi client-side
  7. 1.7Route group & private folder

Modul 2: Server vs Client Components

Konsep pembeda Next.js modern — salah paham di sini, salah arsitektur semuanya.

6 bab dalam modul ini
  1. 2.1Server component: default, kenapa, dan batasannya
  2. 2.2'use client': kapan benar-benar dibutuhkan
  3. 2.3Boundary: server membungkus client, bukan sebaliknya
  4. 2.4Mengoper data & children menembus boundary
  5. 2.5Pola komposisi: interaktif di daun, data di akar
  6. 2.6Kesalahan umum: 'use client' di root, import server code ke client

Modul 3: Data Fetching & Caching

Fetch di server, cache yang bisa diprediksi, dan revalidasi.

6 bab dalam modul ini
  1. 3.1async server component: fetch langsung di komponen
  2. 3.2Static vs dynamic rendering
  3. 3.3revalidate: ISR & on-demand revalidation
  4. 3.4cache() dan deduplication
  5. 3.5Streaming & Suspense untuk UI bertahap
  6. 3.6generateStaticParams untuk halaman dinamis

Modul 4: Route Handlers (API)

Backend ringan di dalam Next.js: REST endpoint untuk kebutuhan nyata.

6 bab dalam modul ini
  1. 4.1route.ts: GET, POST, PUT, DELETE
  2. 4.2Request & Response: body, header, status
  3. 4.3Query param & dynamic segment di handler
  4. 4.4Validasi input dengan Zod
  5. 4.5Error response yang konsisten
  6. 4.6Kapan route handler vs server action

Modul 5: Form & Server Actions

Mutasi data tanpa boilerplate API — pola form modern Next.js.

6 bab dalam modul ini
  1. 5.1'use server' & action di form
  2. 5.2useActionState untuk pending & error
  3. 5.3Validasi server-side + pesan error ke UI
  4. 5.4revalidatePath & revalidateTag setelah mutasi
  5. 5.5Optimistic UI dengan useOptimistic
  6. 5.6Keamanan: server action tetap endpoint publik

Modul 6: Autentikasi

Login yang benar: session, proteksi route, dan middleware.

6 bab dalam modul ini
  1. 6.1Konsep session vs token
  2. 6.2Auth.js (NextAuth): setup & provider
  3. 6.3Proteksi halaman di server component
  4. 6.4Middleware untuk guard route
  5. 6.5Role & otorisasi sederhana
  6. 6.6Menyimpan user di database

Modul 7: Optimasi & SEO

Fitur yang membuat Next.js dipilih perusahaan: cepat dan terindeks.

6 bab dalam modul ini
  1. 7.1next/image: kenapa dan cara pakainya
  2. 7.2next/font & layout shift
  3. 7.3Metadata API: title, description, Open Graph
  4. 7.4sitemap.ts & robots.ts
  5. 7.5Lighthouse & Core Web Vitals
  6. 7.6Bundle analysis & dynamic import

Modul 8: Database & Deploy

Dari localhost ke URL publik: Prisma, Postgres, dan Vercel.

6 bab dalam modul ini
  1. 8.1Prisma + PostgreSQL di Next.js
  2. 8.2Environment variable: lokal vs production
  3. 8.3Deploy ke Vercel: preview & production
  4. 8.4Custom domain & HTTPS
  5. 8.5Logging & error monitoring dasar
  6. 8.6Checklist pre-launch