- Full-Stack React Tech Stack untuk tahun 2025
- Memperkenalkan teknologi yang berguna untuk mengembangkan produk SaaS atau minimum viable product (MVP)
- Next.js: Framework berbasis React yang menyediakan berbagai fitur bawaan seperti routing dan caching, serta mendukung koneksi ke backend melalui fitur React terbaru seperti server components dan server functions
- Astro: Alat opsional untuk membuat landing page produk, digunakan untuk pembuatan landing page yang cepat dan meningkatkan pengalaman pengembang
- Server Components: Komponen yang berjalan di server sehingga memungkinkan akses ke database dan lainnya, serta merevolusi cara pengembangan aplikasi React full-stack
- Server Functions: Fitur yang memungkinkan kode sisi server dijalankan dari komponen React hanya dengan pemanggilan fungsi, sekaligus membuat API endpoint secara otomatis
- Server Actions: Subset dari server functions; ada library yang meningkatkan kegunaannya, tetapi juga bisa diimplementasikan langsung
- Tailwind CSS: Alat yang direkomendasikan untuk pengembangan produk yang cepat dan pemeliharaan CSS jangka panjang; setelah terbiasa, sulit kembali ke pendekatan CSS tradisional
- Shadcn UI: Library UI yang terintegrasi mulus dengan Tailwind CSS, menawarkan sistem tanpa versi dan menghadirkan pendekatan segar untuk pengelolaan UI
- Lucide React: Library ikon yang digunakan bersama Shadcn UI, dan kecil kemungkinan perlu diganti sampai ada alternatif lain yang lebih baik
- TypeScript: Standar industri untuk proyek JavaScript, berkontribusi pada peningkatan pengalaman pengembang, pengurangan bug, dan kemudahan pemeliharaan kode
- Zod: Library validasi yang cocok dengan TypeScript, terutama digunakan untuk validasi sisi server, sementara form di sisi klien memanfaatkan validasi HTML native untuk mengurangi kompleksitas
- nuqs: Alat untuk mengelola state URL secara type-safe di Next.js, seperti pencarian, pengurutan, dan pagination; pada framework lain bisa memakai fitur bawaan atau library lain
- Zustand: Alat opsional untuk manajemen state sisi klien, yang kini lebih jarang digunakan karena adanya state URL, caching data sisi klien, dan perkembangan aplikasi React yang semakin server-driven
- React Query: Alat opsional yang digunakan untuk data fetching sisi klien yang kompleks seperti infinite scroll; jika kompleksitas proyek rendah, server components saja sudah cukup
- Prisma (ORM): Pilihan ORM yang stabil; bisa diganti dengan Drizzle mengikuti tren terbaru, tetapi saat ini Prisma masih lebih disukai
- Supabase (database): Layanan yang menyediakan database Postgres; dipakai hanya sebagai database demi fleksibilitas, lalu dihubungkan dengan Prisma agar lebih mudah diganti ke database lain
- Lucia (autentikasi): Sudah tidak lagi dipelihara, tetapi digunakan sebagai materi pembelajaran untuk membangun sistem autentikasi dengan Oslo, Argon2, Arctic, dan lainnya, sehingga memungkinkan implementasi autentikasi kustom tanpa bergantung pada solusi pihak ketiga
- S3 (unggah file): Dengan memanfaatkan AWS S3, presigned URL, dan AWS IAM, dapat dibangun solusi penyimpanan file yang fleksibel dan murah; sebagian besar layanan pihak ketiga juga memakai API yang sama sehingga mudah mengganti penyedia bila diperlukan
- Inngest (queue): Alat yang digunakan untuk mengoordinasikan tugas kompleks di backend, cocok untuk pekerjaan latar belakang yang tidak sensitif terhadap waktu, serta menawarkan sistem antrean yang mudah diatur dan dipelihara
- React Email + Resend: Yang pertama memungkinkan pembuatan template email dengan komponen React, sedangkan yang kedua adalah solusi unggul untuk pengiriman email; beralih dari Postmark ke Resend dan memperoleh hasil yang memuaskan
- Vercel (hosting): Solusi hosting aplikasi full-stack yang telah digunakan selama bertahun-tahun; jika ingin self-hosting, direkomendasikan Hetzner/DigitalOcean dan Coolify
- CloudFlare (domain): Setelah berbagai pengalaman mengelola domain, saat ini digunakan dengan puas karena UI CloudFlare yang sangat baik dan fitur untuk menambahkan informasi ekstra pada DNS record
- Stripe (payment gateway): Payment gateway yang telah digunakan selama bertahun-tahun, menyediakan dokumentasi dan API yang sangat baik, tetapi dapat menjadi kompleks karena cakupan fitur dan API yang terus meluas
- Testing dan tools: Kombinasi React Testing Library dan Cypress/Playwright adalah pilihan yang baik; ESLint (ke depannya Biome) dan Prettier direkomendasikan. Untuk dokumentasi UI masih menggunakan Storybook, dan tsx digunakan untuk menjalankan TypeScript di terminal
1 komentar
Saya jadi tahu tentang nuqs, terima kasih.