Pengalaman Migrasi dari Next.js ke Nuxt.js

Nuxt js Logo

Hi teman-teman, kali ini aku mau nyoba sharing pandanganku tentang Nuxt.js yang cukup besar namanya dikalangan web developer khususnya Front End Engineer.

Apa sih Nuxt.js itu?

Photo by Émile Perron on Unsplash

Nuxt.js adalah sebuah framework untuk membangun Website Front End berbasis Vue js. Perbedaan antara Nuxt dengan Vue adalah cara dia rendering websitenya, kalau Nuxt di render dari server atau istilahnya SSR (Server Side Rendering) kalau Vue di render di browser user atau istilahnya CSR (Client Side Rendering).

Keunggulan Nuxt berdasarkan official websitenya adalah :

• Modular : Nuxt dibangun berdasarkan modular architecture yang powerful, lebih dari 50 modul telah disediakan oleh Nuxt untuk para developer agar tak kesusahan untuk menggunakannya.
• Performant: layaknya Vue yang terkenal lebih cepat dibandingkan kawan-kawannya, Nuxt pun disebutkan memiliki performansi yang lebih optimal dibandingkan framework SSR lainnya seperti Next.js dan Sapper.
• Enjoyable: fokus dari Nuxt ini ialah Developer Experience, dimana pengembang Nuxt ini memfokuskan untuk developer agar lebih nyaman dalam membangun aplikasinya.

Beberapa web yang sudah menggunakan Nuxt.js untuk sisi front endnya antara lain Gitlab, Lexar, dan Crowde.

Kenapa sih nyoba nyoba Nuxt?

Photo by Nicolas Thomas on Unsplash

Apasih yang bikin aku pingin nyoba Nuxt? Sebelumnya aku kurang lebih sudah satu setengah tahun berkutat dengan Next (SSR nya React.js), sudah ngerasa nyaman sih dengan Next cuma karena lama-lama muncul rasa bosan akhirnya aku explore framework lainnya yaitu Nuxt. Buat experimenku (klik disini), aku bikin suatu apps tentang resep-resep makanan yang aku dapatkan API nya dari spooncular.com dan API buat login (pemanis doang sih) dari jsonplaceholder. Just visit my Github here.

Hal yang ingin aku concern dari experiment ini bukan hanya sekedar consume API, tetapi ada hal lain yang belum dimiliki dari Next yaitu Middleware, Layout, Auth dan PWA. Selain itu pun ada yang bikin aku tertarik yaitu di modul Store dan Fetching Data yang cara penggunaannya berbeda dari framework lain.

Yang Aku Rasakan dari Nuxt Adalah …

Jadi dari experiment yang aku buat, aku pingin share pengalamanku dari modul Store, Middleware, vue-bootstrap, Axios, Routing, Layout dan nuxt.config.

• Store: yang aku rasakan dari store di Nuxt ini adalah sangat simple dan ga bikin bingung kayak Red*x, hehehe. Jadi di Nuxt ini sudah disediakan folder store buat naruh state managementnya. Di Nuxt pun kita tak dipaksa untuk bikin state management dalam satu file, tapi bisa kita buat sesuai kebutuhan dan nantinya akan digabungkan secara otomatis oleh Nuxt itu sendiri. Tiap file storenya itu memiliki initial state, mutation, getter dan actions.
• Middleware: kalau di framework lain, aku belum nemu framework yang menyediakan middleware dari sisi client, namun di Nuxt sudah disediakan. Middleware yang disini dapat diakses dari sisi server maupun client, sehingga kalau kita pingin buat modul authorization lebih mudah. Dan satu hal yang keren lainnya adalah middleware tak cuma untuk izin akses, namun bisa memberikan props untuk tujuan tertentu. Gokil!
• Vue-bootstrap: di Nuxt CLI menyediakan berbagai macam framework css seperti bootstrap, bulma, ant design dan vuetify. Jadi kita ga perlu repot-repot install secara manual buat framework css dan yang terakirrr adalah goodbye JQuery, wqwq.
• Axios : axios disini sebenernya sama aja sih sama axios diluar sana. Cuma cara menggunakannya yang berbeda dari yang lain. Yang biasanya kita pake dengan cara axios.get kalau di Nuxt axios bawaannya cara pakenya adalah this.$axios.$get karena axios sudah diimplement dari dalem. Di nuxt config pun kita bisa setting banyak hal secara global seperti baseUrl, header, token dll.
• Routing: routing disini sebenernya sama seperti framework ssr lainnya, yaitu berdasarkan nama file dan folder di folder Page. Kalau misalkan kita ada parameter yang mau dilempar, nama file harus diawali dengan underscore.
• Layout: di Nuxt sudah disediakan folder Layout yang tujuannya kita bisa membuat kerangka layout seperti navbar, content, sidebar, footer. Nah untuk contentnya dia yang dinamis sesuai halaman. Benefit dari layout ini adalah kita ga perlu copas struktur halaman disetiap halamannya dan kita pun bisa memberikan pengondisian cukup dari file layout yang akan terimplementasi di setiap halaman yang menggunakan layout tersebut.

Penilaian!

Jadi menurutku Nuxt ini dapet banget developer experience nya dan menurutku cocok untuk bikin project Front End dengan skala yang besar karena strukturnya lebih baku sehingga aman buat berbagai macam style developer. Kalau misalkan temen-temen backgroundnya fullstack dari Laravel, kalian akan tau mengapa Laravel menggandeng Vue. Menurutku pun ada beberapa hal dari Laravel yang diimplementasikan di Nuxt seperti layout dan middleware. Kalau dari sisi minus nya adalah kalau temen-temen backgroundnya dari React yang bisa YOLO pas ngoding, disini bakalan ngerasa lebih strict. Yang awalnya ngerasa HTML, CSS, JS bisa dibuat dalam satu function tapi kalau di Vue ga boleh. Tapi percayalah, peraturan itu dibuat dengan tujuan yang baik bukan untuk dilanggar :3. So, for me this one its so recommended to try!

A coding standard makes sure that all the developers working on the project are following certain specified guidelines. The code can be easily understood and proper consistency is maintained.

Thanks for visit and get in touch with me on Linkedin for futher sharing, see you!