Membangun Portfolio dengan Next.js 16, Drizzle ORM, dan TanStack

Ketika saya memutuskan untuk membangun ulang portfolio saya, saya ingin menggunakan stack terbaru yang paling relevan — bukan hanya untuk hasilnya, tapi juga sebagai pengalaman belajar.

Stack yang saya pilih: Next.js 16 dengan App Router, TypeScript, Tailwind CSS v4, Drizzle ORM yang terhubung ke Neon Postgres, TanStack Query untuk server state, TanStack Form untuk form, dan NextAuth v5 untuk panel admin.

Mengapa Next.js 16?

Next.js 16 membawa perubahan signifikan. Yang paling mencolok adalah penggantian middleware.ts dengan proxy.ts, yang sekarang berjalan di Node.js runtime alih-alih Edge. Ini membuatnya jauh lebih capable — kamu bisa memanggil database, menggunakan full Node.js API, dan menangani autentikasi dengan benar.

Turbopack kini menjadi bundler default, dan perbedaan kecepatan dev server langsung terasa. Cold start yang dulunya memakan beberapa detik kini terasa hampir instan.

Mengapa Drizzle ORM?

Saya sudah banyak menggunakan Prisma sebelumnya, tapi Drizzle menawarkan sesuatu yang berbeda: terasa lebih dekat ke SQL. Kamu menulis query yang benar-benar terlihat seperti SQL, yang berarti lebih sedikit kejutan dan kejelasan mental yang lebih baik tentang apa yang terjadi di level database.

Dikombinasikan dengan Neon serverless Postgres, setupnya sangat lean. Tidak ada connection pooling yang perlu dikelola, tidak ada persistent connection yang perlu dikhawatirkan.

Mengapa TanStack?

TanStack Query menangani semua server state di panel admin. Setiap mutasi — create, update, delete — secara otomatis menginvalidasi cache yang relevan dan mengambil data terbaru. Tidak diperlukan manajemen state manual.

TanStack Table menggerakkan semua tabel data admin dengan sorting dan filtering bawaan. TanStack Form menangani state form dengan validasi yang tepat via Zod.

Hasilnya adalah codebase di mana setiap library memiliki tanggung jawab yang jelas dan terfokus.

Dukungan Multibahasa

Mendukung Bahasa Inggris dan Indonesia sejak awal membutuhkan perencanaan yang matang. Saya memilih next-intl untuk routing dan string UI, sementara konten database menggunakan pola JSON field sederhana: { en: "...", id: "..." }. Satu schema, dua bahasa, tanpa duplikasi.

Yang Saya Pelajari

Membangun portfolio ini mengajarkan saya bahwa stack terbaik adalah yang setiap bagiannya punya alasan untuk ada. Tidak setiap proyek membutuhkan TanStack Virtual atau setup i18n penuh — tapi untuk portfolio yang ingin saya maintain dan kembangkan dari waktu ke waktu, tools ini memberikan manfaat jangka panjang.