Saya Pindah dari PHP ke Next.js. 3 Hal Ini Mengubah Total Cara Saya Mengelola Website.

 

Mengelola website PHP sederhana di hosting tradisional sering kali terasa merepotkan, terutama saat harus melakukan pembaruan. Prosesnya sering melibatkan login ke cPanel, mencari menu yang tepat, dan menarik perubahan secara manual. Saya baru saja memigrasikan website pribadi saya ke tumpukan teknologi yang lebih modern menggunakan Next.js, dan dalam prosesnya, saya menemukan tiga hal yang secara fundamental mengubah alur kerja saya menjadi jauh lebih efisien dan modern.

Alur Kerja Deployment dari "Ribet" Menjadi "Otomatis"

Alur Kerja Lama (PHP + cPanel)

Sebelumnya, setiap kali saya perlu memperbarui konten, seperti kode kupon di website saya, prosesnya cukup panjang dan manual. Saya harus mengedit kode secara lokal, melakukan push perubahan ke repositori GitHub, lalu login ke cPanel hosting saya. Dari sana, saya harus menavigasi ke menu 'Git Version Control' dan menekan tombol 'Update from remote' untuk menarik perubahan terbaru dari GitHub agar tampil di website. Proses ini, meskipun berfungsi, terasa memakan waktu karena melibatkan banyak langkah.

Alur Kerja Baru (Next.js + Vercel)

Dengan beralih ke Next.js dan mendeploynya di Vercel, alur kerja saya menjadi sangat ringkas. Sekarang, prosesnya hanya terdiri dari dua langkah utama: mengedit kode di komputer lokal, kemudian menjalankan perintah git add, git commit, dan git push ke GitHub.

Setelah itu, Vercel secara otomatis mendeteksi adanya push baru ke repositori, lalu langsung memulai proses build dan deploy. Untuk membuktikannya, saya melakukan perubahan sederhana: memindahkan posisi komponen 'Tentang Saya'. Setelah menggeser satu baris kode di editor lokal, saya hanya perlu menjalankan git push. Vercel langsung mendeteksinya, memulai proses build, dan dalam beberapa saat, perubahan tersebut sudah tayang di domain dirumahrafif.id tanpa saya perlu login ke platform manapun. Inilah kekuatan sebenarnya dari alur kerja modern.

Refleksi

Intinya, proses yang tadinya membutuhkan beberapa langkah manual—mulai dari edit, push ke Git, login ke cPanel, hingga menarik pembaruan—sekarang diringkas menjadi satu perintah sederhana: git push. Sisanya berjalan otomatis.

Menghemat Biaya Hosting Tahunan Secara Signifikan

Analisis Biaya

Dengan hosting PHP tradisional, saya harus membayar biaya sewa tahunan hanya untuk menayangkan sebuah website statis yang kontennya tidak terlalu banyak. Meskipun biayanya mungkin tidak terlalu besar, ini adalah pengeluaran rutin yang sebenarnya bisa dioptimalkan, terutama untuk proyek pribadi yang tidak menghasilkan pendapatan langsung.

Solusi Hemat Biaya

Migrasi ke Next.js dan Vercel memberikan keuntungan finansial yang signifikan. Untuk kasus penggunaan seperti website pribadi saya, saya dapat melakukan deploy proyek di Vercel secara gratis. Ini dimungkinkan karena Vercel menawarkan free tier yang sangat memadai untuk proyek pribadi dan situs statis, yang tidak memerlukan sumber daya server yang besar. Satu-satunya biaya yang tersisa hanyalah biaya perpanjangan domain (dirumahrafif.id) setiap tahunnya.

Perubahan Cara Berpikir: Dari Halaman Monolitik ke Komponen Fleksibel

Konsep Komponen

Salah satu perubahan paling mendasar adalah cara saya menstrukturkan kode. Di Next.js, kita berpikir dalam "komponen". Seluruh halaman web dipecah menjadi bagian-bagian kecil yang independen dan dapat digunakan kembali, seperti Header, Footer, PremiumCourse, Statistic, dan AboutMe.

Fleksibilitas ini sangat terasa. Sebagai contoh, jika saya ingin mengubah tata letak halaman, saya tidak perlu melakukan copy-paste blok HTML yang besar. Saya cukup mengubah urutan pemanggilan komponen di dalam file utama page.js, dan strukturnya akan langsung berubah.

Routing yang Intuitif

Next.js juga menyederhanakan cara kerja routing. Routing di Next.js berbasis pada struktur direktori, yang terasa jauh lebih intuitif.

• Membuat folder bernama course di dalam direktori app akan secara otomatis membuat rute /course.
• File bernama page.js di dalam folder tersebut akan menjadi halaman utama untuk rute itu.
• Untuk halaman dinamis, seperti menampilkan detail kursus yang berbeda, kita bisa menggunakan dynamic routing. Cukup buat folder dengan nama yang diapit kurung siku, seperti [id]. Folder ini dapat menangani rute seperti /course/laravel dan /course/bootstrap secara efisien hanya dengan satu file.

Ini sangat kontras dengan pendekatan PHP tradisional saya, di mana rute seperti /course/laravel dan /course/bootstrap sering kali memerlukan logika kondisional di dalam satu file atau konfigurasi server manual untuk mengarahkan permintaan dengan benar.

Kesimpulan

Migrasi dari PHP ke Next.js bukan hanya sekadar perubahan teknologi, tetapi juga peningkatan fundamental pada alur kerja. Tiga keuntungan utama yang saya rasakan adalah alur kerja deployment yang jauh lebih efisien, penghematan biaya hosting tahunan, dan adopsi pendekatan pengembangan berbasis komponen yang lebih modern dan fleksibel. Perubahan ini telah membuat pengelolaan proyek pribadi saya bukan hanya lebih efisien, tetapi juga jauh lebih menyenangkan dan produktif. Ini bukan sekadar upgrade teknologi, tapi juga investasi dalam pembelajaran dan modernisasi alur kerja.

Setelah melihat perubahan ini, apakah sudah waktunya Anda mempertimbangkan untuk memodernisasi alur kerja proyek pribadi Anda?