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 file dengan nama index.js untuk halaman Dashboard.
import Head from 'next/head';
import Link from 'next/link';
const Dashboard = () => {
return (
<div>
<Head>
<title>Dashboard</title>
</Head>
<div className="title is-size-5-mobile is-size-3-desktop green m-5">
<p>Dashboard</p>
</div>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child">
<div className="block my-0">
<div className="columns is-mobile is-centered is-flex
tp-bordergray btm-bordergray m-1">
<Link href="/dashboard/editToko">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi">Edit Toko</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex
btm-bordergray m-1">
<Link href="/dashboard/transaksi">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi">Transaksi</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex
btm-bordergray m-1">
<Link href="/dashboard/pendapatan">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi" >Pendapatan</button>
</Link>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Dashboard;
lalu kita tambahkan folder dengan nama "dashboard" lalu tambahkan lagi folder dengan nama "editToko" buat file html biasa dengan nama index.html.
import Head from 'next/head'
const Transaksi = () => {
return (
<div>
<Head>
<title>Edit Toko</title>
</Head>
<div class="tile is-ancestor">
<div class="tile is-4 is-vertical is-parent">
<div class="tile is-child">
<div className="block my-0">
<div className="columns is-mobile is-centered is-flex
btm-bordergray m-1">
<Link href="/dashboard/editToko">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi">Edit Toko</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex btm-bordergray m-1">
<Link href="/dashboard/transaksi">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi">Transaksi</button>
</Link>
</div>
<div className="columns is-mobile is-centered is-flex
btm-bordergray m-1">
<Link href="/dashboard/pendapatan">
<button className="button is-white is-size-5-mobile is-size-3
-desktop transaksi" >Pendapatan</button>
</Link>
</div>
</div>
</div>
</div>
<div className="tile is-parent">
<div className="tile is-child">
<div className="has-text-centered is-flex-direction-column bg-green
m-5 p-5">
<div className="is-flex is-justify-content-center">
<figure className="image is-128x128">
<img className="is-rounded bg-white" src="/user.png"/>
</figure>
</div>
<div className="is-align-items-center py-3">
<Link href="#">
<a className="button is-size-6 green bg-gray">Ubah Profile
</a>
</Link>
</div>
</div>
<div className="m-5">
<div className="is-flex is-justify-content-space-between is-align
-items-center py-1 btm-bordergray">
<div className="mx-5">Nama Toko</div>
<div>
<a class="panel mx-0">
<div>ryan_wlijo</div>
<div className="is-flex is-align-items-center">
<span className="panel-icon">
<i className="fas fa-chevron-right" aria-hidden="true">
</i>
</span>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align
-items-center py-1 btm-bordergray">
<div className="mx-5">No. Handphone</div>
<div>
<a class="panel-block">
<div>+628*****11812</div>
<div className="is-flex is-align-items-center">
<span className="panel-icon">
<i className="fas fa-chevron-right" aria-hidden="true">
</i>
</span>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align
-items-center py-1 btm-bordergray">
<div className="mx-5">Email</div>
<div>
<a class="panel-block">
<div>nu***@gmail.com"</div>
<div className="is-flex is-align-items-center">
<span className="panel-icon">
<i className="fas fa-chevron-right" aria-hidden="true">
</i>
</span>
</div>
</a>
</div>
</div>
<div className="is-flex is-justify-content-space-between is-align
-items-center btm-bordergray py-2">
<div className="mx-5">Atur Password</div>
<a class="panel-block">
<div********</div>
<span className="panel-icon">
<i className="fas fa-chevron-right" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
))
}
</div>
</div>
</div>
</div>
);
}
export default Transaksi;
Output
Komentar
Posting Komentar