Route/Rute dan Komponen Halaman pada Next.js

Belajar membuat Komponen Halaman Next.js serta memahami setiap Route dari masing-masing Komponen Halaman.

Route/Rute dan Komponen Halaman pada Next.js

Pada pembelajaran kali ini, penulis akan menunjukkan cara mengatur Halaman serta membahas Route pada Next.js. Sebelum melanjutkan, pastikan kalian telah membaca Bagian Pertama dari pembelajaran ini.

Seperti yang telah kita bahas pada bagian sebelumnya, kita telah memiliki folder bernama pages. Didalam folder itulah lokasi komponen halaman yang akan kita buat.


Membuat Komponen Next.js

Pada Next.js, setiap halaman dikendalikan oleh komponen React. Misalnya, jika kita memiliki halamantentang maka kita juga harus memiliki komponen tentang. Setiap komponen halaman juga memiliki filenya sendiri yang berada di dalam folder pages. Jadi, nama file dan lokasi dari setiap komponen halaman terikat dengan Route (Rute) untuk setiap halaman tertentu. 

Sekarang, bukalah VSCode dan buatlah satu file pada folder pages yang bernama tentang.js.

Nah, disini Next.js akan membuat Route secara otomatis yaitu /tentang untuk dapat menampilkan komponen. Jadi, didalam file tentang.js kita akan membuat komponen React.

Sebagai pengingat, Nama Route (yang akan terbuat secara otomatis) akan terikat dengan nama file yang kita buat. Contoh, jika kita membuat file bernama kontak.js, maka Next.js akan membuat Route/kontak.

Terdapat satu pengecualian mengenai Route yaitu pada file index.js. Disini, Next.js tidak akan membuat Route/index melainkan hanya/. Jadi, kita hanya perlu membuka Domain utama untuk melihat komponen halaman index.js.

Kembali ke filetentang.js yang telah kita buat sebelumnya. Disini kita akan membuat Stateless Functional Component (SFC) dengan memasukkan kode berikut kedalam filetentang.js:


const Tentang = () => {
    return (
        <main>
            <h1>Tentang</h1>
            <p>Ini adalah halaman tentang.</p>
        </main>
     );
}
 
export default Tentang;

Sekarang, didalam folderpages, kita telah memiliki dua buah file yaitu index.js dan tentang.js. Selanjutnya, bukalah URL http://localhost:3000/tentang maka kita akan melihat komponen halaman Tentang. Menarik bukan?

Membuat Komponen Next.js

Catatan: Jika tidak ada respon dari URL http://localhost:3000/tentang, maka kalian harus menjalankan Local Development Server seperti yang telah kita bahas pada Bagian Pertama. 

Membuat Sub-Folder Komponen Next.js

Selain membuat file didalam folder pages, kita juga dapat membuat Sub-Folder didalamnya. Dan juga, kita dapat membuat komponen baru didalam Sub-Folder tersebut.

Mari kita ulas lebih lanjut. Buatlah sebuah folder bernama postingan didalam folderpages. Lalu buatlah sebuah file bernamates.js didalam folder postingan.

Membuat Sub-Folder Komponen Next.js

Masukkan kode berikut kedalam file tes.js:


const Tes = () => {
    return (
        <main>
            <h1>Tes</h1>
            <p>Ini adalah halaman tes.</p>
        </main>
     );
}
 
export default Tes;

Sekarang, bisakah kalian membayangkan Route untuk komponen halaman tes.js diatas? Jadi, Route dari tes.js bukanlah /tes itu karena kita telah membuat Sub-Folder bernamapostingan

Ketika kita memiliki Sub-Folder, maka Next.js akan membuat Route berdasarkan nama dari Sub-Folder tersebut. Jadi dalam hal ini, Route untuk komponen halamantes.js adalah /postingan/tes. Mudah bukan?

tes.js

Membuat Komponen Halaman Baru

Terakhir, buatlah sebuah file bernama index.js didalam folder postingan sebagai halaman utama (Homepage) dari Sub-Folder postingan dan masukkan kode berikut kedalamnya:


const Postingan = () => {
    return (
        <main>
            <h1>Semua Postingan</h1>
            <p>Ini adalah halaman utama postingan.</p>
        </main>
     );
}
 
export default Postingan;

Sudah bisa ditebak Route dari file index.js diatas. Disini, Route dari fileindex.js berperilaku sama seperti fileindex.js yang ada didalam folderpages - yaitu sebagai halaman utama. Jadi, Route dari komponen halaman index.js yang ada didalam Sub-Folder postingan adalah /postingan.

Sampai disini penulis berharap kalian dapat memahaminya dengan mudah.

Kalian dapat melihat Source Code yang telah kita pelajari dari bagian ini pada Branch Bagian-2 Repository GitHub.

Jika artikel ini bermanfaat, silahkan bagikan kepada teman-teman atau saudara kalian. Jika kalian memiliki pertanyaan, silahkan tulis pada kolom komentar. Terimakasih telah berkunjung di EL Creative Academy.

Diskusikan

0 Diskusi