Next.js App Router — file routing, layout আর navigation

১ · Meta-framework কী যোগ করে: Vite + React Router থেকে Next.js

পর্ব ২০-এ “বাজারঘর” একটি SPA ছিল। Vite একটি ফাঁকা HTML আর JavaScript-এর bundle বানাত। তারপর browser সেই JavaScript চালিয়ে পর্দা আঁকত। Route-এর তালিকা আমরা নিজের হাতে লিখেছিলাম। ডেটার জন্য loader লিখেছিলাম। Backend ছিল আলাদা Express server (মডিউল ৪)। আর cPanel-এ তোলার সময় .htaccess-এ SPA fallback বসাতে হয়েছিল।

এই প্রতিটি সিদ্ধান্ত আপনি নিজে নিয়েছিলেন, আর প্রতিটির জোড়া নিজে লাগিয়েছিলেন। Meta-framework মানে React-এর ওপরে আরেকটি স্তর, যা এই জোড়াগুলো আগে থেকেই লাগিয়ে দেয়: routing, server-এ render, ডেটা আনা, build আর server চালানো। Next.js এমন সবচেয়ে প্রচলিত meta-framework. React-এর নিজের docs-ও নতুন অ্যাপ শুরু করতে এমন framework-এর পরামর্শ দেয়।

লাভের সাথে দামও আছে। Next.js-এর নিয়ম শিখতে হয়। Server চালানোর জায়গা লাগে, তাই সাধারণ shared hosting-এ সব সুবিধা পাওয়া যায় না। আর framework যত কাজ নিজে করে, ভুল হলে খুঁজে বের করাও তত কঠিন। React Router-এর framework mode, Remix-এর উত্তরসূরি হিসেবে, প্রায় একই জায়গায় দাঁড়িয়ে। Vue-র জন্য Nuxt আছে (পর্ব ৬৬)। কোনটি “সেরা”, তা নিয়ে community-তে মতভেদ আছে। Rendering-এর মূল মানচিত্র পর্ব ০৩-এ দেখেছেন, এখানে আবার শেখানো হবে না।

২ · create-next-app: সত্যিকারের run আর তৈরি হওয়া folder

লেখার সময়ে (নভেম্বর ২০২৬) npm-এ next-এর latest হলো 16.4.4, সাথে React 19.3.0. Project তৈরির জন্য আছে scaffold tool create-next-app. প্রশ্ন না করে default নিতে --yes দিয়েছি। Node.js 24-এ সত্যিকারের run (path বদলে ~/bazarghar লেখা হয়েছে, লম্বা অংশ “…” দিয়ে ছাঁটা):

npx create-next-app@16.4.4 bazarghar --yes --disable-git --use-npm
cd bazarghar
npm run build

Creating a new Next.js app in ~/bazarghar.
Using npm.
Initializing project with template: app-tw

Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/turbopack
- @types/node
…
- typescript

added 359 packages, and audited 360 packages in 4m
…
Generating route types...
✓ Types generated successfully

Skipping git initialization.

Success! Created bazarghar at ~/bazarghar

--disable-git না দিলে tool নিজে থেকে একটি git repository-ও খোলে। তৈরি হওয়া folder-টি এমন:

bazarghar/
├── AGENTS.md            ← AI coding agent-এর জন্য নির্দেশনা (অংশ ১০)
├── README.md
├── app/                 ← সব route এখানে
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx       ← root layout: <html> আর <body>
│   └── page.tsx         ← "/" ঠিকানার পাতা
├── eslint.config.mjs
├── next-env.d.ts        ← Next.js-এর type, হাতে বদলাবেন না
├── next.config.ts
├── package.json
├── package-lock.json
├── public/              ← ছবি ইত্যাদি, যেমন আছে তেমন পরিবেশিত
└── tsconfig.json

দুটি file-এ চোখ রাখুন। app/layout.tsx হলো root layout: পুরো সাইটের বাইরের খোলস, আর <html> ও <body> ট্যাগ লেখার একমাত্র জায়গা। আর next.config.ts-এ এই version-এর template দুটি জিনিস চালু করে রেখেছে:

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  // turbopack: { …Tailwind-এর loader… }
};

