Next.js Project Structure

Next.js-এ file-system routing — ফোল্ডার ও ফাইল দিয়ে route তৈরি হয়। project-এর মৌলিক গঠন জানা গুরুত্বপূর্ণ; এই অধ্যায়ে ফোল্ডার, ফাইল convention ও project organize করার কৌশল একসাথে দেখা যাবে।

Top-level ফোল্ডার

উপরের স্তরের ফোল্ডার অ্যাপের কোড ও static asset আলাদা করে রাখে।

Top-level ফাইল

উপরের স্তরের ফাইলগুলো configure, dependency, proxy, monitoring ও environment variable সামলায়।

Routing Files (Special Files)

app/ ফোল্ডারের ভেতরে এই নামের ফাইলগুলো Next.js নিজেই বুঝে নেয়। page দিলে route public, route দিলে API endpoint।

Nested Routes

ফোল্ডার হলো URL segment — nesting করলেই URL nesting হয়। যেকোনো লেভেলের layout তার child segment-কে মোড়ায়, আর page বা route ফাইল থাকলে তবেই route public হয়।

Dynamic Routes

বর্গাকার bracket দিয়ে segment parameterize করা হয়:

Route Groups ও Private Folders

URL না বদলেই কোড organize করা যায়:

• (group) — parenthesis দিয়ে route group; URL-এ আসে না, তবে নিজস্ব layout দেওয়া যায়
• _folder — underscore দিয়ে private folder; ফোল্ডার ও তার সব subfolder routing-এর বাইরে

Parallel ও Intercepted Routes

এই দুটো feature নির্দিষ্ট UI pattern-এর জন্য — slot-based layout ও modal routing।

Metadata File Conventions

নির্দিষ্ট নামের ফাইল auto-detect করে Next.js metadata তৈরি করে — separate config লাগে না।

App Icons

Open Graph ও Twitter Images

SEO

Component Hierarchy

Special files একটি নির্দিষ্ট ক্রমানুসারে render হয়:

• layout — shared UI
• template — re-rendered layout
• error — React error boundary
• loading — React suspense boundary
• not-found — not-found error boundary
• page বা nested layout

RootLayout
└── Template
    └── ErrorBoundary
        └── LoadingBoundary
            └── NotFoundBoundary
                └── Page

এই hierarchy প্রতিটি segment-এ recursively আবার আবার চলে — nested route-এ parent segment-এর component-এর ভেতরে child segment-এর component nest হয়।

Colocation

app ফোল্ডারের ভেতরে nested folder route structure ধরে, তবে page.tsx বা route.ts না থাকলে route public হয় না। তাই project file — component, utility — সব কিছু route segment-এর পাশেই রাখা নিরাপদ।

Private Folders ও Route Groups দিয়ে Organize

• Private folder (_folderName) — routing system এই ফোল্ডার বাদ দেয়; UI logic আলাদা করা, editor-এ grouping, ভবিষ্যতের file convention-এর সাথে নামের conflict এড়াতে কাজে লাগে
• Route group ((folderName)) — URL path-এ যোগ হয় না; section অনুযায়ী route organize, একই segment-এ আলাদা nested layout, নির্দিষ্ট route-এ loading skeleton দিতে ব্যবহার হয়

src ফোল্ডার

চাইলে application code (যেমন app) একটি optional `src/` ফোল্ডারের ভেতরে রাখা যায় — ফলে project root-এর configuration file থেকে application code আলাদা থাকে।

সাধারণ Project Structure

my-app/
├── app/
│   ├── layout.tsx      → রুট লেআউট — <html> ও <body>
│   ├── page.tsx        → হোম পেজ (/)
│   ├── globals.css     → global styles
│   └── favicon.ico
├── public/
│   └── (static assets)
├── next.config.ts      → Next.js configuration
├── tsconfig.json       → TypeScript configuration
├── eslint.config.mjs   → ESLint configuration
└── package.json

Project Organize করার কৌশল

Next.js file organize নিয়ে unopinionated — যেটি টিমের সাথে মেলে সেটি ধরুন, শুধু project-জুড়ে consistent রাখুন:

• app-এর বাইরে রাখা — সব application code root-এর shared folder-এ (components/, lib/), app শুধু routing-এর জন্য বিশুদ্ধ রাখা
• app-এর ভেতরে top-level folder — shared code app root-এর ভেতরের folder-এ রাখা
• Feature/route অনুযায়ী ভাগ — globally shared code app root-এ, নির্দিষ্ট route যে code ব্যবহার করে তার ভেতরেই রাখা