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 ในเบราว์เซอร์และคุณจะเห็นผลลัพธ์ต่อไปนี้