Next.js File-based Routing কী, কিভাবে কাজ করে

Next js ফাইল বেইজড রাউটিং, React দিয়ে আপনি যখন একটি ওয়েব অ্যাপ তৈরি করেন, তখন সাধারণত আপনাকে react-router-dom প্যাকেজটি ব্যবহার করতে হয়। এই প্যাকেজের মাধ্যমে আপনাকে নিজের হাতে প্রতিটা রাউট বা URL-এর জন্য আলাদা করে কোড লিখে বলে দিতে হয়, কোন পেজে কোন কম্পোনেন্ট দেখাবে।

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

এইভাবে প্রতিটা রাউট আলাদা করে declare করতে হয়, এবং ডিরেক্টরি স্ট্রাকচার বা ফাইলের নামের সাথে URL-এর কোনো সরাসরি সংযোগ থাকে না। এটা একদিকে শক্তিশালী হলেও, নতুনদের জন্য অনেকটা অতিরিক্ত ম্যানুয়াল কাজের মতো মনে হয়।

এখানেই Next.js আপনার লাইফ সহজ করে দেয়

Next.js এ Routing এর জন্য আপনাকে আলাদা করে কোনো লাইব্রেরি ইনস্টল করতে হয় না। কারণ, Next.js এ Routing Built-in। আপনি শুধু pages ফোল্ডারে একটি ফাইল তৈরি করলেই Next.js বুঝে নেয় এই ফাইলের জন্য একটি রাউট তৈরি করতে হবে।

এটাই হচ্ছে Next.js এর File-based Routing – যার মানে, আপনার ফাইল স্ট্রাকচারই হয়ে যায় আপনার রাউট স্ট্রাকচার।

pages/
 ├── index.js
 ├── about.js
 └── contact.js

এখন আপনি ব্রাউজারে গেলে নিচের URL গুলোতে নিজে থেকেই কাজ করবে:

URL	Rendered File
/	pages/index.js
/about	pages/about.js
/contact	pages/contact.js

কোনো <Route> লিখতে হবে না। কোন পেজ কোন রাউটে যাবে – সেটা Next.js নিজেই বুঝে নেয়।

File-based Routing এর সুবিধা:

1. কোড কম লাগে

Routing লিখে সময় নষ্ট না করে আপনি সরাসরি পেজ তৈরি করতে পারেন।

2. ফোল্ডার দেখলেই বোঝা যায় কী কী রাউট আছে

ডেভেলপারদের জন্য Debug করা সহজ হয়। নতুন কেউ কোড দেখলে Structure দেখে রাউট বুঝতে পারে।

3. Nested রাউট খুব সহজ

pages/blog/post.js ফাইল মানে /blog/post রাউট — অতিরিক্ত কনফিগারেশন দরকার নেই।

4. SEO Friendly

প্রত্যেকটা পেজ আলাদা URL পায়, যেটা সার্চ ইঞ্জিনের জন্য ভালো। Static Page তৈরি করাও সহজ।

5. Dynamic Routing Built-in

Next.js এ [slug].js নামের ফাইল দিলেই আপনি /blog/my-article এর মতো ডাইনামিক রাউট হ্যান্ডেল করতে পারেন। এ নিয়ে আমরা পরবর্তী অংশে বিস্তারিত জানবো।

অনেক নতুন ডেভেলপার রাউটিং সেটআপ করতে গিয়ে React এ আটকে যায় – কখন BrowserRouter লাগবে, কখন Routes, কখন Link।

Next.js সেই সমস্যা দূর করে দিয়ে বলে:
“Just create a file, and I’ll handle the rest.”

এতে আপনার সময় বাঁচে, কোড কম লাগে, আর আপনি অ্যাপের লজিকে মনোযোগ দিতে পারেন।

Dynamic Routing – যখন route ভ্যারিয়েবল হয়

ধরুন আপনি একটা ব্লগ বানাচ্ছেন যেখানে প্রতিটা পোস্ট আলাদা আলাদা URL এ যাবে:

/blog/post/first-post
/blog/post/second-post
/blog/post/third-post

এখন যদি আপনি প্রতিটা URL এর জন্য আলাদা আলাদা ফাইল বানান — তাহলে তা অসম্ভব হয়ে যাবে।

এই সমস্যা সমাধানে Next.js দেয় Dynamic Routes।

কীভাবে করবেন?

আপনাকে শুধু [slug].js নামে একটি ফাইল বানাতে হবে:

pages/blog/[slug].js

এখানে slug হচ্ছে ভ্যারিয়েবল নাম। এখন /blog/something যাই হোক না কেন, সেই রাউটে রেন্ডার হবে এই [slug].js ফাইল।

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>This is blog post: {slug}</h1>;
}

Catch-All Routing – যখন একাধিক সেগমেন্ট ধরে ফেলতে হয়

ধরুন আপনি চান /docs/anything/goes/here – এইভাবে যত লেভেলের পাথ আসুক না কেন, এক ফাইলে হ্যান্ডেল করবেন।

সমাধান:

pages/docs/[...params].js

এখানে ...params একটা catch-all route। এটা একাধিক URL সেগমেন্ট ধরে ফেলে।

import { useRouter } from 'next/router';

export default function Docs() {
  const router = useRouter();
  const { params = [] } = router.query;

  return (
    <div>
      <h1>Docs Route</h1>
      <p>URL Segments: {params.join(' / ')}</p>
    </div>
  );
}

Optional Catch-All Routing

কখনো কখনো আপনি চাইবেন – কিছু URL হোক ডাইনামিক, কিছু হোক ফিক্সড।

এই ক্ষেত্রে আপনি ব্যবহার করতে পারেন:
[[...params]].js

উদাহরণ:

pages/docs/[[...params]].js
এটি /docs, /docs/one, /docs/one/two – সব হ্যান্ডেল করতে পারবে।

Link Component দিয়ে Navigate করুন

Next.js এ route পরিবর্তনের জন্য <Link> কম্পোনেন্ট ব্যবহার করতে হয়।

import Link from 'next/link';

<Link href="/about">About Us</Link>

আপনি চাইলে ডাইনামিক রাউটেও এইভাবে Navigate করতে পারেন:

<Link href={`/blog/${slug}`}>Read More</Link>

File-based Routing Next.js এর সবচেয়ে দারুণ ফিচারগুলোর একটি। এটা আপনাকে:

• কম কোডে দ্রুত রাউটিং
• সহজভাবে ডাইনামিক পেজ তৈরি
• SEO বান্ধব URL তৈরি
• Clean folder-based structure দেয়

আপনি যত বেশি প্র্যাকটিস করবেন, এই রাউটিং সিস্টেম তত সহজ মনে হবে। আর এই স্কিল থাকলে বড় বড় প্রজেক্টেও কাজ করা অনেক সহজ হবে।

Technology এর সকল আপডেট সবার আগে বিস্তারিত পেতে চেক করুন