Các tuyến động là các trang cho phép bạn sử dụng các tham 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 định tuyến động để tạo URL dựa trên tiêu đề của 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 trong Tiếp theo. js bằng cách xác định hai chức năng. getStaticProps và getStaticPath
Tạo một tuyến đường động trong Tiếp theo. js
Để tạo một tuyến đường động trong Tiếp theo. js, thêm dấu ngoặc vào một trang. Ví dụ: [tham số]. js, [sên]. js hoặc [id]. js
Đối với một blog, bạn có thể sử dụng một con sên cho tuyến đường động. Vì vậy, nếu một bài đăng có slug dynamic-routes-nextjs, URL kết quả sẽ là https. //thí dụ. com/động-tuyến-nextjs
Trong thư mục pages, 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 {/* content */};
};
Có nhiều cách khác nhau để bạn có thể chuyển dữ liệu bài đăng tới Bài đăng. Phương pháp bạn chọn tùy 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 dữ liệu theo yêu cầu, hãy sử dụng getServerSideProps[]
Sử dụng getStaticProps để lấy 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 khi xây dựng là đủ. Vì vậy, hãy sửa đổi thành phần Bài đăng để bao gồm getStaticProps[]
import { getSinglePost } from "../../utils/posts";
const Post = [{ content }] => {
return {/* content */};
};
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 sên 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ề đườ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 con sên dưới dạng tham số
Nhìn chung, [sên]. js sẽ trông như thế này
import { getAllPosts, getSinglePost } from "../../utils/posts";
const Post = [{ content }] => {
return {content};
};
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 tuyến đường động. Hàm getStaticPaths[] sẽ tạo các tuyến động, trong khi getStaticProps[] tìm nạp dữ liệu được hiển thị ở mỗi tuyến
Tạo các tuyến động lồng nhau trong Tiếp theo. js
Để tạo một tuyến đường lồng nhau trong Tiếp theo. js, bạn cần tạo một thư mục mới bên trong thư mục pages và lưu định tuyến động bên trong đó
Ví dụ: để tạo /pages/posts/dynamic-routes-nextjs, hãy lưu [slug]. js bên trong/trang/bài viết
Truy cập các tham số URL từ các tuyến động
Sau khi tạo route, bạn có thể truy xuất tham số URL từ route động bằng cách sử dụng hook React useRouter[]
Đối với các trang/[slug]. js, lấy slug như thế này
import { useRouter } from 'next/router'
const Post = [] => {
const router = useRouter[]
const { slug } = router.query
return Post: {slug}
}
export default Post
Điều này sẽ hiển thị slug của bài viết
Định tuyến động với getServerSideProps
Sử dụng Tiếp theo. js, bạn có thể tìm nạp dữ liệu khi xây dựng và tạo các tuyến động. Bạn có thể sử dụng kiến thức này để hiển thị 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 phương pháp này chậm hơn;