Next.js এ পেজ এবং কম্পোনেন্টস তৈরি করা

Next.js এ পেজ এবং কম্পোনেন্ট তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয়ভাবে রাউটিং সিস্টেমের সাথে কাজ করে। Next.js রাউটিং এবং কম্পোনেন্ট সিস্টেম ব্যবহারে React এর প্রথাগত পদ্ধতি অনুসরণ করে, কিন্তু কিছু অতিরিক্ত সুবিধা প্রদান করে যেমন পেজ রাউটিং, ডাইনামিক রাউটিং, ইত্যাদি।

এখানে আমরা দেখব কীভাবে Next.js এ পেজ এবং কম্পোনেন্ট তৈরি করতে হয়।

১. Next.js এ পেজ তৈরি করা

Next.js এ প্রতিটি ফাইল pages/ ফোল্ডারে রাখলে এটি একটি পেজ হিসেবে কাজ করবে এবং সেই পেজের URL স্বয়ংক্রিয়ভাবে নির্ধারিত হবে। এর মানে হলো, আপনি যদি pages/about.js ফাইল তৈরি করেন, তাহলে এটি /about রাউটে পাওয়া যাবে।

পেজ তৈরি করার উদাহরণ:

1. pages/index.js: হোম পেজ

// pages/index.js

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App!</h1>
      <p>This is the home page.</p>
    </div>
  );
}

এই পেজটি আপনার অ্যাপ্লিকেশনের হোম পেজ হিসেবে কাজ করবে, এবং এটি http://localhost:3000/ URL এ অ্যাক্সেস করা যাবে।

2. pages/about.js: একটি অতিরিক্ত পেজ

// pages/about.js

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

এই পেজটি http://localhost:3000/about URL এ অ্যাক্সেস করা যাবে।

২. Next.js এ ডাইনামিক পেজ তৈরি করা

Next.js আপনাকে ডাইনামিক রাউটিংও করতে দেয়। এটি একটি গুরুত্বপূর্ণ ফিচার যা আপনাকে পেজের URL প্যারামিটার অনুযায়ী ডেটা রেন্ডার করতে সহায়তা করে।

ডাইনামিক পেজ তৈরি করার উদাহরণ:

ধরা যাক, আপনি একটি ব্লগ অ্যাপ তৈরি করছেন, যেখানে প্রতিটি পোস্টের জন্য একটি ডাইনামিক পেজ তৈরি করতে হবে। আপনি pages/posts/[id].js ফাইল তৈরি করতে পারেন, যেখানে [id] একটি ডাইনামিক প্যারামিটার হিসেবে কাজ করবে।

1. pages/posts/[id].js: ডাইনামিক পেজ

// pages/posts/[id].js

import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;  // URL থেকে id প্যারামিটার সংগ্রহ করা

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

এই পেজটি http://localhost:3000/posts/1, http://localhost:3000/posts/2, ইত্যাদি URL দ্বারা এক্সেস করা যাবে, যেখানে প্রতিটি URL এর জন্য ভিন্ন ভিন্ন পেজ রেন্ডার হবে।

৩. Next.js এ কম্পোনেন্ট তৈরি করা

Next.js এ কম্পোনেন্ট তৈরি করা খুব সহজ। আপনি সাধারণ React কম্পোনেন্ট ব্যবহার করবেন যা পুনঃব্যবহারযোগ্য এবং স্ট্যাটিক বা ডাইনামিক কনটেন্ট রেন্ডার করতে সক্ষম।

কম্পোনেন্ট তৈরি করার উদাহরণ:

1. components/Header.js: একটি হেডার কম্পোনেন্ট

// components/Header.js

export default function Header() {
  return (
    <header>
      <h1>My Next.js App</h1>
    </header>
  );
}

এই কম্পোনেন্টটি আপনি বিভিন্ন পেজ বা কম্পোনেন্টে ইমপোর্ট করে ব্যবহার করতে পারবেন।

2. pages/index.js: হোম পেজে হেডার কম্পোনেন্ট ব্যবহার করা

// pages/index.js

import Header from '../components/Header';

export default function Home() {
  return (
    <div>
      <Header />
      <p>Welcome to my app!</p>
    </div>
  );
}

এখন, Header কম্পোনেন্টটি Home পেজে রেন্ডার হবে।

৪. Next.js এ স্টাইলিং এবং CSS

Next.js CSS স্টাইলিং অনেক সহজ, এবং আপনি বিভিন্ন পদ্ধতিতে স্টাইলিং করতে পারেন: CSS, CSS Modules, এবং স্টাইলড কম্পোনেন্ট।

উদাহরণ:

1. styles/Home.module.css: মডিউল CSS ব্যবহার

/* styles/Home.module.css */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.heading {
  color: blue;
  text-align: center;
}

2. pages/index.js: CSS মডিউল ব্যবহার

// pages/index.js

import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.heading}>Welcome to My Next.js App!</h1>
      <p>This is the home page.</p>
    </div>
  );
}

এখানে Home.module.css ফাইলটি index.js পেজে স্টাইল প্রয়োগ করছে।

৫. _app.js এবং গ্লোবাল লেআউট

Next.js এর _app.js ফাইলটি অ্যাপ্লিকেশনের মূল কনটেইনার কম্পোনেন্ট। এটি সমস্ত পেজে গ্লোবাল লেআউট, স্টাইল, অথবা গ্লোবাল স্টেট ব্যবহারের জন্য উপযোগী।

// pages/_app.js

import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <h2>Global Header</h2>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

এখানে _app.js ফাইলটি সকল পেজে গ্লোবাল হেডার এবং গ্লোবাল CSS প্রয়োগ করছে।

সারাংশ

Next.js এ পেজ এবং কম্পোনেন্ট তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয় রাউটিং সিস্টেমের মাধ্যমে এটি পরিচালিত হয়। আপনি pages/ ফোল্ডারে প্রতিটি ফাইল দিয়ে একটি নতুন পেজ তৈরি করতে পারেন, এবং কম্পোনেন্টগুলো পুনঃব্যবহারযোগ্য হয়, যেগুলি আপনি পেজের মধ্যে ইমপোর্ট করে ব্যবহার করতে পারেন। Next.js এর কাস্টম অ্যাপ কনফিগারেশন এবং গ্লোবাল লেআউট ব্যবহারের মাধ্যমে অ্যাপ্লিকেশন আরো সুসংগঠিত ও ফ্লেক্সিবল হয়ে ওঠে।