Next.js সেটআপ এবং ইনস্টলেশন

Next.js সেটআপ করা খুবই সহজ এবং দ্রুত। এটি Node.js পরিবেশে কাজ করে, এবং npm বা Yarn এর মাধ্যমে ইনস্টল করা যায়। নিচে Next.js সেটআপ করার ধাপগুলো বিস্তারিতভাবে দেওয়া হলো।

সিস্টেম প্রয়োজনীয়তা

Next.js ব্যবহার করতে হলে আপনার সিস্টেমে নিম্নোক্ত সফটওয়্যার ইনস্টল থাকা প্রয়োজন:

• Node.js
  • সর্বশেষ LTS (Long Term Support) সংস্করণ ইনস্টল করুন (প্রস্তাবিত: v16 বা এর উপরে)।
  • Node.js ডাউনলোড।
• npm বা Yarn
  • Node.js ইনস্টল করার সাথে npm স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যায়।
  • বিকল্প হিসাবে Yarn ব্যবহার করতে চাইলে, এটি আলাদাভাবে ইনস্টল করতে হবে। Yarn ডকুমেন্টেশন।

Next.js প্রজেক্ট তৈরি

Next.js সেটআপ করার জন্য নিচের ধাপগুলো অনুসরণ করুন:

ধাপ ১: টার্মিনাল বা কমান্ড লাইন খুলুন

আপনার প্রজেক্ট যেখানে তৈরি করতে চান, সেই ডিরেক্টরিতে টার্মিনাল বা কমান্ড লাইন খুলুন।

ধাপ ২: নতুন প্রজেক্ট তৈরি করুন

Next.js প্রজেক্ট তৈরি করতে create-next-app কমান্ড ব্যবহার করুন। এটি একটি প্রাথমিক কনফিগারেশনসহ প্রজেক্ট তৈরি করবে।

npx create-next-app@latest my-next-app

• my-next-app হলো আপনার প্রজেক্টের নাম। আপনি ইচ্ছামতো নাম দিতে পারেন।
• এই কমান্ডটি Next.js এর প্রয়োজনীয় ডিপেন্ডেন্সি ডাউনলোড এবং ইনস্টল করবে।

ধাপ ৩: প্রশ্নের উত্তর দিন

কিছু ক্ষেত্রে, create-next-app আপনাকে কিছু প্রশ্ন করবে, যেমন:

• TypeScript ব্যবহার করতে চান কি না।
• ESLint ইনস্টল করতে চান কি না।
• Tailwind CSS বা অন্য কোনো CSS লাইব্রেরি ব্যবহার করতে চান কি না।

আপনার প্রয়োজন অনুযায়ী এগুলো সিলেক্ট করুন।

প্রজেক্ট রান করা

Next.js প্রজেক্ট তৈরি হয়ে গেলে, এটি রান করতে নিচের ধাপগুলো অনুসরণ করুন:

ধাপ ১: প্রজেক্ট ডিরেক্টরিতে যান

cd my-next-app

ধাপ ২: প্রজেক্ট সার্ভার শুরু করুন

npm run dev

• সার্ভার চালু হলে এটি সাধারণত http://localhost:3000 এ চলবে।
• আপনার ব্রাউজারে http://localhost:3000 এ যান এবং Next.js অ্যাপটি চালু দেখতে পাবেন।

Next.js প্রজেক্ট কাস্টমাইজেশন

Next.js ইনস্টল করার পর প্রজেক্টটি কাস্টমাইজ করতে পারেন:

• পেজ তৈরি করুন
  pages ডিরেক্টরির ভিতরে নতুন ফাইল তৈরি করে পেজ তৈরি করুন। যেমন:

  pages/about.js
  

  এরপর about.js ফাইলে নিচের মতো কোড লিখুন:

  export default function About() {
      return <h1>এটি একটি About পেজ</h1>;
  }
  

• স্টাইলিং যুক্ত করুন
  styles ফোল্ডারে নতুন CSS ফাইল যুক্ত করতে পারেন অথবা Tailwind CSS ইন্টিগ্রেট করতে পারেন।

