Next.jsIntermediate
Dynamic Routes
[slug], [...slug], [[...slug]] — dynamic segment, catch-all ও generateStaticParams বাংলায়।
11টি অংশবাংলা ভাষায়
Dynamic routes দিয়ে data থেকে একটি page একাধিক URL-এ render করা যায় — যেমন /blog/one, /blog/two।
Single Segment [slug]
app/blog/[slug]/page.tsxtsx
tsx
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const post = await getPost(slug);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}Catch-all [...slug]
app/docs/[...slug]/page.tsxtsx
tsx
export default async function Page({
params,
}: {
params: Promise<{ slug: string[] }>;
}) {
const { slug } = await params;
// slug: ["getting-started"] বা ["getting-started", "installation"]
return <h1>Docs: {slug.join(" / ")}</h1>;
}Optional Catch-all [[...slug]]
[[...slug]] দিলে segment-এর সাথে route রুট লেভেলেও (/docs) কাজ করে — segment ছাড়াও।
Static Params (SSG)
generateStaticParams দিলে build সময়ে কোন কোন slug-এর জন্য page তৈরি হবে তা বলে দেওয়া যায় — ফলে faster load।
app/blog/[slug]/page.tsxtsx
tsx
export function generateStaticParams() {
return [
{ slug: "first-post" },
{ slug: "second-post" },
{ slug: "third-post" },
];
}
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return <h1>{slug}</h1>;
}Dynamic Segments
[segment] = single param, [...segment] = catch-all, [[...segment]] = optional catch-all। CMS বা blog-এ ডায়নামিক route সবচেয়ে গুরুত্বপূর্ণ।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।