Cách tạo các tuyến đường động trong Next.js

Cách tạo các tuyến đường động trong Next.js

Các tuyến động là các trang cho phép bạn sử dụng các thông số tùy chỉnh trong một URL. Chúng đặc biệt có lợi khi tạo các trang cho nội dung động.





Đối với blog, bạn có thể sử dụng một tuyến động để tạo URL dựa trên tiêu đề của các bài đăng trên blog. Cách tiếp cận này tốt hơn là tạo một thành phần trang cho mỗi bài đăng.



Bạn có thể tạo các tuyến đường động trong Next.js bằng cách xác định hai hàm: getStaticProps và getStaticPaths.





LÀM VIDEO TRONG NGÀY

Tạo một tuyến đường động trong Next.js

Để tạo một tuyến động trong Next.js, hãy thêm dấu ngoặc vào một trang. Ví dụ: [params] .js, [slug] .js hoặc [id] .js.

i / o lỗi windows 10

Đối với blog, bạn có thể sử dụng một slug cho tuyến động. Vì vậy, nếu một bài đăng có slug dynamic-route-nextjs , URL kết quả sẽ là https://example.com/dynamic-routes-nextjs.



Trong thư mục trang, hãy tạo một tệp mới có tên [slug] .js và tạo thành phần Bài đăng lấy dữ liệu bài đăng làm chỗ dựa.

const Post = ({ postData }) => { 
  return <div>{/* content */}</div>; 
};

Có nhiều cách khác nhau để bạn có thể chuyển dữ liệu bài đăng đến Bài đăng. Phương pháp bạn chọn phụ thuộc vào cách bạn muốn hiển thị trang. Để tìm nạp dữ liệu trong thời gian xây dựng, hãy sử dụng getStaticProps () và để tìm nạp nó theo yêu cầu, hãy sử dụng getServerSideProps ().



Sử dụng getStaticProps để tìm nạp dữ liệu bài đăng

Các bài đăng trên blog không thay đổi thường xuyên và việc tìm nạp chúng tại thời điểm xây dựng là đủ. Vì vậy, hãy sửa đổi thành phần Post để bao gồm getStaticProps ().

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

Hàm getStaticProps tạo dữ liệu bài đăng được hiển thị trên trang. Nó sử dụng slug từ các đường dẫn được tạo bởi hàm getStaticPaths.



Sử dụng getStaticPaths để tìm nạp đường dẫn

Hàm getStaticPaths () trả về các đường dẫn cho các trang sẽ được hiển thị trước. Thay đổi thành phần Bài đăng để bao gồm nó:

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
};

Việc triển khai getStaticPaths này tìm nạp tất cả các bài đăng sẽ được hiển thị và trả về các slugs dưới dạng tham số.

Nhìn chung, [slug] .js sẽ giống như sau:

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

Bạn phải sử dụng getStaticProps () và getStaticPaths () cùng nhau để tạo một tuyến động. Hàm getStaticPaths () sẽ tạo ra các tuyến động, trong khi getStaticProps () tìm nạp dữ liệu được hiển thị tại mỗi tuyến.

Tạo các tuyến đường động lồng nhau trong Next.js

Để tạo một lộ trình lồng nhau trong Next.js, bạn cần tạo một thư mục mới bên trong thư mục trang và lưu lộ trình động bên trong nó.

Ví dụ: để tạo / pages / posts / dynamic-route-nextjs, hãy lưu [slug] .js vào bên trong / trang / bài viết.

Truy cập các tham số URL từ các tuyến đường động

Sau khi tạo tuyến đường, bạn có thể truy xuất Tham số URL từ tuyến động bằng useRouter () Phản ứng móc .

Đối với các trang / [slug] .js, hãy lấy slug như sau:

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

Điều này sẽ hiển thị slug của bài đăng.

Định tuyến động với getServerSideProps

Sử dụng Next.js, bạn có thể tìm nạp dữ liệu tại thời điểm xây dựng và tạo các tuyến đường động. Bạn có thể sử dụng kiến ​​thức này để kết xuất trước các trang từ danh sách các mục.

Nếu bạn muốn tìm nạp dữ liệu theo mọi yêu cầu, hãy sử dụng getServerSideProps thay vì getStaticProps. Lưu ý rằng cách tiếp cận này chậm hơn; bạn chỉ nên sử dụng nó khi sử dụng dữ liệu thường xuyên thay đổi.

ứng dụng tải nhạc tốt nhất cho android