বিকল্প সেটআপ (Yarn ব্যবহার করে)

যদি আপনি npm এর পরিবর্তে Yarn ব্যবহার করতে চান, তাহলে নিচের কমান্ড ব্যবহার করুন:

yarn create next-app my-next-app

পরবর্তীতে সার্ভার চালানোর জন্য:

yarn dev

Next.js সেটআপ প্রক্রিয়া সহজ এবং দ্রুত। একবার সেটআপ করার পর আপনি সার্ভার-সাইড রেন্ডারিং (SSR), স্ট্যাটিক সাইট জেনারেশন (SSG), এবং অন্যান্য ফিচার নিয়ে কাজ শুরু করতে পারবেন।

Next.js ব্যবহার শুরু করতে হলে প্রথমে আপনার সিস্টেমে Node.js ইনস্টল থাকতে হবে। Node.js একটি জাভাস্ক্রিপ্ট রানটাইম যা সার্ভার সাইডের জন্য ব্যবহৃত হয় এবং এটি Next.js অ্যাপ্লিকেশন চালানোর জন্য প্রয়োজনীয়। Node.js ইনস্টল হওয়ার পর, আপনি সহজেই Next.js ফ্রেমওয়ার্ক ইনস্টল এবং সেটআপ করতে পারবেন।

ধাপ ১: Node.js ইন্সটল করা

Next.js ব্যবহার করতে হলে প্রথমে আপনার সিস্টেমে Node.js ইন্সটল করতে হবে। নিচে Node.js ইনস্টল করার পদক্ষেপ দেওয়া হলো:

১.১: Node.js ডাউনলোড

Node.js এর সর্বশেষ LTS (Long Term Support) ভার্সনটি ডাউনলোড করতে হবে। আপনি অফিসিয়াল ওয়েবসাইট থেকে এটি ডাউনলোড করতে পারেন।

• Node.js ডাউনলোড পেজ

LTS ভার্সন নির্বাচন করা উত্তম, কারণ এটি দীর্ঘ সময় ধরে আপডেট ও সাপোর্ট পায়।

১.২: Node.js ইনস্টল করা

ডাউনলোড করার পর, .pkg (MacOS) অথবা .msi (Windows) ফাইলটি রান করুন এবং ইনস্টলেশন প্রক্রিয়া সম্পন্ন করুন। ইনস্টলেশন সম্পন্ন হলে, টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ড দিয়ে নিশ্চিত করুন যে Node.js সঠিকভাবে ইনস্টল হয়েছে:

node -v

এটি Node.js এর ভার্সন দেখাবে। একইভাবে npm (Node Package Manager) এর ভার্সন চেক করতে:

npm -v

ধাপ ২: Next.js ইন্সটল করা

Node.js ইনস্টল হওয়ার পর, আপনি create-next-app টুল ব্যবহার করে Next.js অ্যাপ্লিকেশন তৈরি করতে পারেন। এটি একটি CLI টুল যা আপনাকে সহজেই একটি নতুন Next.js প্রজেক্ট তৈরি করতে সহায়তা করে।

২.১: নতুন Next.js অ্যাপ্লিকেশন তৈরি করা

টার্মিনাল বা কমান্ড লাইন ওপেন করুন এবং নিচের কমান্ডটি রান করুন:

npx create-next-app@latest my-next-app

এখানে:

• my-next-app হলো আপনার প্রজেক্টের নাম। আপনি এটি আপনার পছন্দমতো পরিবর্তন করতে পারেন।

এই কমান্ডটি create-next-app টুলটি ব্যবহার করে একটি নতুন Next.js প্রজেক্ট তৈরি করবে এবং সকল প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করবে।

২.২: ইনস্টলেশন শেষ হওয়া

ইনস্টলেশন সম্পন্ন হলে, টার্মিনালে এই ধরনের বার্তা দেখতে পাবেন:

Success! Created my-next-app at /path/to/my-next-app

এটি দেখাচ্ছে যে Next.js অ্যাপ্লিকেশন সফলভাবে তৈরি হয়েছে।

