Next.js - การกำหนดเส้นทางแบบไดนามิก
ใน Next.js เราสามารถสร้างเส้นทางแบบไดนามิก ในตัวอย่างนี้เราจะสร้างเพจได้ทันทีและกำหนดเส้นทาง
Step 1. Define [id].js file- [id] .js แสดงถึงเพจไดนามิกโดย id จะเป็นพา ธ สัมพัทธ์ กำหนดไฟล์นี้ในไดเร็กทอรี pages / post
Step 2. Define lib/posts.js- posts.js แสดงถึงรหัสและเนื้อหา lib ไดเร็กทอรีจะถูกสร้างในไดเร็กทอรีรูท
[id] .js
อัปเดตไฟล์ [id] .js ด้วยเมธอด getStaticPaths () ซึ่งกำหนดพา ธ และเมธอด getStaticProps () เพื่อรับเนื้อหาตาม 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 มี getAllPostIds () เพื่อรับรหัสและ getPostData () เพื่อรับเนื้อหาที่เกี่ยวข้อง
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'
}
}
];
}
เริ่มเซิร์ฟเวอร์ Next.js
รันคำสั่งต่อไปนี้เพื่อเริ่มเซิร์ฟเวอร์ -
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
ตรวจสอบผลลัพธ์
เปิด localhost: 3000 / posts / one ในเบราว์เซอร์และคุณจะเห็นผลลัพธ์ต่อไปนี้
เปิด localhost: 3000 / posts / two ในเบราว์เซอร์และคุณจะเห็นผลลัพธ์ต่อไปนี้