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 postingan 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.
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 dynamic-routes-nextjs, URL yang dihasilkan adalah https://example.com/dynamic-routes-nextjs.
Di folder pages, buat file baru bernama [slug].js dan buat komponen Post yang menggunakan data post sebagai penyangga.
const Postingan = ({postData }) => {
kembali <div>{/* isi */}</div>;
};
Ada berbagai cara untuk meneruskan data pos ke Pos. 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().
impor { getSinglePost } dari "../../utils/posts";const Posting = ({ konten }) => {
kembali <div>{/* isi */}</div>;
};
eksporconst getStaticProps = asinkron ({ parameter }) => {
const posting = menunggu getSinglePost (params.slug);
kembali {
alat peraga: { ...posting },
};
};
Fungsi getStaticProps menghasilkan data posting yang dirender pada halaman. Ini menggunakan siput dari jalur yang dihasilkan oleh fungsi getStaticPaths.
Menggunakan getStaticPaths untuk Mengambil Jalur
Fungsi getStaticPaths() mengembalikan jalur untuk halaman yang harus dirender sebelumnya. Ubah komponen Posting untuk memasukkannya:
eksporconst getStaticPath = asinkron () => {
const path = getAllPosts().map(({ slug }) => ({ parameter: { siput } }));
kembali {
jalur,
mundur: PALSU,
};
};
Implementasi getStaticPaths ini mengambil semua postingan yang harus dirender dan mengembalikan slug sebagai params.
Secara keseluruhan, [slug].js akan terlihat seperti ini:
impor { getAllPosts, getSinglePost } dari "../../utils/posts";const Posting = ({ konten }) => {
kembali <div>{isi}</div>;
};eksporconst getStaticPath = asinkron () => {
const path = getAllPosts().map(({ slug }) => ({ parameter: { siput } }));
kembali {
jalur,
mundur: PALSU,
};
};eksporconst getStaticProps = asinkron ({ parameter }) => {
const posting = menunggu getSinglePost (params.slug);kembali {
alat peraga: { ...posting },
};
};
eksporbawaan Pos;
Anda harus menggunakan getStaticProps() dan getStaticPaths() bersama-sama untuk membuat rute dinamis. Fungsi getStaticPaths() harus menghasilkan rute dinamis, sedangkan 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 /pages/posts.
Mengakses Parameter URL Dari Rute Dinamis
Setelah membuat rute, Anda dapat mengambil kembali parameter URL dari rute dinamis menggunakan useRouter() Bereaksi kait.
Untuk halaman/[slug].js, dapatkan slug seperti ini:
impor { gunakanRouter } dari 'berikutnya/router'const Posting = () => {
const router = gunakanRouter()
const { siput } = router.query
kembali <P>Posting: {siput}</P>
}
eksporbawaan Pos
Ini akan menampilkan slug dari postingan.
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.
