Learn Next JS
App Router
01-getting-started
Layouts and Pages

Next.js এ Routing, Page আর Layout সহজভাবে

Next.js এ ফাইল আর ফোল্ডার বানালেই রুট তৈরি হয়।
app ফোল্ডারের ভেতরে ফাইল রাখলেই URL তৈরি হয়ে যায়।

এই টিউটোরিয়ালে আপনি শিখবেন:

  1. কিভাবে Page বানাবেন।
  2. কিভাবে Layout বানাবেন।
  3. এগুলো দিয়ে Blog App বানানো যায় কিভাবে।

১. Page কীভাবে বানাবেন

Page মানে, কোনো URL-এ গেলে যে জিনিস দেখাবে।

👉 ধরুন, আপনি হোমপেজ (/) বানাতে চান।
app ফোল্ডারের ভেতরে page.js ফাইল বানান।

app/page.js
export default function Page() {
  return <h1>আমার ব্লগে স্বাগতম!</h1>;
}

এখন ব্রাউজারে / এ গেলে আপনি এই লেখা দেখবেন:
"আমার ব্লগে স্বাগতম!"

➡️ একইভাবে, /about রুট বানাতে চাইলে app/about/page.js ফাইল বানান।

app/about/page.js
export default function AboutPage() {
  return <h1>এই ব্লগ সম্পর্কে</h1>;
}

২. Layout কীভাবে বানাবেন

Layout মানে, যেসব জিনিস সব পেজে একই থাকবে।
যেমন Header, Footer, Sidebar।

Layout বানাতে layout.js ফাইল বানান।
এখানে React component লিখুন, যেখানে children থাকবে।

app/layout.js
export default function BlogLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h2>My Blog</h2>
          <nav>
            <a href="/">হোম</a> | <a href="/about">আমাদের সম্পর্কে</a> |{" "}
            <a href="/posts">সব পোস্ট</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>© 2025 My Blog. সর্বস্বত্ব সংরক্ষিত।</p>
        </footer>
      </body>
    </html>
  );
}

এখানে Header, Footer সব পেজে থাকবে।
children যেখানে থাকবে, সেখানে পেজের কনটেন্ট দেখাবে।

৩. Blog App Example

এবার /posts নামে পেজ বানান।
এখানে ব্লগ পোস্টের লিস্ট থাকবে।

app/posts/page.js
export default function PostsPage() {
  return (
    <div>
      <h1>সব ব্লগ পোস্ট</h1>
      <ul>
        <li>👉 Next.js কীভাবে কাজ করে?</li>
        <li>👉 React Hook সহজভাবে বোঝা</li>
        <li>👉 Tailwind CSS দিয়ে ডিজাইন</li>
      </ul>
    </div>
  );
}

এখন /posts রুটে গেলে আপনি সব পোস্টের লিস্ট দেখবেন।

সংক্ষেপে

  • page.js = পেজ বানাতে।
  • layout.js = সব পেজে কমন ডিজাইন রাখতে।
  • children = যেখানে পেজের কনটেন্ট বসবে।

এভাবে আপনি Next.js দিয়ে Blog App বানাতে পারবেন।

Nested Route সহজ ভাষায়

ভাবুন, আপনি ব্লগ ওয়েবসাইট বানাচ্ছেন।
প্রথমে হোমপেজ বানালেন → /
তারপর ব্লগ সেকশন বানালেন → /blog
এখন প্রতিটি ব্লগ পোস্টের জন্য আলাদা পেজ চান।

  • /blog/first-post
  • /blog/nextjs-routing
  • /blog/my-life-story

এটাই Nested Route।
মানে, URL-এ একটার ভেতরে আরেকটা অংশ।

Nested Route কীভাবে বানাবেন

Folder আর File দিয়ে Nested Route বানানো হয়।

  • Folder মানে Route Segment।
  • File (page.js/layout.js) মানে ওই Segment-এ কী দেখাবে।

ধাপ ১: /blog রুট বানান

app ফোল্ডারের ভেতরে blog নামে ফোল্ডার বানান।
এর ভেতরে page.js বানান।

app/blog/page.js
export default function BlogPage() {
  return (
    <div>
      <h1>সব ব্লগ পোস্ট</h1>
      <ul>
        <li>
          <a href="/blog/first-post">👉 প্রথম ব্লগ পোস্ট</a>
        </li>
        <li>
          <a href="/blog/nextjs-routing">👉 Next.js Routing শেখা</a>
        </li>
        <li>
          <a href="/blog/my-life-story">👉 আমার জীবনের গল্প</a>
        </li>
      </ul>
    </div>
  );
}

এখন /blog রুটে গেলে সব পোস্টের লিস্ট দেখবেন।

ধাপ ২: Dynamic Nested Route [slug]

প্রতিটি ব্লগ পোস্ট আলাদা পেজে দেখাতে চাইলে,
blog ফোল্ডারের ভেতরে [slug] নামে ফোল্ডার বানান।