ধাপ ৩: Next.js অ্যাপ চালানো

এখন আপনি আপনার তৈরি করা Next.js প্রজেক্ট চালু করতে পারেন।

৩.১: প্রজেক্ট ফোল্ডারে প্রবেশ করা

cd my-next-app

৩.২: ডেভেলপমেন্ট সার্ভার চালানো

Next.js ডেভেলপমেন্ট সার্ভার চালানোর জন্য, নিচের কমান্ডটি ব্যবহার করুন:

npm run dev

এটি ডেভেলপমেন্ট সার্ভার চালু করবে এবং সাধারণত আপনার অ্যাপ্লিকেশনটি http://localhost:3000 এ চলে যাবে। আপনার ব্রাউজারে গিয়ে এটি দেখতে পারবেন।

ধাপ ৪: ব্রাউজারে অ্যাপ্লিকেশন দেখা

আপনার ব্রাউজারে গিয়ে http://localhost:3000 পেজটি খুলুন। আপনি Next.js এর ডিফল্ট ওয়েলকাম পেজ দেখতে পাবেন, যা দেখাবে যে আপনার প্রজেক্ট সফলভাবে সেটআপ হয়েছে।

বিকল্প: Yarn ব্যবহার করে Next.js ইন্সটলেশন

যদি আপনি npm এর পরিবর্তে Yarn ব্যবহার করতে চান, তাহলে নিচের কমান্ডটি ব্যবহার করতে পারেন:

৪.১: Yarn ইনস্টলেশন

প্রথমে Yarn ইনস্টল করতে হবে, যদি এটি আপনার সিস্টেমে ইনস্টল না থাকে:

npm install --global yarn

৪.২: Next.js প্রজেক্ট তৈরি এবং চালানো

Yarn ব্যবহার করে Next.js অ্যাপ্লিকেশন তৈরি এবং চালাতে:

yarn create next-app my-next-app
cd my-next-app
yarn dev

এটি একইভাবে Next.js প্রজেক্ট তৈরি এবং ডেভেলপমেন্ট সার্ভার চালু করবে।

সারাংশ

Next.js ইন্সটলেশন খুবই সহজ। প্রথমে Node.js ইনস্টল করতে হবে, তারপর create-next-app টুল ব্যবহার করে একটি নতুন প্রজেক্ট তৈরি করতে হবে। এই প্রজেক্ট চালানোর জন্য npm run dev বা yarn dev কমান্ড ব্যবহার করা হয়, যার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশন দেখতে পারবেন।

Next.js দিয়ে প্রথম প্রজেক্ট তৈরি করার প্রক্রিয়া খুবই সহজ এবং সরল। নিচে ধাপে ধাপে নির্দেশনা দেওয়া হলো, যার মাধ্যমে আপনি সহজেই একটি নতুন Next.js প্রজেক্ট তৈরি করতে পারবেন।

ধাপ ১: Node.js এবং npm ইনস্টল করা

Next.js ব্যবহার করার জন্য আপনার সিস্টেমে Node.js এবং npm (Node Package Manager) ইন্সটল থাকা প্রয়োজন। যদি ইতিমধ্যে ইনস্টল না করে থাকেন, তাহলে আপনি Node.js ডাউনলোড পেজ থেকে Node.js এর সর্বশেষ LTS (Long Term Support) সংস্করণটি ডাউনলোড এবং ইনস্টল করতে পারেন।

Node.js ইনস্টল হওয়ার পর, টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ড দিয়ে নিশ্চিত করুন যে Node.js এবং npm সঠিকভাবে ইনস্টল হয়েছে:

node -v
npm -v

যদি সঠিক ভার্সন দেখায়, তাহলে Node.js এবং npm সঠিকভাবে ইনস্টল হয়েছে।

ধাপ ২: নতুন Next.js প্রজেক্ট তৈরি করা

Next.js প্রজেক্ট তৈরি করতে create-next-app টুলটি ব্যবহার করা হয়। এটি একটি সহজ CLI টুল যা আপনাকে React অ্যাপ্লিকেশন সহ একটি Next.js প্রজেক্ট দ্রুত তৈরি করতে সাহায্য করে।

