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 tambahkan folder dengan nama "detailProduk" lalu buat file html biasa dengan nama index.html.
import Head from 'next/head'
export const getStaticProps = async () => {
const res = await fetch('http://localhost:3004/detailStok');
const data = await res.json()
return {
props : { detailStok : data }
}
}
function handleSubmit(){
console.log('Ok');
}
const DetailStok = ({detailStok}) => {
return (
<div>
<Head>
<title>Detail Produk</title>
</Head>
<form action="" className="my-5 is-size-4 mobile pl-2 px-5">
<div className="my-5">
<label for="inputNama" className="label is-size-4 green">
Persediaan Barang</label>
</div>
<div className="control has-icons-left">
<input className="input is-large" placeholder="Cari Produk"/>
<span className="icon is-medium is-left">
<i className="fas fa-search"></i>
</span>
</div>
</form>
<div className="px-5 py-5 bg-pink">
<form className="px-5 is-justify-content-space-between is-flex is-
align-items-center">
<div className="is-flex is-align-items-center has-text-left">
<img className="image is-128x128" src="./image/cabai.jpg"/>
<div className="px-5">
<div className="is-size-5-mobile is-size-4-desktop">Cabai</div>
<div>Harga Jual</div>
<div className="is-size-5-mobile is-size-4-desktop green">Rp. 600
/Ons</div>
</div>
</div>
<div>
<button className="button white bg-green">Detail Stok</button>
<div className="red">Stok : 50 Ons</div>
</div>
</form>
<br/>
<div className="block mx-1 tp-border"></div>
<form className="px-5 is-justify-content-space-between is-flex is-align
-items-center">
<div className="is-flex is-align-items-center has-text-left">
<img className="image is-128x128" src="./image/tomat.jpg"/>
<div className="px-5">
<div className="is-size-5">Tomat</div>
<div>Harga Jual</div>
<div className="is-size-5 green">Rp. 10.000 /Kg</div>
</div>
</div>
<div>
<button className="button white bg-green">Detail Stok</button>
<div className="red">Stok : 2 Kg</div>
</div>
</form>
<br/>
<div className="block mx-1 tp-border"></div>
<form className="px-5 is-justify-content-space-between is-flex is-align-
items-center">
<div className="is-flex is-align-items-center has-text-left">
<img className="image is-128x128" src="./image/daging_ayam.jpg"/>
<div className="px-5">
<div className="is-size-5">Daging Ayam</div>
<div>Harga Jual</div>
<div className="is-size-5 green">Rp. 10.000 /Ons</div>
</div>
</div>
<div>
<button className="button white bg-green">Detail Stok</button>
<div className="red">Stok : 50 Kg</div>
</div>
</form>
</div>
<div className="buttons is-right px-5 my-3">
<button className="button control has-icons-right is-size-3 is-ghost">
<span className="icon is-large black">
<button className="button is-rounded bg-red white is-small">Atur Stok
</button>
</span>
</button>
</div>
<div className="box is-size-5 mx-5 red bg-gray">Detail Stok : Cabai
</div>
<div className="hscroll">
<table className="table">
<thead>
<tr>
<td className="white">Tanggal</td>
<td className="white">Catatan</td>
<td className="white">Masuk</td>
<td className="white">Keluar</td>
<td className="white">Unit</td>
<td className="white">Harga</td>
<td className="white">Jumlah</td>
</tr>
</thead>
<tbody>
{
detailStok.map(x => (
<tr key={x.id}>
<td>{x.date}</td>
<td>{x.catatan}</td>
<td>{x.masuk} <nbsp/> {x.satuanMasuk}</td>
<td>{x.keluar} <nbsp/> {x.satuanKeluar}</td>
<td>{x.unit} <nbsp/> {x.satuanUnit}</td>
<td>{x.harga}</td>
<td>{x.jumlah}</td>
</tr>
))
}
</tbody>
</table>
</div>
</div>
);
}
export default DetailStok;
Output
Komentar
Posting Komentar