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 folder dengan nama bantuan selanjutnya buat file dengan nama index.js untuk halaman bantuan
import Head from 'next/head'
const Bantuan = () => {
return (
<div>
<Head>
<title>Bantuan</title>
</Head>
<nav className="navbar navigasi bg-green" 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 white"></i>
<h2 className="title is-size-8-desktop is-size-8-mobile pl-2 white">Bantuan</h2>
</a>
</div>
</nav>
<section class="hero bg-white shadow1">
<div class="hero-body pt-5">
<div class="text has-text-left">
<span class="icon-text has-text-info">
<span class="icon">
<i class="fa-solid fa-angle-right fa-3x-desktop is-size-5-desktop is-size-5-mobile white"></i>
</span>
</span>
<div class="field pt-4">
<span class="icon">
<i class="fas fa-reguler fa-align-justify is-size-3-desktop is-size-3-mobile pt-4 green"></i>
</span>
<span class="pl-6">
<input class="input input-profile bg-gray" type="text" placeholder="Cari Topik"/>
</span>
</div>
</div>
</div>
</section>
<div className="my-5 btm-bordergray-1 pt-4">
<div className="is-flex is-justify-content-space-between px-5 mt-3 pb-3 btm-bordergray">
<p className="is-size-7-mobile pb-4">FAQ</p>
<p className="is-flex is-justify-content-end is-size-4-mobile is-size-4-desktop">
<i class="fa-solid fa-angle-right fa-3x-desk op inline icon gray pl-4"></i>
</p>
</div>
</div>
<div className="my-5 btm-bordergray-1">
<div className="is-flex is-justify-content-space-between px-5 mt-3 pb-3 btm-bordergray">
<p className="is-size-7-mobile has-text-weight-bold pb-4">[Perlindungan Pesanan] Apa itu garansi Wlijo?</p>
<p className="is-flex is-justify-content-end is-size-4-mobile is-size-4-desktop">
<i class="fa-solid fa-angle-right fa-3x-desk op inline icon gray pl-4"></i>
</p>
</div>
</div>
<div className="my-5 btm-bordergray-1">
<div className="is-flex is-justify-content-space-between px-5 mt-3 pb-3 btm-bordergray">
<p className="is-size-7-mobile has-text-weight-bold pb-4">Bagaimana cara kontak Customer Service Wlijo</p>
<p className="is-flex is-justify-content-end is-size-4-mobile is-size-4-desktop">
<i class="fa-solid fa-angle-right fa-3x-desk op inline icon gray pl-4"></i>
</p>
</div>
</div>
<div className="my-5 btm-bordergray-1">
<div className="is-flex is-justify-content-space-between px-5 mt-3 pb-3 btm-bordergray">
<p className="is-size-7-mobile has-text-weight-bold pb-4">[Pelacakan Pesanan] Berapa lama saya akan menerima pesanan saya</p>
<p className="is-flex is-justify-content-end is-size-4-mobile is-size-4-desktop">
<i class="fa-solid fa-angle-right fa-3x-desk op inline icon gray pl-4"></i>
</p>
</div>
</div>
<div className="my-5 btm-bordergray-5">
<div className="is-flex is-justify-content-space-between px-5 mt-3 pb-3 btm-bordergray">
<p className="is-size-7-mobile has-text-weight-bold pb-4">Mengapa penilaian produk/respon saya disembunyikan</p>
<p className="is-flex is-justify-content-end is-size-4-mobile is-size-4-desktop">
<i class="fa-solid fa-angle-right fa-3x-desk op inline icon gray pl-4"></i>
</p>
</div>
</div>
<div className="my-5 pt-4">
<div className="is-flex is-justify-content-space-between px-5 mt-3 pb-3">
<p className="is-size-7-mobile has-text-weight-bold pb-4">HUBUNGI KAMI</p>
</div>
<div className="is-flex is-flex-grow-5 is-justify-content-space-between px-5 mt-3 pb-3 bwh-border">
<i class="fa-solid fa-clock-rotate-left green fa-3x"></i>
<h3 className="is-flex has-text-weight-bold is-size-7-mobile is-flex-grow-5 pt-4 pl-2">Chat Wlijo Sekarang</h3>
</div>
<div className="is-flex is-flex-grow-5 is-justify-content-space-between px-5 mt-3 pb-3 bwh-border">
<i class="fa-regular fa-envelope fa-3x blue"></i>
<div className="mx-2">
<div className="is-flex is-justify-content-left">
<h3 className="is-flex has-text-weight-bold is-size-7-mobile">Email</h3>
</div>
<p className="is-size-7-mobile ">Tulis pertanyaan sekarang!</p>
</div>
<p className="is-flex is-flex-grow-2 is-justify-content-end is-size-7-mobile pl-2 pr-3"></p>
</div>
<div className="is-flex is-flex-grow-5 is-justify-content-space-between px-5 mt-3 pb-3 bwh-border">
<i class="fa-brands fa-whatsapp fa-3x bg-green white"></i>
<div className="mx-2">
<div className="is-flex is-justify-content-left">
<h3 className="is-flex has-text-weight-bold is-size-7-mobile">Telepon</h3>
</div>
<p className="is-size-7-mobile ">1500702</p>
</div>
<p className="is-flex is-flex-grow-2 is-justify-content-end is-size-7-mobile pl-2 pr-3"></p>
</div>
</div>
<div className="text has-text-centered">
<div className="is-flex is-flex-grow-5 is-align-items-center is-justify-content-space-between px-5 mt-3 pb-3 btm-bordergray btm-border">
</div>
<p className="text has-text-centered is-size-7-mobile pt-4">Layanan Pelanggan 24 Jam, Senin s/d Minggu, termasuk Hari Libur Nasional</p>
</div><br/>
<section class="hero is-small is-flex is-flex-grow-5 is-align-items-center bg-gray">
<div class="hero-body is-flex is-flex-grow-5 is-align-items-center has-text-centered pt-4">
<div class="text has-text-centered">
<p className="is-flex is-flex-grow-2 has-text-weight-bold has-text-centered grey pl-4">
<i className="fa-regular fa-copyright gray pt-1 pl-2"></i>2021 Wlijo. Seluruh hak cipta</p>
</div>
</div>
</section>
</div>
);
}
export default Bantuan;
Output
.
Komentar
Posting Komentar