Kodeloka
  1. Kodeloka
  2. Kelas Next.js
  3. Materi

Materi tertulis · 23 modul

Materi Next.js

Kelas Next.js 16 berbahasa Indonesia: 23 modul tentang App Router, Server dan Client Component, Server Action, caching dan revalidasi, use cache, Partial Prerendering, keamanan, dan deployment.

Buka kelas interaktif →Mulai dari awal

Dasar

  1. 1. Pengenalan Next.js 16 & Ecosystem OverviewMemahami evolusi Next.js 16, integrasi React 19, Turbopack Bundler, App Router vs Pages Router, dan arsitektur Full-Stack modern.
  2. 2. Inisialisasi Proyek & Struktur Direktori App RouterLangkah demi langkah membuat proyek Next.js 16 dengan TypeScript, Tailwind CSS v4, ESLint, dan memahami struktur folder app/.
  3. 3. Server Components vs Client Components di Next.js 16Memahami batasan (serialization boundaries), interaktivitas event listener, dan kapan harus menggunakan 'use client'.
  4. 4. Styling dengan Tailwind CSS v4 & Shadcn UIMengatur styling modern dengan Tailwind CSS v4, CSS Variables, Dark Mode toggle, dan komponen Shadcn UI.

Routing & Layout

  1. 5. File-Based Routing: Static, Dynamic & Catch-All RoutesMenguasai pemetaan folder menjadi URL path, Dynamic Routes [id], Catch-all [...slug], dan Route Groups (auth).
  2. 6. Layouts, Templates, & Component CompositionMembuat nested layouts, memahami perbedaan state preservation pada Layout vs re-rendering pada Template.
  3. 7. Special Files: loading.tsx, error.tsx, & not-found.tsxMengatasi UI asynchronous dengan React Suspense via loading.tsx, Error Boundaries via error.tsx, serta Halaman 404.
  4. 8. Metadata API, OpenGraph & Dynamic SEOMengonfigurasi SEO, tag meta title, meta description, favicon, dan OpenGraph sosial media secara statis & dinamis.

Data & Caching

  1. 9. Data Fetching & Caching Strategy di Next.js 16Mendalami arsitektur Fetch API, Request Memoization, Static Rendering vs Dynamic Rendering pada Next.js 16.
  2. 10. Server Actions & Form Handling ('use server')Mengabaikan boilerplate API routes dengan Server Actions, validasi form Zod, useFormStatus, dan useActionState.
  3. 11. Revalidation & Dynamic Data Tagging (revalidatePath & revalidateTag)On-demand cache invalidation menggunakan revalidatePath() dan revalidateTag() untuk memperbarui UI real-time.
  4. 12. Cache Components & Direktif 'use cache'Model caching eksplisit Next.js modern: menandai fungsi atau komponen sebagai dapat di-cache dengan 'use cache', mengatur masa berlakunya, dan membatalkannya lewat tag.
  5. 13. Partial Prerendering & StreamingMenggabungkan kecepatan halaman statis dengan kesegaran data dinamis dalam satu respons: kerangka statis dikirim seketika, bagian dinamis mengalir menyusul.
  6. 14. State Management & Advanced React 19 Hooks (useOptimistic, useActionState)Menggunakan fitur mutasi responsif React 19: update UI instan dengan useOptimistic dan status form dengan useActionState.

Backend & API

  1. 15. API Routes & Route Handlers (app/api/route.ts)Membuat RESTful API endpoints di Next.js 16 menggunakan NextRequest & NextResponse untuk integrasi Webhook & Mobile Apps.
  2. 16. Middleware, Security & Authentication FlowMenangani proteksi route dengan middleware.ts, verifikasi JWT/Session Cookie, Redirects, dan NextAuth / Clerk integration.
  3. 17. proxy.ts, after() & Migrasi ke Next.js 16Perubahan yang merusak kompatibilitas saat naik ke Next.js 16, penggantian middleware, menjalankan pekerjaan setelah respons terkirim, dan alur migrasi yang aman.
  4. 18. Database Integration dengan Prisma & PostgreSQLMenghubungkan aplikasi Next.js 16 ke PostgreSQL menggunakan Prisma ORM, Singleton client pattern, & Serverless Connection Pooling.
  5. 19. Security Best Practices & Environment Variables ProtectionAmankan kredensial rahasia dengan .env.local, pembatasan prefix NEXT_PUBLIC_, dan pencegahan XSS/CSRF.

Optimization & Deploy

  1. 20. Optimasi Media: Image, Font, Script & Dynamic ImportsMencapai nilai Core Web Vitals 100 dengan next/image, next/font, next/script, dan Code Splitting dynamic().
  2. 21. Analytics, PostHog & Monitoring Real-timeMelacak perilaku pengguna, funnel konversi tiket event, dan error tracking dengan PostHog Analytics & OpenTelemetry.
  3. 22. Testing Next.js 16: Unit Testing & E2E dengan PlaywrightPengujian otomatis komponen dengan Vitest / React Testing Library dan pengujian alur pengguna E2E dengan Playwright.
  4. 23. Build, Dockerization & Production Deployment di VercelMenyiapkan build produksi `npm run build`, membuat Standalone Docker Image, dan rilis otomatis di Vercel Cloud Platform.