Cache Components ঠিক করে কোন অংশ build-এর সময় তৈরি থাকবে আর কোনটি request-এর সময় stream হবে। এর পুরো আলোচনা পর্ব ৫৩ আর ৫৫-এর। Partial Prefetching ঠিক করে link-এর পেছনে আগেভাগে কতটুকু আনা হবে, যা অংশ ৭-এ দেখব। এই পর্বে শুধু একটি প্রভাব মনে রাখুন: এই default-এ যে route request-এর তথ্য (params, searchParams, usePathname) পড়ে, তার চারপাশে loading.tsx বা <Suspense> লাগে। না দিলে কী হয়, তা আমাদের প্রথম build-ই দেখিয়েছে:

Error: Route "/category/[...slug]": Next.js encountered URL data `usePathname()` in a Client Component outside of `<Suspense>`.

This blocks prerendering because the value is only available at runtime.
…
Export encountered an error on /(shop)/category/[...slug]/page: /category/[...slug], exiting the build.

Error-বার্তাটি নিজেই দুটি পথ বলে দিচ্ছে: অংশটিকে <Suspense>-এ মুড়ে stream করা, অথবা route-টিকে ইচ্ছা করে blocking ঘোষণা করা। এমন পরিষ্কার বার্তা পেলে AI-কে জিজ্ঞেস করার আগে বার্তাটি নিজে পড়ে দেখা ভালো অভ্যাস। আমরা প্রথম পথ নিয়েছি।

Header-এর menu-কে <Suspense>-এ মুড়ে আর দুটি route-এ loading.tsx যোগ করে build সফল হলো। npm run dev চালালে development server চালু হয়। Next.js 16 থেকে next dev আর next build দুটোই default হিসেবে Turbopack bundler ব্যবহার করে।

৩ · app folder: folder মানে segment, page মানে প্রকাশ্য

URL-কে / দিয়ে ভাঙলে প্রতিটি টুকরোকে বলে route segment. /account/orders-এ দুটি segment: account আর orders. App Router-এর মূল নিয়ম এক লাইনের: app/-এর ভেতরের প্রতিটি folder একটি segment, আর সেই folder-এ page.tsx থাকলে তবেই ঠিকানাটি প্রকাশ্য। একে বলে file-based routing.

প্রতিটি folder-এ কয়েকটি নির্দিষ্ট নামের file রাখা যায়। Next.js এগুলোকে React-এর বিশেষ জিনিসে বদলে নেয়:

এছাড়া আছে default.tsx (অংশ ৮), global-error.tsx (root layout-এর error), আর route.ts, যা পাতার বদলে API দেয় (পর্ব ৫৭)। এই file-গুলো একটি নির্দিষ্ট ক্রমে একটির ভেতরে আরেকটি বসে। ক্রমটি Next.js-এর docs-এ লেখা, আর ছবিতে তা এমন:

এর একটি জরুরি ফল আছে। একই folder-এর error.tsx নিজের পাশের layout.tsx-এর error ধরতে পারে না, কারণ layout তার বাইরে বসে। Layout-এর error ধরে বাবা segment-এর error.tsx. আর root layout-এর error ধরতে আলাদা global-error.tsx লাগে। Error boundary আর Suspense-এর মূল ধারণা পর্ব ২৩-এ দেখেছেন।

Nested route-এ এই ছয় ভাঁজ প্রতিটি segment-এ বারবার বসে, বাবার ভাঁজের ভেতরে সন্তানের ভাঁজ। “বাজারঘর”-এ একটি URL কীভাবে file-এ বদলায়, তা ধাপে ধাপে দেখুন:

GET /products/2

["products", "2"]

app/                     layout.tsx, not-found.tsx
└ (shop)/               layout.tsx, @modal/default.tsx
  └ products/           loading.tsx
    └ [id]/               page.tsx, error.tsx, not-found.tsx
"2" কোনো স্থির folder-এর নাম নয়, তাই [id]-এ মেলে

<RootLayout>
  <ShopLayout modal={<Default />}>
    <Suspense fallback={<Loading />}>        products/
      <ErrorBoundary fallback={ProductError}> [id]/
        <NotFoundBoundary>
          <ProductPage params={Promise} />

await params  →  { id: "2" }
h1            =  মসুর ডাল ১ কেজি

৪ · Dynamic segment, catch-all আর async params

