Next.js - Perutean Dinamis
Di Next.js, kita bisa membuat rute secara dinamis. Dalam contoh ini, kita akan membuat halaman dengan cepat dan peruteannya.
Step 1. Define [id].js file- [id] .js mewakili halaman dinamis di mana id akan menjadi jalur relatif. Tentukan file ini di halaman / direktori posting.
Step 2. Define lib/posts.js- posts.js mewakili id dan isinya. direktori lib harus dibuat di direktori root.
[id] .js
Perbarui file [id] .js dengan metode getStaticPaths () yang menyetel jalur dan metode getStaticProps () untuk mendapatkan konten berdasarkan id.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
import { getAllPostIds, getPostData } from '../../lib/posts'
export default function Post({ postData }) {
return (
<Container>
{postData.id}
<br />
{postData.title}
<br />
{postData.date}
</Container>
)
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
return {
props: {
postData
}
}
}
posts.js
posts.js berisi getAllPostIds () untuk mendapatkan id dan getPostData () untuk mendapatkan konten yang sesuai.
export function getPostData(id) {
const postOne = {
title: 'One',
id: 1,
date: '7/12/2020'
}
const postTwo = {
title: 'Two',
id: 2,
date: '7/12/2020'
}
if(id == 'one'){
return postOne;
}else if(id == 'two'){
return postTwo;
}
}
export function getAllPostIds() {
return [{
params: {
id: 'one'
}
},
{
params: {
id: 'two'
}
}
];
}
Mulai Server Next.js
Jalankan perintah berikut untuk memulai server -.
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
Verifikasi Output
Buka localhost: 3000 / posts / one di browser dan Anda akan melihat output berikut.
Buka localhost: 3000 / posts / two di browser dan Anda akan melihat output berikut.