Alasanku Memilih Next.js sebagai Framework Andalan

Pada tahun 2021 ini banyak sekali web framework berbasis React yang populer, salah satunya adalah Next.js yang menjadi framework andalanku. Yuk simak penjelasannya.

Farhan Rafly Fahrezi Saepulloh

04 March 2021

Image Cover

Pada tahun 2021 ini teknologi berkembang sangat pesat, salah satunya pada bidang Web Development. Di tahun ini banyak sekali web framework yang bisa digunakan oleh developer dan bersifat open source seperti Create React App, Next.js, Gatsby dan masih banyak lagi. Web framework tersebut memiliki segudang fitur dan berbagai macam kelebihan dalam memudahkan web developer dalam mengembangkan aplikasi berbasis web. Salah satunya adalah Next.js sebuah web framework yang berbasiskan react.

Next.js

Next.js merupakan web framework open source berbasiskan react yang memungkinan developer untuk membuat aplikasi web dengan menerapkan server side rendering dan melakukan generate static websites dengan mudah tanpa harus melakukan konfigurasi apapun (zero config). Next js juga memiliki segudang built in fitur yang semakin memudakan developer dalam mengembangkan aplikasi web.

Next.js sendiri sudah rilis semenjak tahun 2016 yang lalu tetapi versi stabilnya baru dirilis pada awal tahun 2021 ini, sehingga framework ini memiliki jam terbang yang cukup banyak dimana ini bisa menjadi salah satu tolak ukur bagus atau tidaknya sebuah framework.

Untuk informasi lengkapnya mengenai framework ini bisa di cek pada halaman officialnya yang bisa di akses pada laman Next.js by Vercel - The React Framework

Itulah sedikit pengenalan mengenai Next.js sekarang kembali ke topik utama yaitu alasanku memilih Next.js sebagai framework andalan, yuk simak artikelnya.


Popularity

Merujuk pada komunitas online untuk developer terbesar di dunia yaitu Stack Overflow, Next.js memiliki setidaknya 7000 lebih pertanyaan pada artikel ini diketik, dimana hal ini membuktikkan bahwa framework ini merupakan framework yang cukup populer.

next

Tingkat kepopuleran framework itu bisa dibilang cukup penting, karena dibalik kepopulerannya ada komunitas yang besar. Dengan adanya komunitas yang besar seperti ini maka dapat mempermudah developer lain yang sedang mencari sebuah solusi dari masalah yang sedang dihadapi.

Selain itu, besar nya sebuah komunitas juga bisa menjadi sebuah Social Proof yang membuktikan bahwa framework ini merupakan framework yang handal dan berkualitas.

Server Side Rendering (SSR)

Next.js merupakan framework yang menerapkan Server Side Rendering dalam mengolah berkas HTML nya dan hal ini bisa langsung didapatkan tanpa harus melakukan konfigurasi apapun sehingga Next.js disebut sebagai framework yang zero config atau zero configuration.

Server Side Rendering juga mempermudah para developer yang ingin membangun sebuah aplikasi web dan ingin meningkatkan Search Engine Optimization (SEO) dari website tersebut. Server Side Rendering cocok digunakan pada Blog, e-Commerce, Landing Page dan masih banyak lagi.

Selain itu SSR juga dapat meningkatkan performa dari suatu website. SSR melakukan render pada berkas HTML di server sehingga tidak membebankan proses tersebut pada user.

ssr-explanation

Server Side Rendering ini juga menjadi alasanku kenapa menjadikan Next.js sebagai framework andalan karena dapat meningkatkan performa dari aplikasi website itu sendiri dan jika membutuhkan SEO tinggal lakukan saja tanpa harus khawatir apakah website yang sudah dibuat akan terlihat oleh bot crawling atau tidak.

Data Fetching

Salah satu keunikan dan daya jual Next.js adalah pada data fetching nya. Framework ini memberikan banyak pilihan bagi para developer dalam melakukan data fetching. Ada 3 fungsi yang diberikan oleh Next.js dalam melakukan data fetching yaitu,

  1. getStaticProps (Static Generation) - Fetch data at build time.
  2. getStaticPaths (Static Generation) - Specify dynamic routes to pre-render pages based on data.
  3. getServerSideProps (Server-side Rendering) - Fetch data on each request.

Ke-3 fungsi tersebut sangat berguna dan memberikan keleluasaan bagi para developer dalam menentukan cara melakukan data fetching.

Contoh, ketika kita ingin membuat blog fungsi getStaticProps sangatlah berguna karena data blog kita akan di fetch ketika build time, sehingga akan mempercepat fetching data pada production karena data tersebut telah di fetching terlebih dahulu ketika build time.

Lalu jika ingin mengecek apakah user sudah log in atau belum fungsi getServerSideProps adalah fungsi yang tepat, karena akan melakukan fetching data setiap user mengakses halaman tersebut.

The Developer Experience

Pengalaman membangun aplikasi web menggunakan Next.js sedikit berbeda karena Next.js memberikan kemudahan dengan segudang fiturnya yang bermanfaat.

Salah satunya adalah ketika ingin membuat halaman beserta routenya, dengan Next.js hal itu bisa dilakukan semudah membuat file dengan nama route yang diingikan. Seperti dengan membuat file category.js otomatis route /category akan terbuat. Berbeda dengan Create React App dimana developer harus membuat routing sendiri.

Hal seperti ini juga dapat membantu ketika aplikasi web dikerjakan secara berkelompok, karena dengan adanya standar yang diberikan oleh Next.js menghasilkan keseragaman berpikir antar anggota. Contohnya ketika ingin membuat halaman dan routing pada Next.js itu sudah ada aturannya, yaitu membuat file didalam folder pages berbeda dengan Create React App yang memiliki banyak cara untuk membuat route dan itu akan sedikit sulit jika dikerjakan secara bersama - sama karena setiap anggota memiliki cara masing - masing dalam membuat route.

Used by Big Companies

Tahukah kalian bahwa Next.js telah digunakan oleh beberapa perusahaan besar seperti TikTok ? Yap, platform entertaiment tersebut menggunakan Next.js sebagai Framework untuk TikTok versi web. Selain TikTok juga masih banyak lagi seperti,

Ini membuktikan bahwa Next.js merupakan framework yang sudah Production Ready dimana perusahaan - perusahaan besar diatas berani menggunakan Next.js sebagai framework untuk aplikasi web mereka.

Selengkapnya bisa di cek pada laman Next.js Showcase


Kesimpulan

Next.js merupakan framework yang cukup handal pada saat ini dengan popularitasnya, performa dan data fetching yang unik. Next.js juga memberika banyak pilihan kepada developer untuk melakukan data fetching yang dimana ini sangat bermanfaat bagi aplikasi web. Meskipun sebenarnya semua kembali kepada kebutuhan masing - masing karena tentu Next.js memiliki kekurangan. Tidak semua kasus bisa diselesaikan menggunakan Framework Next.js tetapi kebanyakan kasus bisa diselesaikan menggunakan framework ini.

Sekian dari saya, semua hal diatas hanyalah pengalaman dan opini pribadi, jika ada salah kata atau kesalahan lainnya bisa kontak aku pada social media yang tertera pada bagian akhir artikel ini. Terimakasih.

Selamat bereksplorasi.

Catatan

Untuk penjelasan lengkapnya bisa di tonton di video ini.

Written by

@raflyfahrezi

Farhan Rafly Fahrezi Saepulloh

I'm a Frontend Web Developer at UNIKOM Codelabs and student of Universitas Komputer Indonesia majoring in Informatics Engineering. React enthusiast and it's frameworks.