সব পণ্যের জন্য আলাদা folder বানানো অসম্ভব। Folder-এর নাম বন্ধনীতে লিখলে সেটি dynamic segment হয়, অর্থাৎ ওই জায়গায় যা আসবে তা-ই মান। তিন রকম আছে:

এবার “বাজারঘর”-এর আসল পণ্যের পাতা। এটি সত্যিকারের project-এর file, হুবহু:

import { notFound } from "next/navigation";
import { findProduct, products } from "../../../_lib/products";

export async function generateStaticParams() {
  return products.map((p) => ({ id: String(p.id) }));
}

export default async function ProductPage({ params }: PageProps<"/products/[id]">) {
  const { id } = await params;
  const product = findProduct(id);
  if (!product) notFound();
  console.log("[render] ProductPage id=" + id);
  return (
    <article>
      <h1>{product.name}</h1>
      <p>দাম: ৳{product.price}</p>
    </article>
  );
}

console.log লাইনটি আমাদের পরীক্ষার জন্য রাখা, যাতে কোন পাতা কখন render হলো তা log-এ দেখা যায়। আসল project-এ এমন log structured logger দিয়ে লেখা ভালো (পর্ব ৩১)। এবার চারটি জিনিস খেয়াল করুন।

• async function আর await params: Next.js 15 থেকে params আর searchParams হলো Promise. 15-এ পুরোনো sync পথ সাময়িকভাবে চলত। 16-এ তা পুরোপুরি বাদ। পুরোনো ঢঙে params.id লিখে আমাদের tsc চালালে এই error আসে:

  error TS2339: Property 'id' does not exist on type 'Promise<{ id: string; }>'.

• PageProps<"/products/[id]">: এই type কোথাও import করতে হয় না। next dev, next build বা next typegen folder দেখে এটি নিজে বানায়। ফলে route-এর নাম ভুল লিখলে TypeScript ধরে ফেলে।
• notFound(): পণ্য না পেলে এটি ডাকা হয়। এটি একটি বিশেষ error ছুড়ে দেয়, তাই এর পরের লাইন আর চলে না। কাছের not-found.tsx দেখায়।
• generateStaticParams: build-কে জানায় কোন কোন id-এর পাতা আগেই বানিয়ে রাখা যায়। বাকি id request-এর সময় তৈরি হয়। এর বিস্তারিত পর্ব ৫৫-এ।

Client Component-এ (যেখানে async চলে না) একই Promise খুলতে React-এর use(params), অথবা যেকোনো গভীরতা থেকে useParams() hook ব্যবহার করা যায়। searchParams-ও একইভাবে await করে পড়তে হয়, যা অংশ ৭-এ দেখবেন। Promise আর await-এর ভিত্তি JavaScript কোর্সে আছে।

এবার মূল ধারণাটি নিজের হাতে চালান। এটি একটি শেখার মডেল, আসল Next.js নয়: file-এর একটি তালিকা থেকে route বানায়, route group আর private folder বাদ দেয়, তারপর URL মিলিয়ে params বের করে।

// শেখার মডেল: app/ folder-এর file তালিকা থেকে route, তারপর URL মেলানো
const files = ['app/page.tsx', 'app/layout.tsx', 'app/(shop)/layout.tsx',
  'app/(shop)/products/page.tsx', 'app/(shop)/products/new/page.tsx',
  'app/(shop)/products/[id]/page.tsx', 'app/(shop)/category/[...slug]/page.tsx',
  'app/help/[[...topic]]/page.tsx', 'app/_lib/page.tsx', 'app/_lib/products.ts'];

function toRoute(file) {
  const parts = file.split('/').slice(1);
  const name = parts.pop();
  if (!/^page\.(tsx|jsx|ts|js)$/.test(name)) return null;     // শুধু page
  if (parts.some((p) => p.startsWith('_'))) return null;       // private folder
  return '/' + parts.filter((p) => !/^\(.+\)$/.test(p)).join('/'); // group বাদ
}
const kind = (s) => s.startsWith('[[...') ? 3 : s.startsWith('[...') ? 2 : s.startsWith('[') ? 1 : 0;
const segs = (r) => r.split('/').filter(Boolean);
const key = (r) => segs(r).map(kind).join('');      // 0 স্থির, 1 [id], 2 [...], 3 [[...]]
const routes = files.map(toRoute).filter(Boolean).sort((x, y) => (key(x) < key(y) ? -1 : 1));
console.log(routes.join('  '));

