Next.js Mastery: Full-Stack, Auth & Deploy

Di bagian pertama kamu sudah belajar fondasi App Router: folder app/ sebagai peta URL, layout dan page, Server Component vs Client Component, serta cara mengambil data di server. Sampai titik itu, aplikasimu baru bisa membaca data. Bagian kedua ini mengajakmu menyeberang ke sisi yang lebih seru sekaligus lebih menantang: aplikasi yang bisa menulis data, menyimpan ke database, mengenali siapa penggunanya, menjaga rahasia, diuji otomatis, lalu dipasang di internet supaya bisa dibuka siapa saja. Dengan kata lain, kamu akan membangun aplikasi full-stack: frontend dan backend hidup di satu proyek Next.js.

Urutan modulnya disusun seperti membangun rumah. Kita mulai dari "pintu" untuk aplikasi lain (Route Handler), lalu "formulir resepsionis" (Server Actions dan form), trik membuat UI terasa instan (mutasi optimistis), "gudang arsip" (database), "satpam di gerbang" (Proxy), "kartu identitas" (autentikasi), "brankas" (environment variable), "renovasi agar cepat" (performa), "inspeksi bangunan" (testing), sampai "serah terima kunci" (deploy). Semuanya dirangkum di Proyek Akhir Fase 4: blog full-stack dengan dashboard admin.

Semua kode di materi ini sudah dicoba di proyek uji yang dibuat dengan npx create-next-app@latest, dan proyek akhirnya lolos npm run build, 3 tes Vitest, dan 3 tes Playwright. Versi yang dipakai (dicek dengan npm view <paket> version saat materi ditulis, Oktober 2026): Next.js 16.4.3, React 19.3 (create-next-app memasang 19.3.0), Drizzle ORM 0.45.4 + drizzle-kit 0.31.11, @libsql/client 0.18.0, Zod 4.6.7, jose 6.2.13, Better Auth 1.7.12, Vitest 5.0.5, @testing-library/react 16.3.3, jsdom 30.1.3, @vitejs/plugin-react 6.1.2, @playwright/test 1.64.1, dan Tailwind CSS 4.3.3. Next.js 16 butuh Node.js minimal 20.9. Satu hal penting yang perlu kamu tahu sejak awal: proyek baru dari create-next-app versi 16.4 sudah menyalakan cacheComponents: true dan partialPrefetching: true di next.config.mjs. Jadi semua contoh di sini mengikuti model Cache Components (dibahas di Modul 8). Kalau kamu membaca materi ini beberapa bulan kemudian, cek ulang versinya, dan baca dokumentasi yang ikut terpasang di node_modules/next/dist/docs/. Dokumentasi itu persis sesuai versi Next.js di proyekmu.