Navbar. Cara Mengubah Struktur HTML Ke NextJS

 

Ketika kita ingin membuat website, terkadang website kita masih berbentuk struktur HTML polos biasa yang tidak tersentuh dengan framework apapun

Lalu kita ingin mengubahnya kedalam project NextJS agar segala fungsionalitas seperti routing dari halaman satu ke halaman lain bisa cepat. Atau kita ingin menghubungkan tampilan HTML tersebut dengan sistem backend yang sudah disediakan

Namun bagaimana caranya? Bagaimana mengubah susunan HTML menjadi struktur NextJS? 

Kali ini, saya akan menjelaskannya yang terdiri dari beberapa poin berikut

• Memindahkan Kode HTML Kedalam div Yang Dikembalikan Oleh Functional Component
• Membuat Struktur Folder
• Menyusun Props Yang Dibutuhkan
• Menggunakan Link
• Membuat Interface Dengan Typescript
• Menginstall package classname
• Menggunakan Component Menu Dan Mengexport Value Untuk Props

Jika komponen HTML kalian mempunyai style maka kita bisa menggunakan global CSS. Penjelesan tersebut juga pernah dibahas di blog ini

Baca Juga: Cara Menggunakan Global CSS dan Module CSS Untuk Memberikan Style Pada NextJS

Langkah Langkah

Memindahkan Kode HTML Kedalam div Yang Dikembalikan Oleh Functional Component

Misalnya saya mempunyai project HTML dengan tampilan navbar berikut

Dan Navbar ini memiliki kode html seperti berikut

Lalu kita akan membuat sebuah folder bernama components yang berisi beberapa folder dan file di dalamnya

Ini merupakan konsep/prinsip atomic design yang pernah kita terapkan dalam project React Native. Kalau kalian belum mengerti apa itu konsep/prinsip atomic habit kalian bisa membacanya disini

Membuat Struktur Folder

Buat folder components lalu buat folder organisms lalu di dalamnya buat folder bernama Navbar yang berisi file index.tsx

Isikan fle index.tsx dengan kode berikut

Kalian bisa menggunakan snipper untuk menggenerate kode diatas dengan cara mengetikan rfc

Lalu kita copykan section navbar ke dalam div yang dikembalikan pada function Navbar()

Sorry kalo kodenya banyak banget begitu yaa . Wkwkwkw

Namun tenang saja kita akan menyederhanakannya satu persatu

Coba amati. Mana kode yang bisa kita pisah, atau kita sendirikan menjadi komponen terpisah? Sepertinya list Home, Games, dan Reward ....., bisa kita pisah menjadi menu

List ini merupakan komponen menu yang ada dalam Navbar. Kita bisa memisahkan komponen tag ul ke dalam file lain. Kita akan menamakan komponen itu Menu.tsx

Menyusun Props Yang Dibutuhkan

Sekarang buat file Menu.tsx

Agar nama list dari navbar ini bisa dinamis maka kita bisa menggunakan props. Caranya dengan memasukkan parameter props pada function Menu() dan destructure props dengan nama props yang diinginkan, saya akan menggunakan title

Tidak hanya title kita juga perlu beberapa props yang lain untuk agar navbar kita bisa menerima props secara dinamis. Yaitu, href, dan isActive

Menggunakan Link

Nahhh karena kita sedang membuat Navbar maka kita memerlukan sebuah tool yang memungkinkan apabila sebuah komponen atau link ketika diklik akan pindah ke halaman yang lain

Betul!, kita sebenarnya sudah mempunyai tag a dimana kita juga bisa pindah halaman satu ke halaman lain akan tetapi tag a memiliki kekurangan dimana setiap kali kita mengkliknya ia akan mereload halaman, meskipun kita mengkliknya secara berulang ulang

Ini sangat menganggu performa web. Maka dari itu NextJS menyediakan sebuah library bernama  next/link dimana ketika kita ingin pindah ke sebuah halaman maka web kita tidak akan mereload halaman yang sama. Artinya NextJS akan menyimpan memori atau halaman/komponen yang sudah digunakan lalu akan menggunakannya lagi jika ada request ke halaman tersebut

Ini sangat bermanfaat karena ini akan meminimalisir memori yang digunakan

Bagaimana cara menggunakannya?

Kita harus mengimport Link dari next/link dengan cara memasukkan kode berikut

import Link from 'next/link'

Lalu kita terapkan dengan dengan cara memberikan href pada Link tersebut yang berisi href dari props kita

Membuat Interface Dengan Typescript

Setelah itu kita membuat interface dengan typescript agar props hanya menerima tipe data yang sudah ditentukan

Lalu kita ubah parameter menjadi kode berikut sehingga interface bisa dimanfaatkan oleh props

setelah itu kita harus mengolah class dalam tag a. Kalo kita amati tag a memiliki class bernama active yang berfungsi untuk menunjukan mana link yang aktif atau link yang menunjukan apakah kita sudah berada di halaman yang dituju

Menginstall package classname

Sayangnya, di file Menu.tsx tidak bisa membaca class tersebut, kita harus menginstall package yang lain bernama classname. Caranya dengan mengetikan perintah berikut

npm i classnames

Setelah itu kita gunakan classname ini dengan cara mengimportnya dan mengisikan variabel dengan object

import cx from 'classnames'

Lalu kita masukkan classTitle kedalam className yang ada di dalam tag a

Lalu kita coba component ini ke dalam file index.tsx. Jangan lupa untuk mengimport component Menu.tsx dengan perintah

Menggunakan Component Menu Dan Mengexport Value Untuk Props

import Menu from './Menu'

Dan kita bisa melihat hasil akhir file Menu.tsx seperti berikut

Kesimpulan

Hal yang harus diperhatikan adalah kita bisa memilah mana komponen yang bisa dipisahkan dan dikembalikan oleh function component. Karena Navbar memiliki link atau komponen yang berfungsi untuk pindah ke halaman tertentu maka kita harus menggunakan Link dari library next/link. 

Tak hanya itu kita juga harus memanfaatkan props yang dinamis dan tipe data yang sesuai. Dan perlu diingat bahwa karena di dalam function kita tidak bisa menggunakan class, maka dari itu kita harus menginstal package tersendiri yang bernama classname dan menginisiasikannya kedalam sebuah variabel dan mengisikannya pada sebuah props