Pembuatan Fitur Belanja "Konversi" dengan Next JS

 

 

 

 

Apa itu Next.js?

Next.js adalah sebuah React framework yang dibuat untuk mengatasi masalah client-side rendering yang dimiliki React.

Sebuah halaman website yang dibuat menggunakan React ‘terasa ringan’ karena tampilan website sangat interaktif.

Selain itu, saat data berubah, React dengan efisien akan mengupdate bagian dari halaman website yang memang perlu diupdate tanpa perlu reload satu halaman penuh.

Untuk mendapatkan itu semua, client harus load semua file JavaScript sebelum konten halaman ditampilkan. Jika file JS cukup besar maka waktu yang dibutuhkan untuk load pertama kali juga menjadi lebih lama.

Masalah lain dari client-side rendering adalah SEO, ada kemungkinan web crawler berusaha mengindex halaman yang belum selesai dirender sepenuhnya (karena waktu load yang lama). Dan menganggap web tersebut blank.

Kedua masalah diatas dapat diselesaikan dengan teknik pre-rendering. Yaitu halaman HTML dan file JavaScript di generate sebelum dikirim ke client.

 

pertama kita buat folder dengan nama Belanja, lalu buat file dengan nama konversi.js untuk halaman Belanja.

import Head from 'next/head'

const Konversi = () => {

return (

<div>

<Head>

<title>Konversi</title>

</Head>

<div className="title is-size-5-mobile green pl-5 pt-5">

<p>Tambah Konversi Stok</p>

</div>

<form className="is-flex is-flex-direction-column form my-6 ">

<div className="masukan mb-2 px-5">

<label htmlFor="inputNama" className="label">Nama Barang</label>

<div className="select">

<select className="s">

<option>Cabai</option>

<option>Tomat</option>

<option>Daging Ayam</option>

</select>

</div>

</div>

<div className="masukan mb-2 px-5">

<label htmlFor="inputNama" className="label">Satuan Sebelumnya 

                </label>

<div className="select">

<select className="s">

<option>Kg</option>

<option>Ons</option>

<option>Ikat</option>

<option>Liter</option>

<option>Buah</option>

</select>

</div>

</div>

<div className="masukan mb-2 px-5">

<label htmlFor="inputNama" className="label">Konversi Ke Satuan

                 Baru</label>

<div className="select">

<select className="s">

<option>Kg</option>

<option>Ons</option>

<option>Ikat</option>

<option>Liter</option>

<option>Buah</option>

</select>

</div>

</div>

<div className="masukan my-2 px-5">

<div className="control">

<button className="button bg-green white is-rounded "  

                    type="submit">Simpan</button>

</div>

</div>

</form>

</div>

);

}

export default Konversi;

Output