Framework adalah sebuah tools dalam dunia pemrograman yang menyediakan komponen dan kemudahan untuk proses development. Framework biasanya memberikan banyak pilihan library yang ditentukan oleh prinsip Inversion of Control (IoC)[1] . Dalam penggunaannya, Framework berfungsi untuk membantu proses pengembangan, menyediakan layanan yang tingkatnya rendah, dan membantu menaikkan kualitas dari software yang dikembangkan[1]. Per tahun 2023, terdapat begitu banyak pilihan framework yang dilengkapi dengan fitur serta keunggulan masing-masing. Menurut data yang ada pada statista.com, salah satu framework yang paling populer adalah Next.js dengan persentase 16.67%.
Next.js adalah javascript open source framework buatan vercel yang dapat digunakan untuk mengembangkan aplikasi web menggunakan React dengan keunggulan pada server-side sehingga menjadi lebih nyaman dan mudah. Selain itu, Next.js juga memiliki banyak fitur dan keunggulan lain seperti static export, preview mode, pre-rendering, kompilasi yang lebih cepat, dan optimasi building size[2]. Berikut adalah beberapa fitur utama dari next.js:
- Pre-Rendering
Pre-Rendering merupakan salah satu fitur unggulan dari framework Next.js, dimana bagian code HTML yang ditampilkan akan diproses lebih awal sesuai konten yang dibutuhkan. Hal tersebut akan memberi peningkatan dari segi performa karena apabila user melakukan request untuk sebuah halaman, maka server akan memberikannya dengan lebih cepat.
- API Routes
Next.js memiliki in-built support untuk mendukung routes dari sebuah API. API Routes dapat dengan mudah diintegrasikan ke dalam sebiah project Next.js dengan direktori pages/api yang mirip seperti file based routing. Hal tersebut mempermudah developer untuk mengembangkan project yang dibuat, terutama dalam hal API.
- Development and Production Build System
Next.js telah memberikan kemudahan dan optimasi produksi dalam proses build system, sehingga developer dapat mempersingkat waktu serta biaya dalam pengembangannya. Hal ini lah yang membuat next.js banyak digunakan saat ini dan menjadi salah satu framework terpopuler saat ini.
Dari section sebelumnya, dapat dilihat bahwa next.js memiliki beberapa fitur unggulan yang dapat memudahkan developer dalam mengembangkan website atau aplikasinya. Berikut adalah beberapa perbandingan antara next.js dengan framework lain seperti vue dan angular, yang tentunya dapat dijadikan bahan pertimbangan dalam memilih framework di sebuah project. Aspek yang dibandingkan ialah simplicity, scalability, performance, third party integration, dan, cost yang dikeluarkan.
- Simplicity
Next.js: menggunakan React.js sebagai pondasi utama dalam frameworknya. Hal ini membuat Next.js lebih mudah digunakan karena konsepnya yang tak jauh berbeda dengan React.js. Dalam setup hanya memerlukan install, app dan routing sudah dipermudah dan component sudah menjadi server component sehingga dapat dirender dengan mudah.
Angular.js: Angular.js menggunakan sistem lama, sehingga butuh waktu lebih lama untuk developer pemula dalam mempelajari sistem tersebut yang mencakup controller, directives, dan services. Oleh karena itu, angular tidak terlalu disarankan untuk pemula.
Vue.js: Vue.js merupakan sebuah framework lightweight yang memakan resource lebih kecil. Vue.js juga memberikan keleluasan kepada developer untuk melakukan kustomisasi pada project yang dibuat, dikarenakan framework Vue.js bersifat lightweight.
- Scalability
Next.js: Next.js memberikan kebebasan kepada developernya untuk menentukan kapan akan melakukan page rendering pada setiap page di client, server, atau keduanya. Sifat page dan server yang dinamis dan mudah dimanipulasi membuat next.js mampu mengerjakan project project skala besar.
Angular.js: Angular.js lebih terarah ke project berbasis OOP yang membuatnya lebih termodularisasi dan mudah untuk dilakukan scaling. Angular.js juga termasuk ke dalam kategori framework lama, sehingga lebih banyak memiliki source dan juga tools yang bisa digunakan untuk melakukan scale ke project yang sedang dikerjakan.
Vue.js: Vue adalah scaling solutions untuk framework Vue.js. Vuex memiliki efficient routine dan juga mendukung Vue.js dalam melakukan scaling aplikasinya[6]. Sistem dari vuex(sekarang pinia)[10] memperbolehkan vue.js untuk mengerjakan project project besar secara efektif dan efisien dengan state management. Selain itu vue,js membantu melakukan component-based architecture yang membuat mudah scalability sebuah project
- Performance
Next.js: Next.js menawarkan performa dengan fleksibilitas yang tinggi, dikarenakan destinasinya yang bersifat statis dan server-side rendering. Next.js juga SEO-friendly framework, yang membuat website yang dibangun dengan framework Next.js lebih mudah teridentifikasi di Internet dan database search engine.
Angular.js: Angular.js memiliki performa yang lebih rendah dari Next.js karena framework Angular.js tidak memiliki server side rendering dan static site generation. Angular.js juga harus mengirimkan HTML setiap kali, dan membuatnya memakan waktu lebih banyak saat runtime.
Vue.js: Vue.js menggunakan virtual DOM, dimana framework Vue.js akan mengotomatisasi rendering untuk HTML pages. Vue.js juga melakukan tracking terhadap komponen-komponen yang telah dibuat, sehingga website yang dibuat akan berjalan lebih cepat. Hal ini disebabkan karena framework Vue.js tidak memerlukan perintah tambahan untuk komponen-komponen yang telah dibuat apabila nantinya ada perubahan terhadap komponen-komponen tersebut (dikarenakan di React.js setiap komponen perlu diidentifikasi terlebih dahulu dengan perintah shouldComponentUpdate dan PureComponent apabila ada perubahan)[6].
- Third Party Integration
Next.js: Next.js memiliki serverless function bernamakan Edge Runtime yang dapat digunakan untuk mengakses Node.js API dengan lebih cepat dengan cara mengeksekusi function tersebut pada edge (lebih dekat dengan user). Walaupun resource yang dapat digunakan untuk Edge Runtime terbilang terbatas, hal ini dapat meningkatkan kecepatan akses ke Node.js API.
Angular.js: Angular.js memiliki fitur seperti Depedency Injection dan Observables yang membuatnya lebih mudah dalam melakukan handling saat integrasi dengan Third Party. Baik secara maintainability dan juga handle data yang dikembalikan dari API. Angular.js juga lebih fleksibel dan lebih mature secara framework sehingga memiliki banyak resource yang bisa digunakan.
Vue.js: Karena sifatnya yang memakan resource sedikit dan lebih terfokus pada kustomisasi, Vue.js lebih versatile dalam melakukan Third Party Integration. Dan juga Vue.js memiliki built-in feature untuk melakukan integration, sehingga memudahkan proses integrasi[7].
- Cost
Next.js: Cost yang diperlukan untuk menjalankan website yang menggunakan framework Next.js terbilang tinggi, dikarenakan membutuhkan resource yang besar di server dan hosting sebagai tempat hasil rendering setiap kali user melakukan akses terhadap website. Hal ini disebabkan juga oleh sifat dari Next.js yang perlu melakukan rendering semua pages yang dimiliki oleh web app menjadi statis sebelum dapat diakses oleh user, agar dapat memberikan performa yang tinggi nantinya setelah proses rendering selesai.
Angular.js: Angular merupakan framework yang termasuk kuno, ia menggunakan two way data binding system, hal ini menyebabkan cost yang digunakan bisa lebih banyak dari framework modern seperti vue dan next.js Selain itu dikarenakan sistem yang lama ini ia tidak diupdate dan termasuk kaku, developer perlu belajar lebih lanjut dan menggunakan resource lebih untuk mengoptimalkan framework ini.
Vue.js: Sama seperti react.js vue.js digunakan untuk UI, memiliki built-in client-side rendering sehingga resource dan cost ditangani oleh client.
Setiap framework pasti memiliki arsitektur dalam penggunaannya, berikut adalah ilustrasi arsitektur dari next.js:
Top-level folders
- app — App Router: Folder ini biasanya berisi kode yang mengatur pengaturan dan logika utama software dan website. folder ini akan mencakup konfigurasi server, middleware, dan pengaturan umum lainnya. App router dapat mengarahkan permintaan HTTP ke berbagai bagian aplikasi berdasarkan rute atau URL yang diminta.
- pages — Pages Router: Folder ini sering digunakan dalam kerangka kerja framework pengembangan web, termasuk Next.js. Bagian pages diisi oleh komponen atau tampilan berbasis rute yang akan ditampilkan oleh aplikasi atau website. Setiap file yang ada dalam folder pages akan menjadi url saat website telah dijalankan.
- public — Static assets to be served: Folder ini berfungsi sebagai lokasi untuk menyimpan file statis yang akan ditampilkan secara langsung oleh server web. file yang bersifat statis seperti gambar, CSS, JavaScript, dan hal tersebut berguna untuk mengoptimalkan kinerja aplikasi dan mempercepat waktu pemuatan halaman.
- src — Optional application source folder: Folder ini bersifat opsional untuk menyimpan source code dari aplikasi atau website yang dibuat. Beberapa dalam pengembangan aplikasi. Folder src dapat diisi sesuai dengan preferensi dan kebutuhan dari developer.
Top-Level Files
- next.config.js — File kongfigurasi untuk next.js
- package.json — Dependencies dan scripts dari sebuah project
- instrumentation.ts — File opentelemetry dan instrumentasi
- middleware.ts — Middleware yang akan digunakan dalam project
- .env — Enviroment variables dalam project (universal)
- .env.local — Enviroment variables dalam project (local)
- .env.production — Enviroment variables dalam project (production)
- .env.development — Enviroment variables dalam project (development)
- .eslintrc.json — File kongfigurasi untuk ESLint
- .gitignore — File untuk mengabaikan bagian tertentu saat proses commit
- next-env.d.ts — Deklarasi typescript file untuk next.js
- tsconfig.json — File kongfigurasi untuk TypeScript
- jsconfig.json — File kongfigurasi untuk javascript
- postcss.config.js — File kongfigurasi untuk tailwind CSS
Setelah membahas terkait keunikan dari nextjs beserta ilustrasi dari arsitekturnya, berikut adalah contoh source code sederhana dari nextjs:
- Getting Started
npx create-next-app@latestCommand tersebut dapat digunakan untuk memulai sebuah project menggunakan next. Dengan menjalankan command tersebut di terminal, struktur folder dan file-file penting akan secara otomatis dibuat
- Project Structure
Setelah project berhasil dibuat, maka struktur folder akan secara otomatis menyesuaikan sesuai gambar diatas. Project dapat dilakukan dengan menambah source code, dependencies, folder, dan lain sebagainya.
- Basic Source Code:
Untuk melakukan test pada project yang sedang dibuat, dapat dilakukan dengan merubah file pages.tsx pada folder src/app. Berikut adalah contoh code yang dapat digunakan:
export default function Page() {
return(
<h1>Hello, Home page!</h1>
)
}Dan berikut adalah hasil dari code tersebut apabila dibuka pada browser:
- Basic Routing:
Seperti yang telah dijelaskan pada section sebelumnya, framework next.js menggunakan folder based routing, dimana URL yang ada pada browser dapat mengikuti struktur folder. Berikut adalah contoh routing menggunakan next.js dimana terdapat file pages pada folder about/bryan yang ada didalam direktori src/app.
File page.tsx pada folder /about/bryan dapat diisi dengan code berikut sebagai contoh:
export default function Page() {
return (
<p className="text-center">Hello, I'm Bryan!</p>
)
}Berikut adalah hasil apabila project tersebut dijalankan pada browser dengan url /about/bryan.
Setelah berhasil membuat project sederhana, berikut adalah beberapa referensi tambahan beserta tutorial untuk membuat project dengan skala yang lebih besar:
Referensi yang digunakan dalam pembuatan artikel:
[1] https://www.netsolutions.com/insights/what-is-a-framework-in-programming/
[2] https://radixweb.com/blog/nextjs-vs-react
[4] https://www.altexsoft.com/blog/engineering/pros-and-cons-of-vue-js/
[5] https://marketsplash.com/tutorials/vue-js/next-js-vs-vue/
[6] https://jelvix.com/blog/js-frameworks-is-vuejs-better-than-react
[7] https://www.roro.io/post/next-js-vs-vue-js-the-ultimate-showdown