Next.js Installation and Setup in VS Code (Bangla Tutorial)
If you’re a beginner and want to start developing modern websites, then Next.js Installation and Setup in VS Code is the first step you must learn. In this Bangla tutorial, we will walk you through how to install Next.js, set up your environment, and run your first Next.js project.
This guide is beginner-friendly and explains every step clearly so you can easily understand Next.js Installation and Setup in VS Code.
১. Next.js কী? (Short Overview)
Next.js হলো React ভিত্তিক একটি শক্তিশালী ফ্রেমওয়ার্ক যা SSR, SSG, Routing, Optimization সহ অনেক অ্যাডভান্স ফিচার নিয়ে কাজ করে। তাই শুরু করার আগে আপনাকে এটি ঠিকভাবে করতে হবে।
২. Prerequisites (যা প্রয়োজন)
Next.js Installation and Setup in VS Code করার আগে নিচের সফটওয়্যারগুলো ইন্সটল থাকতে হবে:
Node.js (LTS version)
Download: https://nodejs.org
Node.js ইন্সটল না থাকলে Next.js কাজ করবে না।
Visual Studio Code (VS Code)
Download: https://code.visualstudio.com
এখানেই আপনি Next.js কোড লিখবেন।
৩. Node.js ইন্সটল হয়েছে কিনা চেক করুন
VS Code → Terminal খুলে লিখুন:
node -v
npm -v
সঠিক ভার্সন দেখালে বুঝবেন আপনি এটি করার জন্য প্রস্তুত।
৪. Create a New Next.js Project
টার্মিনালে নিচের কমান্ডটি রান করুন:
npx create-next-app@latest my-next-app
এটি আপনাকে কিছু প্রশ্ন করবে:
- TypeScript ব্যবহার করবেন?
- ESLint?
- Tailwind CSS?
- App Router?
আপনার প্রয়োজন অনুযায়ী Yes/No নির্বাচন করুন।
এভাবেই শুরু হয় আপনার এটার প্রজেক্ট সেটআপ।
৫. Project Folder খুলুন VS Code-এ
টার্মিনালে লিখুন:
cd my-next-app
code .
এবার VS Code-এ প্রজেক্ট ওপেন হয়ে যাবে।
৬. Start the Development Server
npm run dev
এরপর আপনার ব্রাউজারে যান:
http://localhost:3000
এখন আপনার প্রজেক্ট সফলভাবে রান করছে এবং Next.js Installation and Setup in VS Code সম্পূর্ণ হয়েছে।
৭. Folder Structure (For Beginners)
App Router ব্যবহার করলে আপনি দেখতে পাবেন:
- app/ — Main application
- page.js — Homepage
- layout.js — Layout
- globals.css — Global styles
- next.config.js — Config file
এগুলো জানলে এটি আরও সহজ হয়ে যাবে।
৮. VS Code Extensions (Highly Recommended)
Next.js কাজ আরও সহজ হবে নিচের extensions দিয়ে:
- ES7+ React Snippets
- Prettier – Code Formatter
- Tailwind CSS IntelliSense
- GitLens
Conclusion
এই ছিল সম্পূর্ণ Next.js Installation and Setup in VS Code (Bangla Tutorial)।
এখন আপনি এটি দিয়ে ওয়েবসাইট বা অ্যাপ বানানো শুরু করতে পারবেন। Beginner-friendly এই গাইডটি আপনাকে সহজেই Next.js শেখার সঠিক পথে নিয়ে যাবে।