Next.js এর মাধ্যমে একটি প্রজেক্ট শুরু করলে প্রথমে একটি পেজ তৈরি করা অত্যন্ত সহজ। আপনি শুধুমাত্র pages/ ফোল্ডারে একটি নতুন ফাইল তৈরি করে, সেই ফাইলকে একটি নতুন রাউট হিসেবে ব্যবহার করতে পারেন। নিচে প্রথম পেজ তৈরি করার প্রক্রিয়া বিস্তারিতভাবে বর্ণনা করা হলো।
১. প্রথম Next.js প্রজেক্ট তৈরি করা
প্রথমে, Next.js ইনস্টলেশন ও সেটআপ করার পর আপনার প্রজেক্ট ডিরেক্টরির মধ্যে pages/ ফোল্ডারে একটি নতুন পেজ ফাইল তৈরি করুন।
প্রজেক্ট তৈরি করার জন্য:
npx create-next-app@latest my-first-next-app
cd my-first-next-app
npm run dev
এখন আপনার প্রজেক্টে pages/ ফোল্ডার থাকবে এবং আপনার অ্যাপটি http://localhost:3000 এ চালু থাকবে।
২. প্রথম পেজ তৈরি করা
এখন, pages/ ফোল্ডারে একটি নতুন ফাইল তৈরি করুন, যেমন about.js, এবং এতে একটি সিম্পল React কম্পোনেন্ট লিখুন।
উদাহরণ:
pages/about.js ফাইলটি তৈরি করুন:
// pages/about.js
import React from 'react';
function AboutPage() {
return (
<div>
<h1>আমার প্রথম Next.js পেজ</h1>
<p>এটি একটি সিম্পল about পেজ যা Next.js দিয়ে তৈরি করা হয়েছে।</p>
</div>
);
}
export default AboutPage;
এখন, আপনার about.js পেজটি http://localhost:3000/about URL এ অ্যাক্সেস করা যাবে। Next.js নিজেই এই রাউটটি ম্যাপ করে দিয়েছে।
৩. index.js (হোম পেজ) কাস্টমাইজ করা
Next.js প্রজেক্টের মধ্যে pages/index.js ফাইলটি প্রাথমিকভাবে হোম পেজ হিসেবে থাকে। এটি প্রথম পেজ হিসেবে কাজ করে, এবং আপনি এতে কিছু কাস্টম কনটেন্ট যোগ করতে পারেন।
উদাহরণ:
pages/index.js ফাইলটি:
// pages/index.js
import React from 'react';
function HomePage() {
return (
<div>
<h1>স্বাগতম! এটি আমার প্রথম Next.js অ্যাপ</h1>
<p>এটি Next.js এর মাধ্যমে তৈরি করা একটি সিম্পল অ্যাপ।</p>
<a href="/about">About পেজে যান</a>
</div>
);
}
export default HomePage;
এখন, আপনি http://localhost:3000 এ গিয়ে হোম পেজ দেখতে পাবেন, এবং সেখানে About পেজে যাওয়ার জন্য একটি লিঙ্কও থাকবে।
৪. ডাইনামিক রাউটিং ব্যবহার করা
Next.js আপনাকে ডাইনামিক রাউট তৈরি করারও সুবিধা দেয়। যদি আপনি চান যে একটি পেজ একটি ডাইনামিক প্যারামিটার গ্রহণ করুক, তাহলে আপনাকে সেই ফোল্ডারে ডাইনামিক ফাইল নাম ব্যবহার করতে হবে।
উদাহরণ:
pages/posts/[id].js ফাইলটি তৈরি করুন:
// pages/posts/[id].js
import { useRouter } from 'next/router';
function PostPage() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>পোস্টের আইডি: {id}</h1>
<p>এটি একটি ডাইনামিক পেজ। URL এর আইডি প্যারামিটার অনুযায়ী কনটেন্ট রেন্ডার হবে।</p>
</div>
);
}
export default PostPage;
এখন, আপনি http://localhost:3000/posts/1, http://localhost:3000/posts/2 ইত্যাদি URL থেকে পোস্টের আইডি প্যারামিটার নিয়ে ডাইনামিক পেজ দেখতে পাবেন।
৫. পেজের মধ্যে লিঙ্ক ব্যবহার করা
Next.js আপনাকে ইন্টারনাল রাউটিং এবং লিঙ্কিং সহজভাবে করতে দেয় next/link কম্পোনেন্ট ব্যবহার করে। আপনি যদি অ্যাপের মধ্যে অন্য পেজে নেভিগেট করতে চান, তবে Link কম্পোনেন্ট ব্যবহার করতে হবে।
উদাহরণ:
pages/index.js ফাইলটি:
// pages/index.js
import Link from 'next/link';
function HomePage() {
return (
<div>
<h1>স্বাগতম! এটি আমার প্রথম Next.js অ্যাপ</h1>
<p>এটি Next.js এর মাধ্যমে তৈরি করা একটি সিম্পল অ্যাপ।</p>
<Link href="/about">
<a>About পেজে যান</a>
</Link>
</div>
);
}
export default HomePage;
এখন, আপনি <Link> কম্পোনেন্ট ব্যবহার করে হোম পেজ থেকে About পেজে যেতে পারবেন।
সারাংশ
Next.js এ প্রথম পেজ তৈরি করা অত্যন্ত সহজ এবং সরল। আপনি pages/ ফোল্ডারে একটি .js ফাইল তৈরি করলেই তা স্বয়ংক্রিয়ভাবে রাউট হিসেবে কাজ করবে। আপনি চাইলে ডাইনামিক রাউটিং এবং লিঙ্কিং সুবিধাও ব্যবহার করতে পারেন। Next.js এর এই সহজ রাউটিং ব্যবস্থা আপনার অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও দ্রুত এবং কার্যকর করে তোলে।
Read more
