Next.js - Định tuyến động

Trong Next.js, chúng ta có thể tạo các tuyến đường một cách động. Trong ví dụ này, chúng tôi sẽ tạo các trang một cách nhanh chóng và định tuyến của chúng.

  • Step 1. Define [id].js file- [id] .js đại diện cho trang động nơi id sẽ là đường dẫn tương đối. Xác định tệp này trong thư mục trang / bài đăng.

  • Step 2. Define lib/posts.js- posts.js đại diện cho id và nội dung. thư mục lib sẽ được tạo trong thư mục gốc.

[id] .js

Cập nhật tệp [id] .js bằng phương thức getStaticPaths () đặt đường dẫn và phương thức getStaticProps () để lấy nội dung dựa trên 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 chứa getAllPostIds () để lấy id và getPostData () để lấy nội dung tương ứng.

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'
      }
   }
];
}

Khởi động Máy chủ Next.js

Chạy lệnh sau để khởi động máy chủ -.

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

Xác minh đầu ra

Mở localhost: 3000 / posts / one trong trình duyệt và bạn sẽ thấy kết quả sau.

Mở localhost: 3000 / posts / two trong trình duyệt và bạn sẽ thấy kết quả sau.