Next.jsBeginner
Routing ও Pages
app/ ফোল্ডারে page তৈরি, nested routes এবং params/searchParams ব্যবহার — বাংলা গাইড।
14টি অংশবাংলা ভাষায়
Next.js App Router-এ একটি page হলো সেই UI যা একটি নির্দিষ্ট route-এ রেন্ডার হয়। app ফোল্ডারের ভেতরে page.tsx ফাইল তৈরি করলেই route তৈরি।
প্রথম Page
app/page.tsxtsx
tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}এটি / route-এ render হবে। app/about/page.tsx তৈরি করলে /about route হবে।
Nested Routes
app/blog/[slug]/page.tsxtsx
tsx
export default async function BlogPostPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return <h1>Blog post: {slug}</h1>;
}বর্গাকার bracket [slug] দিয়ে dynamic route তৈরি হয়। /blog/my-first-post ভিজিট করলে slug হবে my-first-post।
params হলো Promise
Next.js 15+ এ params ও searchParams উভয়ই Promise। তাই ব্যবহারের আগে await করতে হবে।
Search Params
app/products/page.tsxtsx
tsx
export default async function ProductsPage({
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
const query = (await searchParams).q;
return <h1>Search results for: {query}</h1>;
}Route Props Helpers
page.tsx ও layout.tsx-এ params টাইপ লেখার জন্য Next.js global helper type দেয়:
app/blog/[slug]/page.tsxtsx
tsx
export default async function Page(props: PageProps<'/blog/[slug]'>) {
const { slug } = await props.params;
return <h1>Blog post: {slug}</h1>;
}Dynamic Routes
[...slug] দিয়ে catch-all, [[...slug]] দিয়ে optional catch-all হয়। পরবর্তী অধ্যায়ে বিস্তারিত।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।