Cara Membuat Rute Dinamis di Next.js

Rute dinamis adalah halaman yang memungkinkan Anda menggunakan parameter khusus di URL. Mereka sangat bermanfaat saat membuat halaman untuk konten dinamis.

Untuk blog, Anda dapat menggunakan rute dinamis untuk membuat URL berdasarkan judul posting blog. Pendekatan ini lebih baik daripada membuat komponen halaman untuk setiap posting.

---

---

Anda dapat membuat rute dinamis di Next.js dengan mendefinisikan dua fungsi: getStaticProps dan getStaticPaths.

laptop dicolokkan tetapi tidak mengisi daya

VIDEO MAKEUSEOF HARI INI

Membuat Rute Dinamis di Next.js

Untuk membuat rute dinamis di Next.js, tambahkan tanda kurung ke halaman. Misalnya, [params].js, [slug].js atau [id].js.

Untuk blog, Anda bisa menggunakan slug untuk rute dinamis. Jadi, jika sebuah pos memiliki siput rute-dinamis-berikutnya , URL yang dihasilkan adalah https://example.com/dynamic-routes-nextjs.

Di folder halaman, buat file baru bernama [slug].js dan buat komponen Post yang mengambil data posting sebagai prop.

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

Ada berbagai cara Anda dapat meneruskan data posting ke Post. Metode yang Anda pilih bergantung pada bagaimana Anda ingin merender halaman. Untuk mengambil data selama waktu pembuatan, gunakan getStaticProps() dan untuk mengambilnya berdasarkan permintaan, gunakan getServerSideProps().

---

---

Menggunakan getStaticProps untuk Mengambil Data Posting

Posting blog tidak sering berubah, dan mengambilnya pada waktu pembuatan sudah cukup. Jadi, ubah komponen Post untuk menyertakan 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 menghasilkan data posting yang dirender pada halaman. Ini menggunakan slug dari jalur yang dihasilkan oleh fungsi getStaticPaths.

---

---

Menggunakan getStaticPaths untuk Mengambil Jalur

Fungsi getStaticPaths() mengembalikan jalur untuk halaman yang harus dirender sebelumnya. Ubah komponen Post untuk memasukkannya:

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

Implementasi getStaticPaths ini mengambil semua posting yang harus dirender dan mengembalikan slug sebagai params.

Secara keseluruhan, [siput].js akan terlihat seperti ini:

cara mematikan paksa macbook air

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 harus menggunakan getStaticProps() dan getStaticPaths() bersama-sama untuk membuat rute dinamis. Fungsi getStaticPaths() harus menghasilkan rute dinamis, sementara getStaticProps() mengambil data yang dirender di setiap rute.

Membuat Rute Dinamis Bersarang di Next.js

Untuk membuat rute bersarang di Next.js, Anda perlu membuat folder baru di dalam folder halaman dan menyimpan rute dinamis di dalamnya.

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

Mengakses Parameter URL Dari Rute Dinamis

Setelah membuat rute, Anda dapat mengambil Parameter URL dari rute dinamis menggunakan useRouter() Kait reaksi .

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

cara membuat chrome menggunakan lebih sedikit ram

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

Ini akan menampilkan slug dari pos.

Perutean Dinamis Dengan getServerSideProps

Menggunakan Next.js Anda dapat mengambil data pada waktu pembuatan dan membuat rute dinamis. Anda dapat menggunakan pengetahuan ini untuk melakukan pra-render halaman dari daftar item.

Jika Anda ingin mengambil data pada setiap permintaan, gunakan getServerSideProps alih-alih getStaticProps. Perhatikan bahwa pendekatan ini lebih lambat; Anda hanya boleh menggunakannya saat mengonsumsi data yang berubah secara teratur.