এই পাঠটি Next.js-এর ফোল্ডার আর ফাইল অর্গানাইজ করার নিয়মের সহজ ভাষায় সংক্ষিপ্ত বিবরণ। এখানে আপনি আপনার প্রজেক্ট সুন্দরভাবে সাজাতে কিছু সহজ দিকনির্দেশনা পাবেন।
🎧 Next App এর প্রোজেক্ট স্ট্রাকচার অর্গানাইজ করা
ফোল্ডার আর ফাইল কিভাবে সাজাবেন
টপ-লেভেল ফোল্ডার
টপ-লেভেল ফোল্ডারগুলোতে আপনি অ্যাপের কোড আর ছবি, ফন্টের মতো স্ট্যাটিক ফাইল রাখতে পারবেন।
| ফোল্ডার | বর্ণনা |
|---|---|
app | App Router ব্যবহারের জন্য। |
pages | Pages Router ব্যবহারের জন্য। |
public | স্ট্যাটিক ফাইল (যেমন ছবি, আইকন) রাখার জন্য। |
src | অ্যাপের মূল কোড রাখার জন্য (ঐচ্ছিক)। |
টপ-লেভেল ফাইল
এই ফাইলগুলোতে আপনি অ্যাপের কনফিগারেশন, প্যাকেজ আর পরিবেশগত ভেরিয়েবল সেট করতে পারবেন।
| ফাইল | বর্ণনা |
|---|---|
next.config.js | Next.js-এর কনফিগারেশন ফাইল। |
package.json | প্রজেক্টের ডিপেন্ডেন্সি আর স্ক্রিপ্ট। |
middleware.ts | অনুরোধ (request) পরিচালনার জন্য মিডলওয়্যার। |
.env | পরিবেশগত ভেরিয়েবল রাখার জন্য। |
.gitignore | Git-এ ট্র্যাক না করা ফাইল বা ফোল্ডারের তালিকা। |
tsconfig.json | TypeScript-এর কনফিগারেশন ফাইল। |
রাউটিং ফাইল
এই ফাইলগুলো দিয়ে আপনি অ্যাপের বিভিন্ন পেজ আর লেআউট ঠিক করতে পারবেন।
| ফাইল | বর্ণনা |
|---|---|
layout.js | একাধিক পেজের জন্য সাধারণ লেআউট। |
page.js | নির্দিষ্ট রুটের জন্য ইউনিক UI। |
loading.js | পেজ লোড হলে লোডিং ইন্টারফেস দেখায়। |
not-found.js | পেজ না পেলে এই UI দেখায়। |
error.js | কোনো সমস্যা হলে এই UI দেখায়। |
route.js | সার্ভার-সাইড API এন্ডপয়েন্ট বানাতে। |
রাউটিং তৈরির সহজ কৌশল
Next.js-এ আপনি সহজে বিভিন্ন রুট বানাতে পারবেন।
| রুটের ধরণ | উদাহরণ | বর্ণনা |
|---|---|---|
| নেস্টেড রাউটিং | folder/folder | এক রুটের ভেতরে আরেকটা রাউট। |
| ডাইনামিক রাউটিং | [folder] | ডেটা অনুযায়ী রাউট তৈরি। |
রাউট গ্রুপিং আর প্রাইভেট ফোল্ডার
কোড গুছিয়ে রাখতে এই কৌশলগুলো খুব কাজে আসে।
- রাউট গ্রুপ
(folder): এই ফোল্ডারগুলো URL-এ আসে না, শুধু কোড সাজানোর জন্য। যেমন,(marketing)বা(shop)আলাদা গ্রুপে আলাদা লেআউট রাখা যায়。 - প্রাইভেট ফোল্ডার
_folder: ফোল্ডারের আগে আন্ডারস্কোর দিলে, ওই ফোল্ডার আর তার ফাইল রাউটিং-এ আসবে না। এখানে আপনি UI কম্পোনেন্ট বা হেল্পার ফাংশন রাখতে পারেন।
প্রজেক্ট সাজানোর সহজ কৌশল
আপনি চাইলে নিচের যেকোনোভাবে প্রজেক্ট সাজাতে পারেন।
- app-এর বাইরে ফাইল রাখা:
componentsবাlib-এর মতো ফোল্ডারapp-এর বাইরে রাখুন, এতে রাউটিং আর মূল কোড আলাদা থাকবে。 - app-এর ভেতরে ফাইল রাখা: সব কোড
app-এর ভেতরে রাখুন, সবকিছু এক জায়গায় থাকবে。 - ফিচার বা রুট অনুযায়ী ভাগ করা: প্রতিটি রুটের জন্য দরকারি কম্পোনেন্ট বা ফাইল ওই রুটের ফোল্ডারে রাখুন।
বিশেষ টিপস
- একাধিক রুট লেআউট: অ্যাপকে একাধিক UI-তে ভাগ করতে চাইলে, প্রতিটি রুট গ্রুপে আলাদা
layout.jsফাইল রাখুন। মনে রাখবেন, প্রতিটি লেআউটে<html>আর<body>ট্যাগ থাকা দরকার。 - নির্দিষ্ট রুটের জন্য লোডিং স্কেলেটন: কোনো রুটের জন্য
loading.jsফাইল রাখতে চাইলে, রুট গ্রুপ ব্যবহার করুন। এতে শুধু ওই রুটের জন্য লোডিং UI দেখানো হবে।