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 ফাইল তৈরি করুন এবং সেখানে কন্টেন্ট যোগ করুন। উদাহরণস্বরূপ:
pages/about.jsফাইল তৈরি করুন।- নিচের কোডটি লিখুন:
export default function About() {
return <h1>এটি About পেজ</h1>;
}
এখন, আপনার অ্যাপ্লিকেশন পুনরায় লোড হলে, http://localhost:3000/about URL-এ গিয়ে আপনি এই পেজটি দেখতে পারবেন।
সারাংশ
এখন আপনি সফলভাবে একটি Next.js প্রজেক্ট তৈরি এবং চালু করেছেন। এটি একটি সহজ প্রক্রিয়া, এবং আপনি আপনার প্রয়োজনীয় ফিচার ও পেজগুলো যোগ করে অ্যাপ্লিকেশনটি কাস্টমাইজ করতে পারবেন। Next.js এর ডেভেলপমেন্ট সার্ভার এবং পেজ-বেসড রাউটিং ব্যবহার করে ওয়েব অ্যাপ্লিকেশন তৈরি করা খুবই দ্রুত এবং সাশ্রয়ী।
Read more
