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
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
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