২.১: create-next-app দিয়ে প্রজেক্ট তৈরি

আপনার টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ডটি চালান:

npx create-next-app@latest my-next-app

এখানে:

• my-next-app আপনার প্রজেক্টের নাম। আপনি এটি পছন্দমতো পরিবর্তন করতে পারেন।
• npx হল একটি CLI টুল যা npm প্যাকেজ রান করতে সহায়তা করে। এই কমান্ডটি create-next-app এর সর্বশেষ সংস্করণটি ডাউনলোড করে এবং আপনার প্রজেক্ট তৈরি করে।

এই কমান্ডটি রান করলে, Next.js আপনার জন্য একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করবে এবং সমস্ত প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করবে।

২.২: প্রজেক্ট সেটআপ সম্পন্ন

যখন ইনস্টলেশন শেষ হবে, টার্মিনালে একটি বার্তা দেখাবে:

Success! Created my-next-app at /path/to/my-next-app

এটি দেখাচ্ছে যে আপনার প্রজেক্ট সফলভাবে তৈরি হয়েছে।

ধাপ ৩: প্রজেক্ট চালানো

Next.js প্রজেক্ট তৈরি করার পর, আপনাকে ডেভেলপমেন্ট সার্ভার চালাতে হবে যাতে আপনি আপনার অ্যাপ দেখতে পারেন।

৩.১: প্রজেক্ট ফোল্ডারে প্রবেশ করা

cd my-next-app

৩.২: ডেভেলপমেন্ট সার্ভার চালানো

npm run dev

এটি আপনার অ্যাপের ডেভেলপমেন্ট সার্ভার চালু করবে এবং সাধারণত এটি http://localhost:3000 ঠিকানায় চলে যাবে।

ধাপ ৪: ব্রাউজারে অ্যাপ দেখা

আপনার প্রজেক্ট ডেভেলপমেন্ট সার্ভার চালু হলে, ব্রাউজারে গিয়ে http://localhost:3000 এই URL-এ যেতে হবে। আপনি Next.js এর ডিফল্ট ওয়েলকাম পেজ দেখতে পাবেন, যা দেখাবে যে আপনার প্রজেক্ট সফলভাবে সেটআপ হয়েছে।

ধাপ ৫: প্রথম পেজ তৈরি করা

Next.js প্রজেক্টে একটি নতুন পেজ তৈরি করা খুবই সহজ। pages ফোল্ডারে নতুন একটি .js ফাইল তৈরি করুন এবং সেখানে কন্টেন্ট যোগ করুন। উদাহরণস্বরূপ:

1. pages/about.js ফাইল তৈরি করুন।
2. নিচের কোডটি লিখুন:

export default function About() {
  return <h1>এটি About পেজ</h1>;
}

এখন, আপনার অ্যাপ্লিকেশন পুনরায় লোড হলে, http://localhost:3000/about URL-এ গিয়ে আপনি এই পেজটি দেখতে পারবেন।

সারাংশ

এখন আপনি সফলভাবে একটি Next.js প্রজেক্ট তৈরি এবং চালু করেছেন। এটি একটি সহজ প্রক্রিয়া, এবং আপনি আপনার প্রয়োজনীয় ফিচার ও পেজগুলো যোগ করে অ্যাপ্লিকেশনটি কাস্টমাইজ করতে পারবেন। Next.js এর ডেভেলপমেন্ট সার্ভার এবং পেজ-বেসড রাউটিং ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করা খুবই দ্রুত এবং সাশ্রয়ী।

package.json ফাইলটি একটি Node.js প্রজেক্টের মূল কনফিগারেশন ফাইল, যা প্রজেক্টের মেটাডেটা এবং এর ডিপেন্ডেন্সি সমূহ ধারণ করে। NPM (Node Package Manager) এর মাধ্যমে আপনি আপনার প্রজেক্টে ডিপেন্ডেন্সি ইন্সটল, আপডেট এবং ম্যানেজ করতে পারেন। Next.js প্রজেক্টেও এটি গুরুত্বপূর্ণ ভূমিকা পালন করে।

