১.১: প্রয়োজনীয় টুল ইনস্টল করা
প্রথমে আমাদের নিশ্চিত করতে হবে যে আমাদের কম্পিউটারে Node.js এবং npm ইনস্টল আছে। টার্মিনালে নিচের কমান্ড রান করুন:
node -v
npm -vযদি এই কমান্ডগুলো ভার্সন নাম্বার দেখায়, তাহলে আপনার সিস্টেমে Node.js এবং npm ইনস্টল আছে। যদি না থাকে, তাহলে Node.js ওয়েবসাইট থেকে ডাউনলোড করে ইনস্টল করুন।
১.২: Next.js প্রজেক্ট তৈরি করা
এখন আমরা Next.js প্রজেক্ট তৈরি করব। টার্মিনালে নিচের কমান্ড রান করুন:
npx create-next-app@latest my-nextjs-websiteএখানে my-nextjs-website হল আপনার প্রজেক্টের নাম। আপনি চাইলে অন্য নাম দিতে পারেন।
কমান্ড রান করার পর, সিস্টেম আপনাকে কিছু প্রশ্ন জিজ্ঞাসা করবে। নিচের উত্তরগুলো দিন:
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … Noএই কমান্ড রান করার পর, Next.js প্রজেক্টের সমস্ত ফাইল ও ফোল্ডার তৈরি হয়ে যাবে।
১.৩: প্রজেক্টে প্রবেশ করা এবং সার্ভার চালানো
এখন আমরা প্রজেক্ট ফোল্ডারে প্রবেশ করব এবং ডেভেলপমেন্ট সার্ভার চালাব:
cd my-nextjs-website
npm run devএই কমান্ড রান করার পর, আপনার ব্রাউজারে http://localhost:3000 এ গিয়ে দেখুন। আপনি Next.js এর ডিফল্ট ওয়েলকাম পেজ দেখতে পাবেন।
১.৪: প্রজেক্ট স্ট্রাকচার বুঝা
Next.js প্রজেক্ট তৈরি করার পর, আমাদের প্রজেক্টে নিচের ফোল্ডার স্ট্রাকচার থাকবে:
my-nextjs-website/
├── app/
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── public/
│ └── next.svg
│ └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── package-lock.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
└── tsconfig.jsonএখানে:
app/ফোল্ডারে আমাদের অ্যাপ্লিকেশনের পেজ এবং কম্পোনেন্টগুলো থাকবেpublic/ফোল্ডারে স্ট্যাটিক ফাইল যেমন ইমেজ, ফন্ট ইত্যাদি থাকবেnext.config.jsফাইলে Next.js এর কনফিগারেশন থাকবেtailwind.config.jsফাইলে Tailwind CSS এর কনফিগারেশন থাকবেpackage.jsonফাইলে প্রজেক্টের ডিপেন্ডেন্সি এবং স্ক্রিপ্টগুলো থাকবে