Apa itu Next.js?
Next.js
merupakan sebuah React framework yang dibentuk buat mengatasi kasus
client-side rendering yang dimiliki React. Sebuah halaman website yang
dibentuk memakai React ‘terasa ringan’ lantaran tampilan website sangat
interaktif.
Selain
itu, ketika data berubah, React menggunakan efisien akan mengupdate
bagian menurut halaman website yang memang perlu diupdate tanpa perlu
reload satu halaman penuh.
Untuk
menerima itu seluruh, client wajib load seluruh file JavaScript sebelum
konten halaman ditampilkan. apabila file JS relatif akbar maka ketika
yang diperlukan buat load pertama kali pula sebagai lebih lama.
Masalah
lain menurut client-side rendering merupakan SEO, terdapat kemungkinan
web crawler berusaha mengindex halaman yang belum terselesaikan dirender
sepenuhnya (lantaran ketika load yang lama). Dan menduga web tadi
blank.
Kedua
kasus diatas bisa diselesaikan menggunakan teknik pre-rendering. Yaitu
halaman HTML dan file JavaScript pada generate sebelum dikirim ke
client.
Ada dua bentuk pre-rendering yaitu Server Side Rendering (SSR) dan Static Site Generator (SSG).
Server Side Rendering(SSR)
Sesuai
namanya proses render terjadi pada server dan bukan pada client, setiap
request ke server akan direspon menggunakan sebuah halaman HTML.
Static Site Generator (SSG)
Setiap
request ke server akan direspon menggunakan halaman HTML yang telah
terselesaikan digenerate dalam ketika proses build. Teknik cache memakai
CDN bisa diterapkan buat mempersingkat ketika akses.
Next.js bisa melakukan keduanya.
Features
Selain pre-rendering, Next.js pula mempunyai beberapa fitur buat memudahkan kita pada menciptakan pelaksanaan React:
Page-based routing system, alamat menurut halaman merupakan nama file menurut halaman tadi
Code splitting, code JavaScript dipecah sebagai chunk supaya ketika loading halaman sebagai lebih singkat
Client-side routing, routing pula sanggup dilakukan pada sisi client
Fast refresh support, seperti menggunakan hot reloading
Built-In CSS, support CSS Module, SAAS dan CSS-in-JS
Automatic Image Optimization, tersedia dalam Next.js versi 10 keatas
API Routes, menciptakan API tanpa library
JSON — singkatan dari “JavaScript Object Notation“— adalah sebuah format untuk berbagi data. JSON menggunakan ekstensi .json. Karena sangat mudah dibaca dan ringan, JSON memberikan alternatif lebih baik dari XML dan membutuhkan formatting yang tidak banyak.
Pertama kita buat file dengan nama transaksi.js untuk halaman transaksi.
import Head from 'next/head'
const Transaksi = () => {
return (
<div>
<Head>
<title>Transaksi</title>
</Head>
<nav className="navbar navigasi" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item">
<i class="fa-solid fa-arrow-left is-size-4-desktop is-size-4-mobile"></i>
<h2 className="title is-size-8-desktop is-size-8-mobile pl-2 green">Transaksi Saya</h2>
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a>
<span class="icon">
<i class="fas fa-search green"></i>
</span>
</a>
</p>
<p class="control">
<a>
<span class="icon">
<i class="fas fa-message green"></i>
</span>
</a>
</p>
</div>
</div>
</div>
</nav>
<nav class="nav-profil-bawah">
<div class="is-flex is-align-items-center text has-text-right green">
<h2 className="is-flex is-flex-grow-5 is-justify-content-end title is-size-4-desktop is-size-4-mobile green">Riwayat Pesanan
<p class="is-flex pl-5 is-flex-grow-5 is-justify-content-end green">
<i class="text has-text-right green fa-solid fa-angle-right fa-3x-desktop"></i>
</p>
</h2>
</div>
</nav>
<nav class="nav-profil-bawah">
<div class="is-flex is-align-items-center text has-text-right green">
<h2 className="is-flex is-flex-grow-5 is-justify-content-end title is-size-4-desktop is-size-4-mobile green">Riwayat Beli
<p class="is-flex pl-5 is-flex-grow-5 is-justify-content-end green">
<i class="text has-text-right green fa-solid fa-angle-right fa-3x-desktop"></i>
</p>
</h2>
</div>
</nav>
<section class="hero white shadow1 pt-4">
<div class="hero-body">
<div class="tabs is-centered nav-profil-bawah">
<ul>
<li><a>Belum Bayar</a></li>
<li class="is-active"><a>Proses</a></li>
<li><a>Kirim</a></li>
<li><a>Rating</a></li>
</ul>
</div>
<div class="navbar-start">
<div className="navbar-brand">
<a className="navbar-item">
<img src="/user.png" className="avatar img-user" width="40" height="40" alt=""/>
<div className="title is-size-5-desktop is-size-5-mobile pl-2 green">Customer A</div>
</a>
</div>
</div>
<article class="media">
<div class="media-left">
<figure class="image is-128x128 pt-4">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Image"/>
</figure>
</div>
<div class="media-content">
<div class="content pt-4">
<p>
<h3>Kangkung</h3>
<div class="text has-text-left green">
<span class="pt-4 gray is-size-6-desktop is-size-6-mobile">per ikat</span>
<p class="text has-text-right gray is-size-6-desktop is-size-6-mobile">x2</p>
<p class="text has-text-right gray is-size-6-desktop is-size-6-mobile">Rp. 4.500</p>
</div>
</p>
</div>
<div class="tabs is-centered nav-profil-bawah">
</div>
<div class="text has-text-left green">
<span class="pt-4 gray is-size-6-desktop is-size-6-mobile">2 produk</span>
<p class="text has-text-right gray is-size-6-desktop is-size-6-mobile">Total pemesanan: Rp. 9.000</p>
</div>
</div>
</article>
</div>
</section>
<section class="hero white shadow1 pt-4">
<div class="hero-body">
<div class="navbar-start">
<div className="navbar-brand">
<a className="navbar-item">
<img src="/user.png" className="avatar img-user" width="40" height="40" alt=""/>
<div className="title is-size-5-desktop is-size-5-mobile pl-2 green">Customer B</div>
</a>
</div>
</div>
<article class="media">
<div class="media-left">
<figure class="image is-128x128 pt-4">
<img src="https://bulma.io/images/placeholders/128x128.png" alt="Image"/>
</figure>
</div>
<div class="media-content">
<div class="content pt-4">
<p>
<h3>Daging Ayam</h3>
<div class="text has-text-left green">
<span class="pt-4 gray is-size-6-desktop is-size-6-mobile">1 Kg</span>
<p class="text has-text-right gray is-size-6-desktop is-size-6-mobile">x1</p>
<p class="text has-text-right gray is-size-6-desktop is-size-6-mobile">Rp. 47.500</p>
</div>
</p>
</div>
<div class="tabs is-centered nav-profil-bawah">
</div>
<div class="text has-text-left green">
<span class="pt-4 gray is-size-6-desktop is-size-6-mobile">1 produk</span>
<p class="text has-text-right gray is-size-6-desktop is-size-6-mobile">Total pemesanan: Rp. 47.500</p>
</div>
</div>
</article>
</div>
</section>
</div>
);
}
export default Transaksi;
Output
Komentar
Posting Komentar