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.
Fitur "Transaksi"
Pertama kita tambahkan folder dengan nama "dashboard" lalu buat file html biasa dengan nama transaksi.html.
import Head from 'next/head'
import Link from 'next/link'
const Transaksi = () => {
return (
<div>
<Head>
<title>Transaksi</title>
</Head>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child">
<div className="my-5">
<label for="inputNama" className="label is-size-4 green">
Dashboard</label>
</div>
<div className="block my-5 tp-border">
<div className="list-transaksi is-flex is-align-items-center
is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<h3 className="size-5-mobile is-size-5-desktop transaksi">
Edit Toko</h3>
</div>
<div className="list-transaksi is-flex is-align-items-center
is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<h3 className="is-size-5-mobile is-size-5-desktop
transaksi" >Transaksi</h3>
</div>
<div className="list-transaksi is-flex is-align-items-center
is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<Link href="/dashboard/pendapatan">
<h3 className="is-size-5-mobile is-size-5-desktop
transaksi" >Pendapatan</h3>
</Link>
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div className="is-flex is-justify-content-center bg-green m-5 p-3 white
has-text-weight-bold is-size-3-desktop">
<label>Banyaknya Transaksi</label>
</div>
<div className="hscroll">
<table className="table is-fullwidth">
<thead>
<tr className="bg-gray btm-border">
<td className="black bg-white">Rentan</td>
<td className="black bg-white">Total transaksi</td>
</tr>
</thead>
<tbody>
<tr>
<td>Minggu 1</td>
<td>10 Transaksi</td>
</tr>
<tr>
<td>Minggu 2</td>
<td>35 Transaksi</td>
</tr>
<tr>
<td>Minggu 3</td>
<td>50 Transaksi</td>
</tr>
<tr>
<td>Minggu 4</td>
<td>87 Transaksi</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
}
export default Transaksi;
Output
Fitur "Pendapatan"
Pertama kita tambahkan folder dengan nama "dashboard" lalu buat file html biasa dengan nama pendapatan.html.
import Head from 'next/head'
import Link from 'next/link'
const Pendapatan = () => {
return (
<div>
<Head>
<title>Pendapatan</title>
</Head>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child">
<div className="my-5">
<label for="inputNama" className="label is-size-4 green">
Dashboard</label>
</div>
<div className="block my-5 tp-border">
<div className="list-transaksi is-flex is-align-items-center
is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<h3 className="is-size-5-mobile is-size-5-desktop
transaksi" >Edit Toko</h3>
</div>
<div className="list-transaksi is-flex is-align-items-center
is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<Link href="/dashboard/transaksi">
<h3 className="is-size-5-mobile is-size-5-desktop
transaksi" >Transaksi</h3>
</Link>
</div>
<div className="list-transaksi is-flex is-align-items-center
is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<Link href="/">
<h3 className="is-size-5-mobile is-size-5-desktop
transaksi" >Pendapatan</h3>
</Link>
</div>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child">
<div className="is-flex is-justify-content-center bg-green m-5 p-3 white
has-text-weight-bold is-size-3-desktop">
<label>Banyaknya Transaksi</label>
</div>
<div className="hscroll">
<table className="table is-fullwidth">
<thead>
<tr className="bg-gray btm-border">
<td className="black bg-white">Rentan</td>
<td className="black bg-white">Total Pendapatan</td>
</tr>
</thead>
<tbody>
<tr>
<td>Minggu 1</td>
<td>450.000</td>
</tr>
<tr>
<td>Minggu 2</td>
<td>600.000</td>
</tr>
<tr>
<td>Minggu 3</td>
<td>1.250.000</td>
</tr>
<tr>
<td>Minggu 4</td>
<td>3.230.000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
}
export default Pendapatan;
Output
Komentar
Posting Komentar