function match(route, url) {
  const a = segs(route), b = segs(url), params = {};
  for (let i = 0; i < a.length; i++) {
    const s = a[i], k = kind(s);
    if (k >= 2) { const rest = b.slice(i); if (k === 2 && !rest.length) return null;
      params[s.replace(/[[\].]/g, '')] = rest.length ? rest : null; return params; }
    if (i >= b.length) return null;
    if (k === 1) params[s.slice(1, -1)] = b[i]; else if (s !== b[i]) return null;
  }
  return a.length === b.length ? params : null;
}
for (const url of ['/products/new', '/products/2', '/category/grocery/rice', '/help', '/help/payment/bkash', '/shop/products', '/_lib']) {
  const hit = routes.find((r) => match(r, url));
  console.log(url.padEnd(22), '->', hit ?? '404', hit ? JSON.stringify(match(hit, url)) : '');
}

/  /products  /products/new  /products/[id]  /category/[...slug]  /help/[[...topic]]
/products/new          -> /products/new {}
/products/2            -> /products/[id] {"id":"2"}
/category/grocery/rice -> /category/[...slug] {"slug":["grocery","rice"]}
/help                  -> /help/[[...topic]] {"topic":null}
/help/payment/bkash    -> /help/[[...topic]] {"topic":["payment","bkash"]}
/shop/products         -> 404 
/_lib                  -> 404

৫ · Route group, private folder আর colocation

“বাজারঘর”-এর দোকানের পাতাগুলোর (পণ্য, বিভাগ) বাঁ পাশে একটি ঝুড়ির বোতাম চাই, কিন্তু অ্যাকাউন্টের পাতায় চাই না। আবার URL-এ /shop/products লিখতেও চাই না। সমাধান route group: folder-এর নাম গোল বন্ধনীতে, (shop). এটি folder গোছায় আর নিজের layout.tsx রাখতে দেয়, কিন্তু URL-এ কোনো টুকরো যোগ করে না।

আর যে file route নয়, যেমন ডেটার module বা ছোট component, সেগুলো private folder-এ রাখা যায়: নামের শুরুতে _, যেমন _lib, _components. আসলে page না থাকলে কোনো folder এমনিতেই প্রকাশ্য নয়, তাই route-এর পাশে file রাখা, অর্থাৎ colocation, নিরাপদ। _ উপসর্গটি শুধু পরিষ্কারভাবে বলে দেয়, “এখানে কখনো route হবে না”, আর ভবিষ্যতের কোনো বিশেষ file-নামের সাথে সংঘাত এড়ায়।

app/
├── layout.tsx              সবার খোলস: header, menu
├── page.tsx                /
├── not-found.tsx
├── _lib/products.ts        ডেটা, route নয়
├── _components/            nav-links, cart-counter, modal …
├── (shop)/
│   ├── layout.tsx          ঝুড়ির বোতাম + @modal slot
│   ├── @modal/             অংশ ৮
│   ├── products/           /products, /products/[id]
│   └── category/[...slug]/ /category/…
├── account/                layout.tsx, template.tsx, orders/, profile/
├── help/[[...topic]]/
└── offers/page.tsx         redirect

Segment থেকে breadcrumb

Catch-all-এর একটি রোজকার ব্যবহার হলো breadcrumb: “হোম › বিভাগ › মুদি › চাল”. প্রতিটি segment একটি ধাপ, আর প্রতিটির link হলো শুরু থেকে ওই segment পর্যন্ত জোড়া path. নিচের শেখার মডেলটি সেই হিসাব করে। বাংলা নামের segment URL-এ শতাংশ চিহ্ন দিয়ে encode হয়ে আসে, তাই লেখাটি দেখানোর আগে decode করতে হয়।

// শেখার মডেল: URL-এর segment থেকে breadcrumb
const labels = { products: 'পণ্য', category: 'বিভাগ', grocery: 'মুদি', rice: 'চাল' };

