Cara Membuat Laluan Dinamik dalam Next.js

Laluan dinamik ialah halaman yang membenarkan anda menggunakan parameter tersuai dalam URL. Mereka amat berfaedah apabila membuat halaman untuk kandungan dinamik.

Untuk blog, anda boleh menggunakan laluan dinamik untuk membuat URL berdasarkan tajuk catatan blog. Pendekatan ini lebih baik daripada membuat komponen halaman untuk setiap siaran.

---

---

Anda boleh mencipta laluan dinamik dalam Next.js dengan mentakrifkan dua fungsi: getStaticProps dan getStaticPaths.

MAKEUSEOF VIDEO OF THE DAY

Mencipta Laluan Dinamik dalam Next.js

Untuk membuat laluan dinamik dalam Next.js, tambahkan kurungan pada halaman. Contohnya, [params].js, [slug].js atau [id].js.

Untuk blog, anda boleh menggunakan slug untuk laluan dinamik. Jadi, jika jawatan mempunyai slug dynamic-routes-nextjs , URL yang terhasil ialah https://example.com/dynamic-routes-nextjs.

Dalam folder halaman, buat fail baharu yang dipanggil [slug].js dan buat komponen Post yang mengambil data siaran sebagai prop.

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

Terdapat pelbagai cara anda boleh menghantar data siaran ke Siaran. Kaedah yang anda pilih bergantung pada cara anda ingin memaparkan halaman. Untuk mengambil data semasa masa binaan, gunakan getStaticProps() dan untuk mengambilnya atas permintaan, gunakan getServerSideProps().

---

---

Menggunakan getStaticProps untuk Mengambil Data Siaran

Siaran blog tidak berubah sekerap, dan mengambilnya pada masa binaan sudah memadai. Jadi, ubah suai komponen Post untuk memasukkan 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 }, 
    }; 
  }; 

Fungsi getStaticProps menjana data siaran yang diberikan pada halaman. Ia menggunakan slug dari laluan yang dijana oleh fungsi getStaticPaths.

---

---

Menggunakan getStaticPaths untuk Mengambil Laluan

Fungsi getStaticPaths() mengembalikan laluan untuk halaman yang sepatutnya dipra-diberikan. Tukar komponen Post untuk memasukkannya:

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

Pelaksanaan getStaticPaths ini mengambil semua siaran yang harus diberikan dan mengembalikan slug sebagai params.

Secara keseluruhannya, [slug].js akan kelihatan seperti ini:

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; 

Anda mesti menggunakan getStaticProps() dan getStaticPaths() bersama-sama untuk mencipta laluan dinamik. Fungsi getStaticPaths() harus menjana laluan dinamik, manakala getStaticProps() mengambil data yang diberikan pada setiap laluan.

Mencipta Laluan Dinamik Bersarang dalam Next.js

Untuk mencipta laluan bersarang dalam Next.js, anda perlu mencipta folder baharu di dalam folder halaman dan menyimpan laluan dinamik di dalamnya.

Contohnya, untuk membuat /pages/posts/dynamic-routes-nextjs, simpan [slug].js di dalam /pages/posts.

Mengakses Parameter URL Dari Laluan Dinamik

Selepas mencipta laluan, anda boleh mendapatkan semula Parameter URL daripada laluan dinamik menggunakan useRouter() React hook .

Untuk halaman/[slug].js, dapatkan slug seperti ini:

versi linux terbaik untuk komputer riba

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

Ini akan memaparkan slug siaran.

Penghalaan Dinamik Dengan getServerSideProps

Menggunakan Next.js anda boleh mengambil data pada masa bina dan membuat laluan dinamik. Anda boleh menggunakan pengetahuan ini untuk pra-memaparkan halaman daripada senarai item.

Jika anda ingin mengambil data pada setiap permintaan, gunakan getServerSideProps dan bukannya getStaticProps. Ambil perhatian bahawa pendekatan ini lebih perlahan; anda hanya perlu menggunakannya apabila menggunakan data yang sentiasa berubah-ubah.