File Structure and Page-based Routing in NextJS - Chapter 1 (Bahasa Indonesia)

Thanks for reading.. Ini adalah chapter 1 dari pembahasan Next js as your Web Development Framework. Jika kamu beum membaca chapter sebelumnya silahkan kunjungi artkel tersebut pada link dibawah. Ok, mari kita lanjutkan

Sebelumnya kita sudah menginstall dan setup folder kerja awal Next js. Seharusnya kita sudah memiliki folder dengan beberapa file yang menjadi template awal dari Next js. let's make it simple, kita akan buang beberapa file supaya lebih rapih dan memudahkan kita mengorganisasikan file-file tersebut selama pengembangan. Then, kita akan punya folder kerja baru dengan struktur seperti beriku:

Node_Modules Berisi segala file package yang kita install di folder workplace kita secara lokal

pages pages menampung file Javascript atau Typescript yang digunakan Next js sebagai React Component dan terasosiasi dengan page route sesuai dengan nama file tersebut.

public public adalah folder yang digunakan untuk menyimpan segala asset bersifat public seperti: image, public data, icon, dsb.

styles styles adalah folder yang akan kita gunakan untuk menyimpan asset css bagi react component yang kita buat

next.config.js, jsconfig.json, dan config file lainnya file-fila tipe ini kita gunakan untuk mengkonfigurasi preferensi aplikasi Nextjs

Di Nextjs, file page berperan sebagai page routing yang diasosiasikan oleh nama dari file tersebut. Nantinya user dapat mengakses halaman web aplikasi kita dengan menuliskan path sesuai dengan struktur pages ini.

Let's say kita punya satu file pages/hello.js , kemudian kita buat React Component seperti dibawah ini, halaman ini akan dapat diakses melalui path ' /hello '. Pastikan kita sudah menjalankan server dengan command 'next dev' atau 'npm run dev'

sistem seperti ini yang membuat proses development di Nextjs menjadi lebih mudah dan sederhana.

Kita tahu bahwa setiap file yang ada di dalam folder pages akan tersedia untuk diakses sesuai dengan path yang dituju. Di poin ini, kita akan mencoba memahami apa itu Nested Routing dan bagaimana cara kerjanya.

Di dalam folder pages kita juga dapat menambahkan sebuah folder yang berperan sebagai routes, inilah yang disebut dengan Nested Routing. Anggaplah kita ingin membuat sebuah halaman blog post yang dikelompokkan dalam sebuah folder. Kita bisa capai tujuan ini dengan cara membuat sebuah folder bernama blog dengan file article1.js, article2.js, dan seterusnya di dalam folder tersebut. Kurang lebih strukturnya seperti ini:

Dengan struktur file seperti diatas kita bisa mengakses halaman article1 melalui path ' /blog/article1 ' dan halaman article2 melalui path ' /blog/article2 '.

Namun, ketika ketika mengakses path ' /blog ', hasilnya akan error. Hal ini terjadi karena kita tidak memiliki file index.js yang merepresentasikan halaman blog. Sehingga kita perlu menambahkan file tersebut di dalam folder blog jika kita ingin mengaksesnya.

Ketika sudah ditambahkan, kita bisa akses homepage melalui path ' /blog '

Di point sebelumnya, kita sudah bisa akses halaman berdasarkan path yang terasosiasi dengan page route. Nah, bagaimana jika kita punya halaman blog, apakah kita harus membuat setiap file js yang berisi konten artikel blog tersebut? apakah jika kita punya 100 blog kita harus membuat 100 file berbeda? Nah, disini Dynamic Page Routing punya peran istimewa.

Dynamic Page Routing memungkinkan kita mengakses beberapa halaman berbeda sesuai dengan parameter yang diinginkan dalam satu file saja. Konsep ini cocok diaplikasikan pada halaman-halaman yang spesifik dan dinamis seperti post article blog dan halaman produk pada e-commerce.

Untuk menggunakan fitur ini, kita dapat membuat file pada folder pages pages/blog/[id].js. Penulisan tanda '[ ]' pada file [id].js akan memberi tahu Nextjs bahwa file ini bersifat dinamis, sehingga Dynamic Route dapat diaplikasikan. Kita bisa akses halaman ini melalui path ' /blog/[parameter] ' . Parameter bisa berupa apapun sesuai dengan apa yang ingin ditunjukkan pada halaman ini.

Dynamic Route juga dapat diaplikasikan terhadap sebuah folder dengan menuliskan notasi ' [parameter] ' pada nama foldernya. Hal ini berguna jika kita ingin menampilkan halaman berbeda namun masih didalam group folder yang sama. Sebagai contoh ketika ingin menampilkan halaman sebuah produk berdasarkan id dari produk tertentu. Kita bisa mencapai tujuan tersebut dengan membuat folder bernama [productId] dengan file index.js didalamnya. Kemudian kita bisa akses halaman ini pada path ' /product/[productId] '

Dengan struktur seperti ini, kita bisa menambahkan beberapa halaman yang terasosiasi pada productId yang ingin ditampilkan, contohnya halaman deskripsi, review, atau rating.

Pada pembahasan Nested Routing, kita bisa membuat sebuah halaman yang dinamis sesuai dengan struktur file yang kita buat. Namun ada beberapa hal yang dapat menjadi hambatan jika struktur file tidak pasti atau bersifat dinamis.

Dalam kasus sebuah halaman dokumentasi, mungkin saja setiap dokumentasi memiliki beberapa chapter, dan di setiap chapter mungkin akan memiliki beberapa pembahasan concept ataupun tidak, bahkan di setiap concept mungkin memiliki beberapa poin pembahasan lainnya. Karena sifat dinamisnya ini, kita akan kesulitan menyusun struktur file untuk mencapai tujuan tersebut. Disinilah Catch All Routing dapat menjadi sebuah solusi.

Kita hanya perlu menuliskan notasi ' [...params] ' pada sebuah file. Dengan notasi ini, file tersebut akan menangkap seluruh routes pada path yang terasosiasi pada file tersebut. Supaya lebih jelas, coba lihat ilustrasi berikut:

Seperti yang dilihat pada console, semua parameter secara otomatis ditangkap oleh variabel params. sehingga variabel ini nantinya dapat dimanipulasi sesuai dengan keinginan kita.

Seperti masalah sebelumnya, kita juga tidak bisa mengakses halaman index pada folder docs. Daripada kita menambahkan file index.js seperti sebelumnya, lebih baik kita bungkus kembali nama file dengan notasi '[ ]' menjadi '[[...params]]', sehingga kita bisa akses index page dari folder docs tanpa error pada path ' /docs '

Satic Route dan Dynamic Route punya kegunaan dan manfaatnya masing-masing sesuai dengan struktur pages yang ingin kita bangun. Namun ada beberapa hal yang perlu diperhatikan.

Pastikan menambahkan file index.js jika ingin menampilkan sebuah index page.

Pastikan penamaan React Component di-export sebagai default dan memiliki nama berawalan huruf kapital, agar NextJS mendeteksi bahwa file tersebut merupakan component yang siap di render sepagai page.

Pastikan component mengembalikan sebuah markup HTML supaya dapat ditampilkan sebagai sebuah page

That's it, selamat sudah setidaknya memahami konsep dasar Pages dan Routing yang berlaku di NextJS. Di chapter selanjutnya, kita akan bahas bagaimana melakukan navigasi secara terprogram untuk mengakses antar halaman.