1. Next.js Introduction
📘 কনসেপ্ট (থিওরি)
নেক্সট জেএস (Next.js) হলো ফুল-স্ট্যাক ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি রিঅ্যাক্ট (React) ফ্রেমওয়ার্ক।
আপনি ইউজার ইন্টারফেস তৈরি করতে রিঅ্যাক্ট কম্পোনেন্ট ব্যবহার করেন এবং অতিরিক্ত ফিচার ও অপ্টিমাইজেশনের জন্য Next.js ব্যবহার করেন।
ভেতরের দিকে, Next.js রিঅ্যাক্টের জন্য প্রয়োজনীয় টুলিংগুলো যেমন বান্ডলিং, কম্পাইলিং ইত্যাদি স্বয়ংক্রিয়ভাবে কনফিগার করে।
কেন Next.js?
- **রাউটিং (Routing)**: সার্ভার কম্পোনেন্টের ওপর ভিত্তি করে তৈরি একটি ফাইল-সিস্টেম ভিত্তিক রাউটার।
- **রেন্ডারিং (Rendering)**: ক্লায়েন্ট-সাইড এবং সার্ভার-সাইড রেন্ডারিং।
- **ডেটা ফেচিং (Data Fetching)**: async/await দিয়ে সহজ ডেটা ফেচিং।
- **স্টাইলিং (Styling)**: CSS Modules, Tailwind CSS, এবং CSS-in-JS এর জন্য সাপোর্ট।
- **অপ্টিমাইজেশন (Optimizations)**: ইমেজ, ফন্ট এবং স্ক্রিপ্ট অপ্টিমাইজেশন।
💡 উদাহরণ
Next.js অ্যাপ তৈরি করা:
আপনি
create-next-app ব্যবহার করে একটি নতুন Next.js অ্যাপ শুরু করতে পারেন:
npx create-next-app@latest
একটি সাধারণ পেজ (App Router):
// app/page.tsx
export default function Home() {
return
Hello, Next.js!
}🎯 আপনার কাজ (প্র্যাকটিস)
HomePage নামের একটি সাধারণ Next.js পেজ কম্পোনেন্ট লিখুন যা "Welcome to Next.js" টেক্সটসহ একটি main.nextjs
Loading...
OUTPUT
Run your code to see the output here...