Default Page এবং Custom Components গাইড ও নোট

Next.js একটি React ভিত্তিক ফ্রেমওয়ার্ক যা আপনাকে সহজে ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এর অন্যতম শক্তিশালী ফিচার হল ডিফল্ট পেজ সিস্টেম এবং কাস্টম কম্পোনেন্ট তৈরি করার সহজ পদ্ধতি। এই টিউটোরিয়ালে আমরা ডিফল্ট পেজ এবং কাস্টম কম্পোনেন্ট কীভাবে তৈরি করতে হয়, তা বিস্তারিতভাবে আলোচনা করব।

১. ডিফল্ট পেজ (Default Page)

Next.js-এর অন্যতম সুবিধা হল এর ডিফল্ট পেজ রাউটিং সিস্টেম। আপনি যখন Next.js প্রজেক্ট তৈরি করেন, তখন pages/ ফোল্ডারে একটি index.js ফাইল ডিফল্টভাবে থাকে, যা আপনার অ্যাপের হোম পেজ হিসেবে কাজ করে।

pages/index.js ফাইলের উদাহরণ:

// pages/index.js
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <p>This is the default home page of your Next.js app.</p>
    </div>
  );
};

export default Home;

এই index.js ফাইলটি অ্যাপের হোম পেজ হিসেবে কাজ করবে এবং এটি http://localhost:3000/ রাউটে এক্সেস করা যাবে।

২. কাস্টম কম্পোনেন্ট তৈরি করা (Creating Custom Components)

Next.js একটি React ফ্রেমওয়ার্ক, তাই এখানে আপনি React এর মতোই কম্পোনেন্ট তৈরি করতে পারেন। কাস্টম কম্পোনেন্ট তৈরি করতে আপনাকে সাধারণ React কম্পোনেন্ট ফাইল তৈরি করতে হবে এবং সেই ফাইলগুলোকে প্রয়োজন অনুযায়ী অন্য পেজ বা কম্পোনেন্টে ব্যবহার করতে হবে।

কাস্টম কম্পোনেন্ট উদাহরণ:

ধরা যাক, আমরা একটি সাধারণ Header কম্পোনেন্ট তৈরি করব যা আমাদের অ্যাপের সব পেজে দেখা যাবে।

components/Header.js:

// components/Header.js
import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My Next.js App</h1>
      <nav>
        <a href="/">Home</a> | <a href="/about">About</a>
      </nav>
    </header>
  );
};

export default Header;

এখন, এই Header কম্পোনেন্টটি আমরা আমাদের পেজে ব্যবহার করতে পারি। উদাহরণস্বরূপ, pages/index.js পেজে এই Header কম্পোনেন্টটি যুক্ত করি।

pages/index.js ফাইলটি আপডেট করা:

// pages/index.js
import React from 'react';
import Header from '../components/Header';

const Home = () => {
  return (
    <div>
      <Header />
      <h1>Welcome to My Next.js App</h1>
      <p>This is the default home page of your Next.js app.</p>
    </div>
  );
};

export default Home;

এখন, Header কম্পোনেন্টটি হোম পেজে দেখা যাবে এবং এটি প্রতিটি পেজে রিইউজ করা যাবে।

৩. _app.js এবং গ্লোবাল কম্পোনেন্ট ব্যবহার

Next.js আপনাকে _app.js ফাইল ব্যবহার করে গ্লোবাল লেআউট এবং কম্পোনেন্ট ব্যবস্থাপনার সুযোগ দেয়। এটি মূলত আপনার অ্যাপের সব পেজে সাধারণভাবে কম্পোনেন্ট বা লেআউট যোগ করতে ব্যবহৃত হয়। আপনি যদি চান যে কোনো কম্পোনেন্ট বা লেআউট প্রতিটি পেজে দেখাক, তবে আপনি এটি _app.js ফাইলে ইনক্লুড করতে পারেন।

উদাহরণ: pages/_app.js

// pages/_app.js
import React from 'react';
import Header from '../components/Header';
import '../styles/globals.css';

const MyApp = ({ Component, pageProps }) => {
  return (
    <div>
      <Header />
      <Component {...pageProps} />
    </div>
  );
};

export default MyApp;

এখানে, Header কম্পোনেন্টটি _app.js ফাইলে যুক্ত করা হয়েছে, যার ফলে এটি আপনার অ্যাপের প্রতিটি পেজে দেখাবে।

৪. ডাইনামিক পেজ তৈরি করা (Dynamic Page Creation)

Next.js এর একটি শক্তিশালী ফিচার হল ডাইনামিক রাউটিং, যেখানে আপনি URL প্যারামিটার ব্যবহার করে ডাইনামিক পেজ তৈরি করতে পারেন। উদাহরণস্বরূপ, যদি আপনি চান যে /posts/[id] URL এ প্রতিটি পোস্টের জন্য আলাদা পেজ তৈরি হোক, তাহলে আপনাকে [id].js ফাইল তৈরি করতে হবে।

pages/posts/[id].js ফাইল উদাহরণ:

// pages/posts/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;  // URL থেকে প্যারামিটার নেওয়া

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is a dynamic post page. The ID is: {id}</p>
    </div>
  );
};

export default Post;

এখন, আপনি http://localhost:3000/posts/1 অথবা http://localhost:3000/posts/2 এই ধরনের URL এ ডাইনামিক পেজ দেখতে পাবেন যেখানে id প্যারামিটার অনুযায়ী কনটেন্ট শো হবে।

৫. কাস্টম 404 পেজ

Next.js ডিফল্টভাবে একটি 404 পেজ প্রদান করে, কিন্তু আপনি চাইলে নিজের কাস্টম 404 পেজ তৈরি করতে পারেন। কাস্টম 404 পেজ তৈরি করার জন্য pages/404.js ফাইল তৈরি করতে হয়।

pages/404.js উদাহরণ:

// pages/404.js
import React from 'react';

const Custom404 = () => {
  return (
    <div>
      <h1>Oops! Page not found.</h1>
      <p>Sorry, we couldn't find the page you're looking for.</p>
    </div>
  );
};

export default Custom404;

এখন, যদি ব্যবহারকারী কোনো অবৈধ URL এ যান, তবে এটি কাস্টম 404 পেজ দেখাবে।

সারাংশ

Next.js এ ডিফল্ট পেজ এবং কাস্টম কম্পোনেন্ট তৈরি করা খুবই সহজ। আপনি pages/ ফোল্ডারে পেজ তৈরি করে রাউটিং পরিচালনা করতে পারেন, এবং components/ ফোল্ডারে কাস্টম কম্পোনেন্ট তৈরি করে সেগুলিকে অ্যাপের বিভিন্ন অংশে রিইউজ করতে পারেন। এছাড়া, _app.js এবং _document.js ফাইল ব্যবহার করে গ্লোবাল লেআউট এবং কাস্টম 404 পেজ তৈরি করা সম্ভব।