আগের পর্বে দেখেছিলাম app/page.js-ই হোমপেজ। কিন্তু বাস্তব সাইটে একাধিক পেজ লাগে — About, Blog, Contact। React এর হাতেখড়ি সিরিজে এই কাজের জন্য react-router-এর মতো আলাদা লাইব্রেরি লাগত। Next.js-এ এটা সম্পূর্ণ ভিন্ন, অনেক সহজ একটা নিয়মে চলে — ফোল্ডার স্ট্রাকচারই রাউট।
মূল নিয়ম — ফোল্ডার = URL path
app/-এর ভেতরে একটা ফোল্ডার বানিয়ে সেখানে page.js রাখলেই সেই ফোল্ডারের নামে একটা নতুন URL তৈরি হয়ে যায় — কোনো রাউট কনফিগারেশন ফাইল লাগে না।
app/
├── page.js → "/"
├── about/
│ └── page.js → "/about"
├── contact/
│ └── page.js → "/contact"
└── blog/
└── page.js → "/blog"
// app/about/page.js
export default function AboutPage() {
return (
<div>
<h1>আমাদের সম্পর্কে</h1>
<p>ArifStack একটা বাংলা প্রোগ্রামিং শেখার প্ল্যাটফর্ম।</p>
</div>
);
}
এই ফাইলটা বানালেই localhost:3000/about-এ সাথে সাথে অ্যাক্সেসযোগ্য হয়ে যাবে — কোনো রাউট রেজিস্টার করতে হয় না, যা React এর হাতেখড়ি সিরিজের <Route path="/about">-এর মতো ম্যানুয়াল সেটআপের চেয়ে অনেক সহজ।
Link দিয়ে নেভিগেশন
সাধারণ <a href> ব্যবহার করলে পুরো পেজ রিলোড হয়ে যায় — Next.js-এর Link কম্পোনেন্ট ব্যবহার করলে শুধু দরকারি অংশটুকু বদলায়, পুরো পেজ রিলোড ছাড়াই — অনেকটা React এর হাতেখড়ি সিরিজের SPA-স্টাইল নেভিগেশনের মতোই, কিন্তু বিল্ট-ইন।
// app/layout.js
import Link from "next/link";
export default function RootLayout({ children }) {
return (
<html lang="bn">
<body>
<nav>
<Link href="/">হোম</Link>
<Link href="/about">আমাদের সম্পর্কে</Link>
<Link href="/blog">ব্লগ</Link>
</nav>
{children}
</body>
</html>
);
}
নেস্টেড রুট
ফোল্ডারের ভেতর ফোল্ডার দিলেই নেস্টেড URL তৈরি হয় — যেমন /blog/tutorials।
app/
└── blog/
├── page.js → "/blog"
└── tutorials/
└── page.js → "/blog/tutorials"
Dynamic Routes — ডাইনামিক URL সেগমেন্ট
একটা ব্লগ পোস্টের জন্য প্রতিটা পোস্টে আলাদা page.js বানানো অবাস্তব — এর বদলে স্কয়ার ব্র্যাকেট দিয়ে একটা ডাইনামিক সেগমেন্ট বানানো যায়।
app/
└── blog/
└── [slug]/
└── page.js → "/blog/যেকোনো-কিছু"
// app/blog/[slug]/page.js
export default function BlogPost({ params }) {
return (
<div>
<h1>পোস্ট: {params.slug}</h1>
</div>
);
}
// /blog/firebase-part-1 ভিজিট করলে params.slug === "firebase-part-1"
// /blog/react-part-5 ভিজিট করলে params.slug === "react-part-5"
এখানে params — একটা props অবজেক্ট, যা Next.js নিজে থেকেই URL থেকে বের করে পাঠিয়ে দেয়। এটা ঠিক Firebase এর হাতেখড়ি পর্ব ৮-এর Security Rules-এর $bookId wildcard-এর মতোই একটা ধারণা — যেকোনো মান বসতে পারে, আর সেটা কোডে অ্যাক্সেসযোগ্য হয়।
একাধিক লেআউট — নেস্টেড layout.js
পর্ব ১-এ app/layout.js ছিল রুট লেআউট, পুরো সাইটে প্রযোজ্য। কিন্তু নির্দিষ্ট সেকশনের জন্য (যেমন /blog) আলাদা একটা লেআউট (যেমন সাইডবার সহ) বানানো যায় — এই লেআউটগুলো একে অপরের ভেতরে বাসা বাঁধে (nest করে)।
app/
├── layout.js # রুট লেআউট (হেডার, ফুটার) — সব পেজে
└── blog/
├── layout.js # ব্লগ-নির্দিষ্ট লেআউট (সাইডবার) — শুধু /blog/* -এ
├── page.js # /blog
└── [slug]/
└── page.js # /blog/[slug]
// app/blog/layout.js
export default function BlogLayout({ children }) {
return (
<div style={{ display: "flex" }}>
<aside>
<h3>ক্যাটাগরি</h3>
<p>JavaScript, React, Firebase...</p>
</aside>
<main>{children}</main>
</div>
);
}
/blog/firebase-part-1 ভিজিট করলে — প্রথমে রুট layout.js (হেডার-ফুটার), তার ভেতরে blog/layout.js (সাইডবার), তার ভেতরে [slug]/page.js — এভাবে তিনটা স্তর একসাথে বসে।
ইন্টারেক্টিভ — File Tree থেকে URL বানাও
নিচে একটা ফোল্ডার স্ট্রাকচার দেওয়া আছে — ক্লিক করে দেখো প্রতিটা page.js কোন URL-এ পরিণত হয়।
ভালো অভ্যাস
- নেভিগেশনে সবসময়
Linkব্যবহার করুন, সাধারণ<a>না — নাহলে পুরো পেজ রিলোড হয়ে পারফরম্যান্স সুবিধা হারিয়ে যায় - ডাইনামিক রুটে param-এর নাম অর্থবহ রাখুন —
[slug],[bookId], শুধু[id]না — কোড পড়া সহজ হয় - প্রতিটা সেকশনের নিজস্ব লেআউট দরকার কিনা ভাবুন — সবসময় নতুন লেআউট না বানিয়ে, দরকার হলেই নেস্টেড লেআউট ব্যবহার করুন
নিজে চেষ্টা করো
Exercise:
- নিজের প্রজেক্টে
/aboutআর/contactপেজ বানাও,Linkদিয়ে নেভিগেশন যোগ করো। - একটা
/blog/[slug]ডাইনামিক রুট বানাও, বিভিন্ন slug দিয়ে ভিজিট করেparamsকীভাবে বদলায় দেখো। /blog-এর জন্য একটা আলাদাlayout.jsবানাও একটা সাইডবার সহ, দেখো এটা শুধু blog সেকশনেই প্রযোজ্য হয়।
পরের পর্বে যা থাকছে
পরের পর্বে আমরা শিখব Server Components vs Client Components — Next.js-এর সবচেয়ে গুরুত্বপূর্ণ কনসেপ্টগুলোর একটা, কোন কম্পোনেন্ট সার্ভারে চলে, কোনটা ব্রাউজারে, আর কখন "use client" লিখতে হয়।