app/blog/[slug]/page.js
export default function BlogPostPage({ params }) {
  return (
    <div>
      <h1>এটি একটি ব্লগ পোস্ট</h1>
      <p>আপনি এখন পড়ছেন: {params.slug}</p>
    </div>
  );
}

এখন /blog/first-post এ গেলে দেখাবে:
"আপনি এখন পড়ছেন: first-post"

গল্প দিয়ে বোঝা

ভাবুন, আপনার বাড়ি একটা গ্রাম।
Root / = বাড়ির গেট
/blog = উঠোন, যেখানে সব গল্প
/blog/[slug] = প্রতিটি ঘর, যেখানে নির্দিষ্ট গল্প

উঠোনে গেলে সব গল্পের নাম দেখবেন।
নাম চাপলে নির্দিষ্ট ঘরে ঢুকে গল্প পড়বেন।

সংক্ষেপে

  1. Folder = Route বানায়।
  2. page.js = UI দেখায়।
  3. Nested Folder = Nested Route।
  4. [slug] Folder = Dynamic Route, প্রতিটি পোস্ট আলাদা URL পায়।

ডাটাবেস বা API থেকে ডাটা আনা

এখানে আমরা Fake API ব্যবহার করবো।

[
  {
    "id": 1,
    "title": "Next.js Routing শেখা",
    "slug": "nextjs-routing",
    "content": "এখানে আমরা Next.js routing সম্পর্কে শিখবো..."
  },
  {
    "id": 2,
    "title": "React Hook সহজভাবে",
    "slug": "react-hooks",
    "content": "React Hook খুব সহজভাবে ব্যবহার করা যায়..."
  }
]

/blog পেজে সব পোস্ট দেখানো

app/blog/page.js
async function getPosts() {
  const res = await fetch("https://example.com/api/posts");
  return res.json();
}
 
export default async function BlogPage() {
  const posts = await getPosts();
 
  return (
    <div>
      <h1>সব ব্লগ পোস্ট</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

এখন /blog রুটে গেলে সব পোস্টের নাম দেখবেন।
ক্লিক করলে /blog/[slug] এ যাবেন।

Dynamic Route দিয়ে একক পোস্ট দেখানো

app/blog/[slug]/page.js
async function getPost(slug) {
  const res = await fetch(`https://example.com/api/posts/${slug}`);
  return res.json();
}
 
export default async function BlogPostPage({ params }) {
  const post = await getPost(params.slug);
 
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

এখন /blog/nextjs-routing এ গেলে দেখাবে
"Next.js Routing শেখা" পোস্টের বিস্তারিত।

Nested Layouts + Dynamic Segments

১. Nested Layout কী?

সব পেজে হেডার-ফুটার থাকবে।
/blog route-এর জন্য আলাদা সেকশন লাগবে।

Nested Layout মানে:
বড় লেআউটের ভিতরে ছোট লেআউট থাকে।

Root Layout → Blog Layout → Blog Page

JS কোড উদাহরণ

Root Layout (app/layout.js)

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>আমার ব্লগের হেডার</header>
        {children}
        <footer>ফুটার</footer>
      </body>
    </html>
  );
}

Blog Layout (app/blog/layout.js)

export default function BlogLayout({ children }) {
  return (
    <section>
      <h2>Blog Section</h2>
      {children}
    </section>
  );
}

এখন /blog route-এর পেজ এবং প্রতিটি পোস্ট
Blog Layout এর ভিতরে, আর Blog Layout আবার Root Layout এর ভিতরে থাকবে।

Dynamic Segment কী?

অনেক পোস্ট থাকলে,
প্রতিটি পোস্টের জন্য আলাদা route বানানো কঠিন।

এখানে Dynamic Segment ব্যবহার করুন।
Folder name-এ [slug] লিখে dynamic route বানান।

Folder Structure

app/
 └─ blog/
     ├─ page.js          // ব্লগ লিস্ট দেখাবে
     └─ [slug]/
         └─ page.js      // ব্লগ পোস্ট দেখাবে

Blog Post Page

export default async function BlogPostPage({ params }) {
  const { slug } = params;
  const post = await getPost(slug);
 
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

Linking Between Pages

Next.js-এ <Link> ব্যবহার করলে
পেজ দ্রুত লোড হয়, client-side navigation হয়।

import Link from "next/link";
 
export default async function PostList() {
  const posts = await getPosts();
 
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

Route Props Helpers

Next.js এ কিছু helper আছে,
যা route থেকে props নিতে সহজ করে।

  • PageProps → পেজের params ও searchParams।
  • LayoutProps → লেআউটের children ও named slots।
// app/blog/[slug]/page.jsx
export default async function Page(props) {
  const { slug } = await props.params;
  return <h1>Blog post: {slug}</h1>;
}

মনে রাখবেন

  • Static routes → params সাধারণত {}।
  • PageProps ও LayoutProps → global helper, import দরকার নেই।
  • Types generate হয় next dev, next build বা next typegen চালালে।
Project Structure and OrganizationLinking and Navigating
© 2025 React JS Bangla Tutorial.