package.json ফাইল

package.json ফাইলটি মূলত প্রজেক্টের সমস্ত তথ্য এবং ডিপেন্ডেন্সি ম্যানেজমেন্ট সিস্টেম হিসেবে কাজ করে। এই ফাইলটি নির্ধারণ করে কোন প্যাকেজগুলি আপনার প্রজেক্টে প্রয়োজন এবং কোন স্ক্রিপ্টগুলো আপনি ব্যবহার করতে চান।

package.json ফাইলের সাধারণ গঠন:

{
  "name": "my-next-app",
  "version": "1.0.0",
  "description": "A Next.js application",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^13.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0"
  },
  "author": "Your Name",
  "license": "MIT"
}

মূল অংশ:

• name: প্রজেক্টের নাম।
• version: প্রজেক্টের সংস্করণ।
• description: প্রজেক্টের বর্ণনা।
• scripts: এখানে বিভিন্ন স্ক্রিপ্ট সংজ্ঞায়িত করা হয় যা আপনার প্রজেক্টে ব্যবহৃত হয়। যেমন dev, build, start।
• dependencies: আপনার প্রজেক্টের জন্য প্রয়োজনীয় প্যাকেজগুলি যা প্রোডাকশনে রান করার সময় ব্যবহৃত হবে।
• devDependencies: শুধুমাত্র ডেভেলপমেন্ট পরিবেশে প্রয়োজনীয় প্যাকেজগুলো।

NPM এর মাধ্যমে ডিপেন্ডেন্সি ম্যানেজমেন্ট

NPM দিয়ে আপনি খুব সহজে প্রজেক্টে ডিপেন্ডেন্সি ইন্সটল করতে পারেন, এবং এই ডিপেন্ডেন্সি গুলি package.json ফাইলে যোগ হয়।

ডিপেন্ডেন্সি ইন্সটল করা

1. প্রধান ডিপেন্ডেন্সি (Production Dependency)

কোনো প্যাকেজ ইন্সটল করতে হলে আপনি npm install <package-name> কমান্ড ব্যবহার করবেন। উদাহরণস্বরূপ:

npm install react

এটি react প্যাকেজটি ইনস্টল করবে এবং package.json ফাইলে এটি dependencies এ যুক্ত হবে।

2. ডেভেলপমেন্ট ডিপেন্ডেন্সি (Development Dependency)

যদি কোনো প্যাকেজ শুধুমাত্র ডেভেলপমেন্ট পরিবেশে প্রয়োজন হয় (যেমন linting বা testing টুলস), তবে আপনি --save-dev ফ্ল্যাগ ব্যবহার করবেন:

npm install eslint --save-dev

এটি eslint প্যাকেজটি ইনস্টল করবে এবং package.json ফাইলে এটি devDependencies এর অংশ হিসেবে যুক্ত হবে।

ডিপেন্ডেন্সি আপডেট এবং ডাউনগ্রেড করা

আপনি আপনার প্রজেক্টে ইনস্টল করা ডিপেন্ডেন্সি আপডেট বা ডাউনগ্রেডও করতে পারেন:

• ডিপেন্ডেন্সি আপডেট:

  npm update <package-name>
  

• একটি নির্দিষ্ট সংস্করণে ডিপেন্ডেন্সি ইন্সটল করা:

  npm install <package-name>@<version>
  

  উদাহরণ:

  npm install react@17.0.0
  

package-lock.json ফাইল

যখন আপনি ডিপেন্ডেন্সি ইনস্টল করেন, তখন NPM একটি package-lock.json ফাইল তৈরি করে। এই ফাইলটি প্রকৃত প্যাকেজ এবং তার নির্ভরতা সম্পর্কে সুনির্দিষ্ট তথ্য ধারণ করে, যার মাধ্যমে আপনি নিশ্চিত হতে পারেন যে আপনার প্রজেক্টটি একক রূপে রান করবে, যদিও একাধিক ডেভেলপার একে ব্যবহার করছেন।

package-lock.json এর ভূমিকা:

