Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক, যা একটি সহজ এবং পরিষ্কার ডিরেক্টরি স্ট্রাকচার প্রদান করে। এটি ডেভেলপারদের জন্য কোড সংগঠিত এবং পরিচালনা করা সহজ করে, এবং এর মধ্যে বেশ কিছু ডিফল্ট ফোল্ডার এবং ফাইল থাকে যা আপনাকে অ্যাপ্লিকেশনটি তৈরি করতে সাহায্য করে।
নিচে Next.js এর ডিরেক্টরি স্ট্রাকচার বিস্তারিতভাবে আলোচনা করা হলো:
১. pages/ ফোল্ডার
pages/ ফোল্ডারটি Next.js এর সবচেয়ে গুরুত্বপূর্ণ ফোল্ডার, কারণ এর মধ্যে থাকা প্রতিটি ফাইল একটি URL রাউটের সাথে সম্পর্কিত। Next.js স্বয়ংক্রিয়ভাবে pages/ ফোল্ডারের ফাইলগুলিকে রাউট হিসেবে ব্যবহার করে।
গুরুত্বপূর্ণ ফাইল ও কনসেপ্ট:
index.js: এটি আপনার অ্যাপের হোম পেজ, যা/রাউটে অ্যাক্সেস করা যায়।about.js: আপনি যদি একটি নতুন পেজ চান, যেমনaboutপেজ, তাহলে আপনি এখানে একটিabout.jsফাইল তৈরি করবেন, যা/aboutURL এর জন্য ব্যবহার হবে।_app.js: এটি একটি বিশেষ ফাইল, যা পুরো অ্যাপ্লিকেশনের মূল কনটেইনার হিসেবে কাজ করে। এই ফাইলের মধ্যে আপনি গ্লোবাল স্টাইল, লেআউট, এবং গ্লোবাল স্টেট ম্যানেজমেন্ট হ্যান্ডল করতে পারবেন।_document.js: এই ফাইলটি কাস্টম HTML ডকুমেন্টের কাঠামো নির্ধারণ করতে ব্যবহৃত হয় (যেমন<html>,<head>,<body>ট্যাগ কাস্টমাইজ করা)।- Dynamic Routes: আপনি যদি ডাইনামিক রাউট চান, যেমন
posts/[id].js, তাহলে আপনি[id].jsফাইল তৈরি করবেন, যা ডাইনামিকভাবে URL প্যারামিটার গ্রহণ করবে (যেমন/posts/1,/posts/2ইত্যাদি)।
উদাহরণ:
pages/
├── index.js // হোম পেজ
├── about.js // About পেজ
├── posts/
│ └── [id].js // ডাইনামিক রাউট
└── _app.js // গ্লোবাল অ্যাপ কনটেইনার
২. public/ ফোল্ডার
public/ ফোল্ডারে রাখার জন্য স্ট্যাটিক ফাইল যেমন ছবি, ফন্ট, ফেভিকন আইকন ইত্যাদি থাকে। এই ফোল্ডারের ফাইলগুলো সরাসরি অ্যাপ্লিকেশনের URL এর মাধ্যমে অ্যাক্সেস করা যায়।
উদাহরণ:
public/
├── images/
│ └── logo.png // অ্যাপের লোগো
├── favicon.ico // ফেভিকন
└── robots.txt // সার্চ ইঞ্জিন রোবটের জন্য নির্দেশনা
যেকোনো ফাইল যা public/ ফোল্ডারে রাখা হয়, তা / থেকে অ্যাক্সেস করা যায়:
http://localhost:3000/images/logo.pnghttp://localhost:3000/favicon.ico
৩. styles/ ফোল্ডার
Next.js প্রজেক্টে সমস্ত স্টাইল ফাইল styles/ ফোল্ডারে থাকে। এখানে আপনি গ্লোবাল CSS এবং মডিউল CSS ফাইল রাখতে পারেন। Next.js CSS মডিউল সাপোর্ট করে, যা আপনাকে স্টাইলগুলো কম্পোনেন্ট ভিত্তিকভাবে ব্যবহারের সুযোগ দেয়।
উদাহরণ:
styles/
├── globals.css // গ্লোবাল স্টাইল
└── Home.module.css // হোম পেজের জন্য মডিউল CSS
globals.css: গ্লোবাল CSS স্টাইল, যা পুরো অ্যাপ্লিকেশনে প্রযোজ্য।Home.module.css: মডিউল CSS স্টাইল, যা শুধুমাত্র নির্দিষ্ট কম্পোনেন্ট বা পেজে প্রযোজ্য।
৪. node_modules/ ফোল্ডার
node_modules/ ফোল্ডারটি আপনার প্রজেক্টে ইনস্টল করা সমস্ত npm প্যাকেজ এবং ডিপেন্ডেন্সির জন্য ব্যবহৃত হয়। এই ফোল্ডারটি স্বয়ংক্রিয়ভাবে তৈরি হয় যখন আপনি npm install বা yarn install কমান্ড চালান। সাধারণত আপনি এই ফোল্ডারের মধ্যে কোনো পরিবর্তন করবেন না।
৫. next.config.js ফাইল
next.config.js ফাইলটি আপনার Next.js অ্যাপ্লিকেশনের কনফিগারেশন ফাইল। এখানে আপনি কিছু কাস্টম কনফিগারেশন যেমন webpack কনফিগারেশন, রিডাইরেকশন, রিপ্লেসমেন্ট, ইত্যাদি করতে পারবেন।
উদাহরণ:
module.exports = {
reactStrictMode: true,
images: {
domains: ['example.com'],
},
}
৬. package.json ফাইল
package.json ফাইলটি আপনার প্রজেক্টের মেটাডেটা ধারণ করে এবং এতে ব্যবহৃত প্যাকেজের ডিপেন্ডেন্সি, স্ক্রিপ্ট, স্লেভারন নম্বর, ইত্যাদি থাকে। এটি npm বা yarn এর মাধ্যমে আপনার প্রজেক্ট পরিচালনা করার জন্য ব্যবহার করা হয়।
উদাহরণ:
{
"name": "my-next-app",
"version": "1.0.0",
"dependencies": {
"next": "latest",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"eslint": "^7.0.0"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
৭. .gitignore ফাইল
.gitignore ফাইলটি গিট রিপোজিটরিতে যেসব ফাইল বা ফোল্ডার কমিট করা যাবে না, তা নির্ধারণ করে। সাধারণত node_modules/, .next/, .env ইত্যাদি ফোল্ডারগুলো এই ফাইলে থাকে।
৮. README.md ফাইল
README.md ফাইলটি প্রজেক্টের ডকুমেন্টেশন হিসেবে ব্যবহৃত হয়। এখানে আপনি প্রজেক্টের বিস্তারিত বর্ণনা, সেটআপ এবং চালানোর নির্দেশনা ইত্যাদি রাখতে পারেন।
৯. .next/ ফোল্ডার
.next/ ফোল্ডারটি Next.js দ্বারা তৈরি হওয়া বিল্ড এবং রানটাইম ফাইলগুলো ধারণ করে। এটি স্বয়ংক্রিয়ভাবে তৈরি হয় যখন আপনি next build বা next dev কমান্ড চালান। সাধারণত এটি গিট রিপোজিটরিতে কমিট করা হয় না।
সারাংশ
Next.js এর ডিরেক্টরি স্ট্রাকচারটি পরিষ্কার ও অর্গানাইজড, যা আপনাকে কোড সোজা এবং মেইনটেন করা সহজ করে। প্রধান ফোল্ডারগুলো হলো pages/, public/, styles/, এবং node_modules/, এবং প্রতিটি ফোল্ডার ও ফাইলের একটি নির্দিষ্ট কাজ রয়েছে। pages/ ফোল্ডার রাউটিংয়ের জন্য, public/ ফোল্ডার স্ট্যাটিক ফাইলের জন্য, এবং styles/ ফোল্ডার CSS স্টাইল সংরক্ষণ করার জন্য ব্যবহৃত হয়।
Read more
