Alasan Memilih Next.js
/ ~4 menit membaca / mencoba menjawab pertanyaan diri sendiri
Daftar Konten
Singkat
Karena Next.js berbasis React dan fiturnya keren-keren. Sudah.
Jawaban sesingkat itu kurang menjawab dan menggambarkan pertanyaan 'kenapa memilih Next.js?', berikut adalah jawaban panjang lebarnya.
Panjang Lebar
Next.js sendiri adalah salah satu framework Reactjs yang ditemukan dan dikembangkan oleh Vercel (sebelumnya bernama Zeit) yang menawarkan pengalaman website dengan metode seperti Serverless, SSR, SSG, dan yang terbaru adalah ISR (Incremental Static Generation) dalam satu proyek.
Selain itu juga terdapat fitur Fast Refresh yang memungkinkan kita untuk mengubah kode tanpa harus full refresh halaman browser. Bagi anda yang lebih suka menggunakan TypeScript disamping JavaScript? Next.js sangat bisa dengan hanya mengganti ekstensi menjadi .tsx anda akan diarahkan untuk menginstall dependency terkait.
Next.js mendukung banyak pustaka dan juga sudah disediakan contoh-contoh implementasinya, seperti contoh implementasi Next.js dengan Tailwindcss examples/with-tailwindcss. Pada update terbarunya Next.js meluncurkan template resmi untuk membuat sebuah website E-commerce yang siap dimodifikasi lalu di luncurkan. Demo-nya bisa lihat di demo.vercel.store.
Sesuatu Yang Kurang
Dari semua yang saya jabarkan sebelumnya masih ada yang kurang dari Next.js yaitu optimasi gambar, karena hampir semua website biasanya akan menampilkan suatu gambar yang dimana jika gambar itu tidak dioptimasi maka akan mempengaruhi performa website tersebut. Contoh kasus dalam hal ini adalah kawari.space yang awalnya menampilkan gambar seperti biasa tanpa CDN atau pustaka apapun; karena dirasa terlalu berat dan dapat membebani kinerja website apalagi pada internet yang lambat maka saya coba tampilkan melalui CDN yang disediakan gratis oleh statically.io dan ditampilkan dalam bentuk yang sudah webp, tentu ini merupakan sebuah perkembangan karena secara signifikan mengurangi ukuran dari gambar tanpa mengurangi kualitasnya.
Seperti kabar yang beredar Next.js akan memiliki fitur untuk optimasi gambar pada versi yang ke 10 sekarang dan hasilnya sungguh diluar dugaan. Berikut adalah komparasi dari snapshot halaman /projects, terdapat perbedaan ukuran gambar dari yang tanpa dioptimasi, menggunakan CDN, dan implementasi fitur optimasi gambar dari Next.js.
Komparasi
1.Tanpa optimasi apapun
2.Menggunakan CDN dari statically.io
3.Menggunakan optimasi gambar dari Next.js next/image
Diluar dugaan, dengan versi terbaru (v.10) dari Next.js kita bisa banget mengoptimasi gambar dengan mudah dan cepat tanpa memerlukan CDN.
Jawaban
Ada banyak lagi fitur-fitur menarik lainnya yang hadir di Next.js versi 10, seperti: Next.js Analytics, Internationalized Routing, dan lain-lain. Selengkapnya bisa ditemukan di nextjs.org/blog/next-10.
Kurang lebih itulah jawaban dari 'alasan memilih Next.js'. Masih banyak fitur dari Next.js yang belum saya cicipi, tapi overall saya rasa Next.js sudah sangat komprehensif untuk kebutuhan front-end development.