function crumbs(url) {
  const pathname = url.split(/[?#]/)[0];               // query আর hash বাদ
  const parts = pathname.split('/').filter(Boolean);
  const out = [{ label: 'হোম', href: '/' }];
  parts.forEach((s, i) => {
    const raw = decodeURIComponent(s);                 // %E0%A6... থেকে বাংলা
    out.push({ label: labels[raw] ?? raw, href: '/' + parts.slice(0, i + 1).join('/') });
  });
  return out;
}

for (const url of ['/category/grocery/rice', '/products/2?ref=fb',
  '/category/%E0%A6%AE%E0%A6%BE%E0%A6%9B']) {
  const c = crumbs(url);
  console.log(c.map((x) => x.label).join(' › '));
  console.log('   hrefs:', c.map((x) => x.href).join(' '), '| aria-current:', c.at(-1).label);
}

হোম › বিভাগ › মুদি › চাল
   hrefs: / /category /category/grocery /category/grocery/rice | aria-current: চাল
হোম › পণ্য › 2
   hrefs: / /products /products/2 | aria-current: 2
হোম › বিভাগ › মাছ
   hrefs: / /category /category/%E0%A6%AE%E0%A6%BE%E0%A6%9B | aria-current: মাছ

৬ · Nested layout টিকে থাকে, template নতুন করে বসে

React Router-এর <Outlet> মনে আছে? Next.js-এ তার জায়গায় আছে children prop. প্রতিটি layout.tsx নিচের segment-কে children হিসেবে পায়। “বাজারঘর”-এর অ্যাকাউন্ট অংশ:

import Link from "next/link";
import VisitCounter from "../_components/visit-counter";

export default function AccountLayout({ children }: LayoutProps<"/account">) {
  console.log("[render] AccountLayout");
  return (
    <section>
      <h2>আমার অ্যাকাউন্ট</h2>
      <nav>
        <Link href="/account/orders">অর্ডার</Link> <Link href="/account/profile">প্রোফাইল</Link>
      </nav>
      <VisitCounter label="layout" />
      {children}
    </section>
  );
}

VisitCounter একটি ছোট Client Component, যার ভেতরে useState দিয়ে একটি সংখ্যা আছে আর mount হলে console-এ লেখে। একই component app/account/template.tsx-এও বসানো। তারপর Edge browser-এ Playwright দিয়ে production build চালিয়ে দুটি বোতাম চেপে পাশের পাতায় গিয়েছি:

1// app/account/layout.tsx2function AccountLayout({ children }) {3  <VisitCounter label="layout" />{children}4}5// app/account/template.tsx6function AccountTemplate({ children }) {7  <VisitCounter label="template" />{children}8}9// page: orders → profile

এটি পর্ব ১৫-এর reconciliation-এর নিয়ম: একই জায়গায় একই type থাকলে state থাকে, key বদলালে state মুছে যায়। নিচের live block-টি সেই একই কাঠামোর শেখার মডেল, আসল Next.js নয়। এখানে template-কে আমরা নিজেরাই key={seg} দিয়েছি।

<div id="root"></div>
<script src="../course-kit/vendor/react-lab.js"></script>
<script type="text/jsx">
// শেখার মডেল: layout একই থাকে, template পায় নতুন key
function Counter({ label }) {
  const [n, setN] = useState(0);
  useEffect(() => { console.log('mount', label); }, [label]);
  return <button onClick={() => setN(n + 1)}>{label}: {n}</button>;
}
function AccountLayout({ children }) {
  return <section><b>আমার অ্যাকাউন্ট </b><Counter label="layout" />{children}</section>;
}
function Template({ children }) {
  return <div><Counter label="template" />{children}</div>;
}
const pages = { orders: () => <p>অর্ডারের তালিকা</p>, profile: () => <p>প্রোফাইল</p> };
function App() {
  const [seg, setSeg] = useState('orders');
  const Page = pages[seg];
  console.log('render /account/' + seg);
  return (<>
    {Object.keys(pages).map((p) => <button key={p} onClick={() => setSeg(p)}>/account/{p}</button>)}
    <AccountLayout>
      <Template key={seg}><Page /></Template>
    </AccountLayout>
  </>);
}
createRoot(document.getElementById('root')).render(<App />);
</script>

render /account/orders
mount layout
mount template

৭ · Navigation: Link, prefetch, hook আর redirect

next/link-এর <Link> দেখতে সাধারণ <a>, কিন্তু দুটি কাজ বাড়তি করে। এক, ক্লিক থামিয়ে client-side navigation করে, যাকে Next.js বলে soft navigation. দুই, prefetch: link পর্দায় দেখা দিলেই পরের পাতার দরকারি অংশ পটভূমিতে এনে রাখে। Docs স্পষ্ট বলে, prefetch শুধু production-এ চলে, next dev-এ নয়। তাই আমরা next build আর next start চালিয়ে Edge-এ Playwright দিয়ে network log ধরেছি:

document  /
header-এ ৪টি Link: / · /products · /category/grocery · /account/orders

fetch /?_rsc=5CB6…                 Segment-Prefetch: /_tree
fetch /products?_rsc=5CB6…         Segment-Prefetch: /_tree
fetch /category/grocery?_rsc=5CB6… Segment-Prefetch: /_tree
fetch /account/orders?_rsc=5CB6…   Segment-Prefetch: /_tree
প্রতিটিতে RSC: 1 আর Next-Router-Prefetch: 1

fetch /category/grocery  …/category/$c$slug/__PAGE__
fetch /category/grocery  …/@modal/__DEFAULT__
fetch /products          …/products/__PAGE__
fetch /account/orders    /account/orders/__PAGE__

fetch /products?_rsc=OPcF…   RSC: 1   Prefetch header নেই

location      = /products
window.__mark = same page
t = 1.98 s    /products/1 … /products/4  Segment-Prefetch: /_tree

এই request-গুলো যে ডেটা আনে তার নাম RSC payload: server-এ render হওয়া component গাছের একটি সংক্ষিপ্ত বিবরণ। এর ভেতরের গঠন পর্ব ৫২-এর বিষয়। prefetch prop-এর মান তিন রকম: "auto" বা না দেওয়া (default; static route পুরোটা, dynamic route-এর কাছের loading পর্যন্ত), true (পুরো route), আর false (কখনো নয়, hover-এও নয়)। Partial Prefetching চালু থাকলে default-এর আচরণ একটু বদলায়, যা ওপরের log-এ দেখলেন।

কোড থেকে navigation: চারটি hook আর দুটি function

সবগুলো আসে next/navigation থেকে। Hook-গুলো শুধু Client Component-এ চলে।

router.push ইতিহাসে নতুন ঘর যোগ করে, router.replace চলতি ঘরটি বদলে দেয়, আর router.refresh client-এর state না মুছে server থেকে চলতি route আবার আনে, যা ডেটা বদলের পরে কাজে লাগে (পর্ব ৫৪)। ব্যবহারকারী যেখানে ক্লিক করবেন সেখানে সবসময় <Link> দিন। router.push শুধু কোনো কাজ শেষ হওয়ার পরে, যেমন dropdown বদলালে। কারণ Link-এ Ctrl-ক্লিক, নতুন tab আর screen reader সবই ঠিকভাবে কাজ করে।

Header-এর সক্রিয় link চিহ্নিত করতে usePathname, আর পণ্য সাজানোর dropdown-এ বাকি তিনটি hook একসাথে:

"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

export default function SortPicker() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const sort = searchParams.get("sort") ?? "default";
  function choose(value: string) {
    const next = new URLSearchParams(searchParams.toString());
    if (value === "default") next.delete("sort");
    else next.set("sort", value);
    const qs = next.toString();
    router.push(qs ? `${pathname}?${qs}` : pathname);
  }
  return (
    <label>
      সাজান:{" "}
      <select id="sort" value={sort} onChange={(e) => choose(e.target.value)}>
        <option value="default">স্বাভাবিক</option>
        <option value="price">দাম কম থেকে বেশি</option>
      </select>
    </label>
  );
}

পাতাটি নিজে server-এ const { sort } = await searchParams পড়ে তালিকা সাজায়, আর SortPicker-কে <Suspense>-এ মুড়ে রাখে। সত্যিকারের run-এ “দাম কম থেকে বেশি” বাছতেই URL হলো /products?sort=price, আর তালিকা: ৳135, ৳210, ৳280, ৳420. Filter URL-এ রাখার কারণ পর্ব ২০-এ দেখেছেন: link পাঠালে অন্যজনও একই তালিকা দেখেন।

redirect আর notFound-এর সত্যিকারের HTTP উত্তর (next start-এর ওপর সরাসরি request):

GET /offers        → 307  location: /products?sort=price
GET /nope          → 404  <meta name="robots" content="noindex">
GET /products/9    → 200  <meta name="robots" content="noindex">  + "এই পণ্যটি বাজারঘর-এ নেই"

শেষ লাইনটি অবাক করার মতো। ৯ নম্বর পণ্য নেই, তবু status 200? কারণ /products/[id]-এর অজানা id-র পাতা stream হয়: Next.js আগে পাতার static খোলস পাঠাতে শুরু করে, আর status code একবার পাঠানো হলে বদলানো যায় না। Docs ঠিক এই আচরণই লেখে, আর search engine যাতে পাতাটি index না করে সেজন্য noindex meta যোগ করে। Status code-এর গুরুত্ব পর্ব ৩৩-এ দেখেছেন। দরকার হলে, যেমন SEO-র জন্য, id যাচাইটি stream শুরুর আগে করার উপায় পর্ব ৫৫ আর ৫৮-এ।

৮ · Parallel আর intercepting route: পণ্যের “দ্রুত দেখা” modal

অনেক দোকানে তালিকার পণ্যে ক্লিক করলে তালিকার ওপরেই একটি ছোট জানালা (modal) খোলে। কিন্তু সেই modal-এর URL থাকলে ভালো: link share করা যায়, Back চাপলে modal বন্ধ হয়। আর কেউ সেই link সরাসরি খুললে পুরো পণ্যের পাতাই দেখা উচিত। Next.js দুটি কৌশল মিলিয়ে এটি করে।

• Parallel route: @modal নামের folder একটি slot. এটি segment নয়, URL-এ আসে না। বাবা layout children-এর পাশাপাশি modal নামের একটি prop পায়।
• Intercepting route: (.)products/[id] মানে “একই স্তরের products/[id]-কে ভেতর থেকে ক্লিক করে যাওয়ার সময় আটকাও”. (..) এক স্তর ওপরে, (...) একেবারে app থেকে।

app/(shop)/
├── layout.tsx                        {children}{modal}
├── @modal/
│   ├── default.tsx                   return null — modal বন্ধ
│   └── (.)products/[id]/page.tsx     <Modal>…</Modal>
└── products/[id]/page.tsx            পূর্ণ পাতা

সত্যিকারের run-এর ফল (Edge, Playwright, production build):

/products-এ ঝুড়ির বোতাম ২ বার → "ঝুড়িতে: 2"
"মসুর ডাল ১ কেজি" ক্লিক → URL /products/2, dialog খোলা, h1 এখনো "পণ্য", ঝুড়িতে: 2
"বন্ধ করুন" (router.back()) → URL /products, dialog DOM-এ আছে কিন্তু display:none
সরাসরি /products/2 খোলা → dialog নেই, h1 "মসুর ডাল ১ কেজি"

তিনটি জিনিস লক্ষ করুন। ক্লিকে তালিকা পেছনে থেকে গেল আর URL বদলাল: এটিই interception. ঝুড়ির সংখ্যা 2-ই রইল, কারণ (shop)/layout.tsx টিকে ছিল। আর সরাসরি খুললে interception হয় না, এটি তখন hard navigation, তাই পূর্ণ পাতা আসে। মাঝের লাইনটিও শিক্ষণীয়। বন্ধ করার পরে dialog মুছে যায়নি, লুকানো আছে। এটি অংশ ৬-এর <Activity>-এর কাজ। তাই modal-এর ভেতরে চলমান কিছু (video, timer) থাকলে লুকানোর সময় তা থামাতে হবে।

Error: Parallel route slots cannot render the same URLs
The following layouts have parallel route slots that cannot render the same URLs:
app/(shop)/layout.tsx
- /products is missing a matching page or default.tsx in @modal
- /products/[id] is missing a matching page or default.tsx in @modal

এই কৌশল শক্তিশালী, কিন্তু জটিলও। ছোট অ্যাপে সাধারণ useState-এর modal-ই যথেষ্ট হতে পারে। URL দরকার কি না, অর্থাৎ share বা Back-এর সুবিধা লাগবে কি না, সেটি আগে ঠিক করুন। Modal-এর focus আর keyboard-এর নিয়মও মানতে হয়।

৯ · next build-এর route table আর “বাজারঘর”-এর route মানচিত্র

পুরো project-এ npm run build চালানোর সত্যিকারের ফল (Next.js 16.4.4; আমাদের console.log-এর [render] লাইনগুলো বাদ দেওয়া):

▲ Next.js 16.4.4 (Turbopack)
- Cache Components enabled
- Partial Prefetching enabled

✓ Compiled successfully in 667ms
  Finished TypeScript in 1049ms ...
✓ Generating static pages using 13 workers (20/20) in 1130ms

Route (app)
┌ ○ /
├ ○ /_not-found
├   /(.)products/[id]
│ ├ ◐ /(.)products/[id]
│ ├ ○ /(.)products/1
│ ├ ○ /(.)products/2
│ └ ◐ [+2 more paths]
├ ○ /account/orders
├ ○ /account/profile
├   /category/[...slug]
│ └ ◐ /category/[...slug]
├   /help/[[...topic]]
│ └ ◐ /help/[[...topic]]
├ ○ /offers
├ ◐ /products
└   /products/[id]
  ├ ◐ /products/[id]
  ├ ○ /products/1
  ├ ○ /products/2
  └ ◐ [+2 more paths]

○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

Table-টি পড়তে শিখলে project-এর স্বাস্থ্য এক নজরে বোঝা যায়:

• ○ Static: build-এর সময়ই পুরো HTML তৈরি, যেমন /, /account/orders. /offers-ও static, কারণ তার redirect build-এই জানা।
• ◐ Partial Prerender: static খোলস তৈরি, ভেতরের অংশ request-এর সময় stream হয়। /products searchParams পড়ে, আর catch-all route-গুলো আগে থেকে কোনো মান জানে না। সব রকমের বিস্তারিত পর্ব ৫৫-এ।
• Route group নেই: (shop) কোথাও নেই। _lib, _components-ও নেই।
• generateStaticParams-এর ফল: /products/1, /products/2 আর “+2 more paths” মিলে চারটি পণ্যের পাতা। ওপরের ◐ /products/[id] হলো অজানা id-র জন্য খোলস, যেমন /products/9.
• /(.)products/[id]: modal-এর intercepting route. URL-এ এটি দেখা যায় না।
• ২০টি পাতা: “Generating static pages (20/20)”-এ ভেতরের বিশেষ পাতাগুলোও গোনা হয়।

এবার পুরো ছবি একসাথে, “বাজারঘর”-এর route মানচিত্র। এটি পরের পর্বগুলোতে বাড়বে:

Error: You have a Server Component that imports next/router. Use next/navigation instead.

১০ · AI-এর যুগে Next.js routing

Next.js-এ AI-এর ভুলের প্রধান কারণ ইতিহাস। প্রায় সাত বছর ধরে ইন্টারনেটের বেশিরভাগ Next.js কোড ছিল Pages Router-এর। তারপর App Router এলো, আর 15 ও 16-এ আবার বড় বদল হলো। AI তাই প্রায়ই তিন যুগের কোড মিশিয়ে লেখে। মজার ব্যাপার, create-next-app নিজেই এই সমস্যা মেনে নিয়েছে। আমাদের project-এ সে একটি AGENTS.md file বানিয়েছে, যার প্রথম লাইন:

## This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` …

অর্থাৎ install করা package-এর সাথেই সেই version-এর docs আসে, node_modules/next/dist/docs/-এ। AI agent, আর আপনিও, সেখান থেকে মিলিয়ে নিতে পারেন। আমাদের সত্যিকারের run-এ পাওয়া ভুলগুলো:

AI-এর লেখা routing কোড নেওয়ার আগে

• package.json-এ next-এর version দেখেছি, আর node_modules/next/dist/docs/ বা nextjs.org-এর সেই version-এর docs-এর সাথে API মিলিয়েছি
• npm run build চালিয়েছি, route table-এ নতুন route ঠিক নামে আর প্রত্যাশিত চিহ্নে (○ বা ◐) এসেছে
• নতুন URL সরাসরি খুলেছি, reload দিয়েছি, Back চেপেছি, ভুল id দিয়ে not-found দেখেছি
• Diff পড়েছি: অচেনা package ঢোকেনি, "use client" অকারণে ওপরে বসেনি, error চেপে রাখা হয়নি
• Login ছাড়া পাতা আর API সরাসরি ডেকে দেখেছি, server ডেটা দিচ্ছে না
• URL, log বা client-এর কোডে কোনো secret বা token যায়নি