Panduan Lengkap Membangun Backend Next.js 16 dengan Cloudflare R2 dan PostgreSQL
Dany Akmallun Ni'amMas-mas Jawa
Development
Halo semuanya! 👋
Ketika membangun aplikasi web modern berbasis Next.js 16 dan men-deploy-nya ke platform serverless seperti Vercel, salah satu tantangan terbesar yang sering dihadapi developer adalah pengelolaan media file (gambar/video) dan database relasional.
Banyak developer pemula mencoba menyimpan file hasil upload ke folder lokal /public/uploads. Hasilnya? Saat aplikasi di-redeploy, seluruh file yang baru saja diupload tiba-tiba hilang karena sifat filesystem serverless yang ephemeral (sementara).
Di artikel ini, saya akan membagikan tata cara lengkap arsitektur backend modern yang baru saja saya terapkan: Next.js 16 + Cloud PostgreSQL + Cloudflare R2 Object Storage + Better-Auth.
💡 Mengapa Memilih Cloudflare R2?
Mungkin Anda bertanya: "Kenapa tidak menggunakan AWS S3 atau database langsung?"
Zero Egress Fees (Bebas Biaya Bandwidth 100%):
Pada AWS S3, Anda dikenakan biaya setiap kali pengunjung mengunduh atau melihat gambar di website Anda (). Di Cloudflare R2, biaya bandwidth adalah .
Kapasitas Gratis Melimpah:
Cloudflare memberikan 10 GB penyimpanan gratis setiap bulan dan jutaan request gratis.
Kompatibel Penuh dengan S3 API:
Kita bisa menggunakan library standar @aws-sdk/client-s3 tanpa perlu library proprietary aneh-aneh.
Global Edge CDN:
Aset media otomatis didistribusikan melalui jaringan server Cloudflare di seluruh dunia dengan latensi sangat rendah.
🏛️ Arsitektur Sistem
Berikut adalah rancangan alur data yang kita bangun:
Frontend & Compute: Next.js 16 (App Router, Server Actions, API Routes) di Vercel.
Database Relasional: Cloud PostgreSQL menggunakan Drizzle ORM dan connection pooling @vercel/functions.
Media Object Storage: Cloudflare R2 untuk menyimpan cover artikel, galeri proyek, dan aset foto.
Autentikasi: Better-Auth dengan Role-Based Access Control (RBAC: Admin & Editor).
🚀 Langkah Demi Langkah Penerapan
Langkah 1: Membuat Bucket & API Token di Cloudflare R2
Buka dashboard Cloudflare > pilih menu R2 Object Storage.
Klik Create Bucket, beri nama bucket Anda (contoh: portfolio-blog), lalu pilih lokasi Asia-Pacific (APAC).
Masuk ke tab Settings bucket:
Pada bagian Public Development URL, klik Enable (Anda akan mendapatkan URL publik seperti https://pub-xxxxxx.r2.dev), atau hubungkan ke Custom Domain (misal: media.domainanda.com).
Buat API Token untuk autentikasi S3:
Klik R2 Overview > Manage R2 API Tokens > Create API Token.
Berikan izin: Object Read & Write.
Salin Access Key ID dan Secret Access Key.
Langkah 2: Konfigurasi Environment Variables
Tambahkan variabel kredensial berikut ke file .env.local dan di dashboard hosting Anda:
Reliabilitas Tinggi: Gambar portofolio dan blog tersimpan permanen di cloud dan tidak akan hilang saat redeploy.
Kinerja Maksimal: Gambar dimuat melalui Cloudflare Global CDN dengan waktu respon di bawah 50ms.
Biaya Rp 0: Menggunakan kuota gratis Cloudflare R2, PlanetScale PostgreSQL, dan Vercel secara optimal tanpa rasa takut akan tagihan tak terduga.
Semoga panduan ini bermanfaat bagi Anda yang sedang membangun sistem backend modern berbasis Next.js! Jangan ragu untuk bereksperimen dan menyesuaikan dengan kebutuhan proyek Anda. 🚀
React Native
Mengenal React Native dari sejarah, arsitektur teknis, hingga peran Expo Go dalam mempercepat pengembangan aplikasi mobile cross-platform.
