Next.js Folder Structure Explained Step by Step — Complete Guide (2025)
Next.js Folder Structure বোঝা প্রতিটি ডেভেলপারকে দ্রুত এবং scale-able অ্যাপে সাহায্য করে। এই ব্লগে আমি সহজ ধাপে এটার ব্যাখ্যা করব — প্রতিটি ফোল্ডারের কাজ, কখন কোনটা ব্যবহার করবেন, এবং ভালো প্র্যাকটিস। প্রত্যেক সেকশনে শুধু টেকনিক্যাল নয়, বাস্তব উদাহরণেও দেখানো আছে যাতে আপনি সাথে সাথে প্রজেক্টে প্রয়োগ করতে পারেন।
কেন Next.js Folder Structure শেখা জরুরি?
এটা ভালোভাবে শিখলে কোড maintain করা সহজ হয়, নতুন ডেভেলপার দ্রুত onboard হয়, আর production-ready features (SSR, SSG, API routes) ঠিকভাবে ব্যবহার করা যায়। Next.js-এ কয়েকটি standard folder আছে — এগুলো কিভাবে সাজাবেন তা জানলেই আপনার ডেভেলপমেন্ট দ্রুত ও পরিষ্কার হবে।
Next.js এর বেসিক ফোল্ডার লেআউট (Quick Overview)
সাধারণত একটি Next.js প্রজেক্টে এইগুলো দেখতে পাবেন:
- pages/ বা app/ (Next.js версии অনুযায়ী)
- public/
- src/ (optional)
- components/
- styles/
- lib/ বা utils/
- api/ (বা pages/api/)
- hooks/
- middleware.js / middleware.ts
- next.config.js, package.json
এই তালিকা মনে রাখলে আপনি এর মৌলিক ধারণা পেয়ে যাবেন।
Step 1 — pages/ vs app/ কীভাবে নির্বাচন করবেন?
Key point: Next.js v13+ এ app/ আর্কিটেকচার এসেছে—কিন্তু অনেক প্রজেক্ট এখনও pages/ ব্যবহার করে। Next.js Folder Structure-এ এই সিদ্ধান্তটি গুরুত্বপূর্ণ।
- pages/ (Classic): ফাইল-বেসড routing — pages/index.js = /, pages/about.js = /about। API routes: pages/api/*.js।
- app/ (App Router): Server Components, nested routing, এবং enhanced data fetching। আধুনিক প্রজেক্টে app/ বেশি ব্যবহৃত হচ্ছে।
প্রশ্ন: যদি SEO বা legacy প্লাগইন দরকার হয়, pages/ ঠিক থাকবে; নতুন project হলে app/ বেছে নিন।
public/ এবং সরাসরি অ্যাসেট ব্যবস্থাপনা
public/-এ images, favicon, robots.txt, static files রাখুন। এখানে থাকা ফাইল ব্রাউজারে / থেকে সরাসরি সার্ভ হয়।
উদাহরণ: public/logo.png → <img src=”/logo.png” />।
এটার Folder Structure-এ public/ হলো static assets-এর কেন্দ্র।
components/ এবং UI organization
এই ফোল্ডারে ছোট-বড় UI components রাখুন। সাব-ফোল্ডার ব্যবহার করুন:
components/
ui/
Button.jsx
Card.jsx
layout/
Header.jsx
Footer.jsx
blog/
PostCard.jsx
এইভাবে এটার components logicalভাবে সাজালে reusability বাড়ে।
src/ ব্যবহার করলে কেমন হয়?
এটারমধ্যে সব সোর্স কোড রাখলে repo root পরিষ্কার থাকে:
src/
app/ or pages/
components/
styles/
lib/
src/ ব্যবহার করলে নতুন ডেভেলপাররা সহজে কোডবেস বুঝে নেয় — একটিই Next.js Folder Structure pattern অনেক বড় টিমে কাজে আসে।
Data layer: lib/, services/ বা api/
API calls, data fetching utilities ও ক্লায়েন্ট লাইব্রেরি রাখুন lib/ বা services/-এ:
lib/
api.js
fetcher.js
firestore.js
এগুলো Next.js Folder Structure-এ central place হয় যেখানে সব সার্ভিস লজিক থাকে।
Styling: styles/ বা CSS-in-JS
প্রচলিত অপশনগুলো:
- styles/globals.css (global CSS)
- CSS Modules: components/Button.module.css
- Tailwind: tailwind.config.js + globals.css
- CSS-in-JS: styled-components বা emotion
Next.js Folder Structure এ স্টাইল আলাদা রাখলে theme ও global settings সহজে কনফিগার করা যায়।
API Routes: কোথায় রাখবেন?
Classic: pages/api/*
App Router: আপনি app/api/*/route.js ব্যবহার করবেন (Next.js v13+)।
API route গুলো Next.js Folder Structure-এ backend-like endpoints হিসাবে কাজ করে — ছোট সার্ভিস বা webhook সহজে লিখতে পারবেন।
Middleware, Config ও Env
- middleware.js বা middleware.ts — global request handling (auth, redirects)
- next.config.js — Next.js config
- .env.local — sensitive keys (never commit)
এইগুলো -এর operational অংশ।
Best Practices
- Logical grouping: components, hooks, styles আলাদা রাখুন।
- Small components: এক component এক কাজ করবে।
- Index exports: components/index.js দিয়ে grouped exports।
- Use src/ for larger apps.
- Naming conventions: PascalCase components, kebab-case files যতটা প্রাসঙ্গিক।
- Keep API logic in lib/ or services/.
এই best practices মেনে Next.js Folder Structure টা future-proof হবে।
Example Project Structure (final)
my-next-app/
.env.local
next.config.js
public/
favicon.ico
images/
src/
app/ # or pages/
page.jsx
layout.jsx
components/
ui/
layout/
styles/
globals.css
lib/
api.js
hooks/
এই example দেখে আপনি বুঝতে পারবেন কিভাবে বাস্তবে Next.js Folder Structure গঠন করবেন।
সারসংক্ষেপ (Conclusion)
Next.js Folder Structure ঠিকভাবে ডিজাইন করলে development speed, maintainability এবং scalability বাড়ে। ছোট প্রজেক্টে simple structure রাখুন; বড় প্রজেক্টে src/, logical components ও services আলাদাভাবে রাখুন। app/ বা pages/ বেছে নেওয়ার সিদ্ধান্তটা আপনার প্রজেক্টের রিকোয়ারমেন্ট অনুযায়ী নিন—SEO ও Server Components দরকার হলে app/ বেছে নিন।