• এটি ডিপেন্ডেন্সি এবং তাদের সংস্করণ নির্দিষ্ট করে।
• এটি ডিপেন্ডেন্সির জন্য নির্ভরতা নির্ধারণ করে, যাতে একাধিক ডেভেলপারে একই পরিবেশে কাজ করার সুবিধা হয়।
• আপনার প্রজেক্টের নির্ভরশীলতা পুনরায় ইনস্টল করার সময় এই ফাইলটি নিশ্চিত করে যে সঠিক সংস্করণে প্যাকেজগুলি ইন্সটল হচ্ছে।

NPM এর মাধ্যমে ডিপেন্ডেন্সি ম্যানেজমেন্টের সুবিধা

1. কেন্দ্রীভূত ডিপেন্ডেন্সি ম্যানেজমেন্ট: আপনার সমস্ত ডিপেন্ডেন্সি একটি জায়গায় সংরক্ষিত থাকে, যার ফলে আপনাকে কোন প্যাকেজটি কোথায় ব্যবহৃত হচ্ছে তা ট্র্যাক করতে সহজ হয়।
2. ভার্সন কনট্রোল: NPM ডিপেন্ডেন্সি আপডেট বা ডাউনগ্রেড করার জন্য সহজ পদ্ধতি প্রদান করে। এতে আপনি নির্দিষ্ট ভার্সন ব্যবহার করতে পারবেন, যা আপনার প্রজেক্টের জন্য সবচেয়ে উপযুক্ত।
3. প্রযুক্তিগত সহায়তা: NPM একটি বিশ্বব্যাপী কমিউনিটি দ্বারা সমর্থিত, যেখানে হাজার হাজার প্যাকেজ পাওয়া যায়, যা আপনার প্রজেক্টের কার্যকারিতা বাড়াতে সহায়ক হতে পারে।

উপসংহার

NPM এবং package.json ফাইলের মাধ্যমে Next.js বা যেকোনো Node.js প্রজেক্টে ডিপেন্ডেন্সি ম্যানেজমেন্ট অত্যন্ত সহজ এবং কার্যকর। আপনি সহজেই প্রজেক্টে প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে পারেন, ডিপেন্ডেন্সি আপডেট বা ডাউনগ্রেড করতে পারেন এবং সঠিক সংস্করণ ব্যবহার করে উন্নত ডেভেলপমেন্ট অভিজ্ঞতা পেতে পারেন।

Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক, যা একটি সহজ এবং পরিষ্কার ডিরেক্টরি স্ট্রাকচার প্রদান করে। এটি ডেভেলপারদের জন্য কোড সংগঠিত এবং পরিচালনা করা সহজ করে, এবং এর মধ্যে বেশ কিছু ডিফল্ট ফোল্ডার এবং ফাইল থাকে যা আপনাকে অ্যাপ্লিকেশনটি তৈরি করতে সাহায্য করে।

নিচে Next.js এর ডিরেক্টরি স্ট্রাকচার বিস্তারিতভাবে আলোচনা করা হলো:

১. pages/ ফোল্ডার

pages/ ফোল্ডারটি Next.js এর সবচেয়ে গুরুত্বপূর্ণ ফোল্ডার, কারণ এর মধ্যে থাকা প্রতিটি ফাইল একটি URL রাউটের সাথে সম্পর্কিত। Next.js স্বয়ংক্রিয়ভাবে pages/ ফোল্ডারের ফাইলগুলিকে রাউট হিসেবে ব্যবহার করে।

গুরুত্বপূর্ণ ফাইল ও কনসেপ্ট:

• index.js: এটি আপনার অ্যাপের হোম পেজ, যা / রাউটে অ্যাক্সেস করা যায়।
• about.js: আপনি যদি একটি নতুন পেজ চান, যেমন about পেজ, তাহলে আপনি এখানে একটি about.js ফাইল তৈরি করবেন, যা /about URL এর জন্য ব্যবহার হবে।
• _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.png
• http://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 স্টাইল সংরক্ষণ করার জন্য ব্যবহৃত হয়।