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 untuk selanjutnya buat file dengan nama index.js untuk halaman halaman Edit Toko.
import Head from 'next/head'
import Link from 'next/link'
export const getStaticProps = async (context) => {
const res = await fetch('http://localhost:3004/profile');
const data = await res.json();
return {
props : { profile : data }
}
}
const Transaksi = ({profile}) => {
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 className="columns is-mobile is-centered is-flex btm-bordergray m-1">
<Link href="/dashboard/konversi">
<button className="button is-white is-size-5-mobile is-size-3-desktop transaksi" >Konversi</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>
{profile.map(x => (
<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>{x.namaToko}
<Link href={"/dashboard/editToko/" + x.id}>
<button className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</Link>
</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>{x.noHp}
<Link href={"/dashboard/editToko/" + x.id}>
<button className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</Link>
</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>{x.email}
<Link href={"/dashboard/editToko/" + x.id}>
<button className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</Link>
</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>{x.pass}
<Link href={"/dashboard/editToko/" + x.id}>
<button className="panah is-size-8 fas fa-chevron-right" aria-hidden="true"></button>
</Link>
</div>
</a>
</div>
</div>
))
}
</div>
</div>
</div>
</div>
);
}
export default Transaksi;
Selanjutnya buat file dengan nama db.json
"profile": [
{
"id": 1,
"namaToko": "ryan_wlijo",
"noHp": "+628*****11812",
"email": "nu***@gmail.com",
"pass": "********"
}
]
Buat Halaman berikutnya yang masih satu folder dengan index.js Beri nama file baru dengan nama [id].js
import Head from "next/head";
import { useForm } from 'react-hook-form';
export const getStaticPaths = async () => {
const res = await fetch('http://localhost:3004/profile');
const data = await res.json();
const paths = data.map(x => {
return {
params : { id : x.id.toString() }
}
})
return {
paths,
fallback : false
}
}
export const getStaticProps = async (context) => {
const id = context.params.id;
const res = await fetch('http://localhost:3004/profile/' + id);
const data = await res.json();
return {
props : { profile : data }
}
}
const Ubah = ({ profile }) => {
const { register, formState: { errors },handleSubmit } = useForm();
const onSubmit = data => console.log(data);
return (
<div>
<Head>
<title>Edit Toko</title>
</Head>
<form onSubmit={handleSubmit(onSubmit)} className="is-flex is-flex-direction-column form my-6">
<div className="masukan mb-2 px-5">
<label htmlFor="inputToko" className="label1">Nama Toko</label>
<div className="control">
<input type="text" className="input" {...register('namaToko',{ require: true})}/>
{errors.namaToko && "Masukkan Nama Toko"}
</div>
</div>
<div className="masukan mb-2 px-5">
<label htmlFor="inputNoHp" className="label1">No Hp</label>
<div className="control">
<input type="text" className="input" {...register('noHp',{ require: true})}/>
{errors.noHp && "Masukkan Nomor Hp"}
</div>
</div>
<div className="masukan mb-2 px-5">
<label htmlFor="inputEmail" className="label1">Email</label>
<div className="control">
<input type="text" className="input" {...register('email',{ require: true})}/>
{errors.email && "Masukkan Email"}
</div>
</div>
<div className="masukan mb-2 px-5">
<label htmlFor="inputPass" className="label1">Password</label>
<div className="control">
<input type="text" className="input" {...register('pass',{ require: true})}/>
{errors.pass && "Masukkan Password"}
</div>
</div>
<div className="masukkan my-2 px-5">
<div className="control">
<button className="button bg-green white is-rounded" type="submit">Ubah</button>
</div>
</div>
</form>
</div>
)
}
export default Ubah;
Lalu tinggal jalankan programnya dengan npm run dev dan buka http://localhost:3000/ di browser kalian.
Output: Halaman Edit Toko
Komentar
Posting Komentar