App Router-এ, app/ ফোল্ডারের ভিতরে ফোল্ডার কাঠামো আপনার রুট সংজ্ঞায়িত করে — কোন রাউটার কনফিগ লেখার প্রয়োজন নেই। প্রতিটি ফোল্ডার একটি URL সেগমেন্ট, এবং এর ভিতরের বিশেষ ফাইলগুলি সেই সেগমেন্টটি কী রেন্ডার করে তা সংজ্ঞায়িত করে।
app/
page.tsx → /
about/page.tsx → /about
blog/page.tsx → /blog
blog/[slug]/page.tsx → /blog/:slug (dynamic segment)
shop/(sale)/page.tsx → /shop (route group — parentheses don't add to URL)
প্রতিটি ফোল্ডারে সংরক্ষিত ফাইলনাম থাকতে পারে, প্রতিটির একটি নির্দিষ্ট ভূমিকা রয়েছে:
page.tsx → the route's UI (REQUIRED to make a segment routable)
layout.tsx → shared wrapper that persists across child routes
loading.tsx → loading UI (auto-wraps the page in <Suspense>)
error.tsx → error boundary for the segment
not-found.tsx→ 404 UI
route.ts → an API endpoint (instead of a page)
// app/blog/[slug]/page.tsx → matches /blog/hello, /blog/anything
export default function Post({ params }: { params: { slug: string } }) {
return <h1>Post: {params.slug}</h1>; // params.slug = "hello"
}
বর্গাকার বন্ধনী একটি ডায়নামিক প্যারামিটার তৈরি করে যা params এর মাধ্যমে পৃষ্ঠায় পাস করা হয়। বৈচিত্র্য: [...slug] (catch-all), [[...slug]] (ঐচ্ছিক catch-all)।
app/(marketing)/about/page.tsx → /about (the (marketing) folder is ignored in the URL)
বন্ধনী রুট গ্রুপ তৈরি করে ফাইলগুলি সংগঠিত করতে বা URL প্রভাবিত না করে বিভিন্ন লেআউট প্রয়োগ করতে।
ফাইল-ভিত্তিক রাউটিং ফাইল গাছ থেকে URL কাঠামো স্পষ্ট করে তোলে — কোন কেন্দ্রীয় রুট কনফিগারেশন বজায় রাখতে এবং সিঙ্ক রাখতে হয় না।
বিশেষ ফাইলনামগুলি (page, layout, loading, error, route) এবং বন্ধনী সম্মেলনগুলি ([param], [...catchAll], (group)) জেনে রাখা যেকোনো App Router অ্যাপ তৈরির মূল শব্দভান্ডার।