Next.js এর বেসিক কনফিগারেশন

Next.js আপনাকে একটি কাস্টম কনফিগারেশন তৈরি করার সুযোগ দেয়, যাতে আপনি আপনার অ্যাপ্লিকেশনের বিভিন্ন সেটিংস কাস্টমাইজ করতে পারেন। Next.js ডিফল্ট কনফিগারেশন দিয়ে অ্যাপ তৈরি করা যায়, তবে কখনো কখনো বিশেষ কিছু কনফিগারেশন প্রয়োজন হতে পারে যেমন: রাউটিং, ইমেজ অপটিমাইজেশন, পেজ পিডিং ইত্যাদি।

নিচে Next.js এর বেসিক কনফিগারেশন এবং এর ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

১. next.config.js ফাইল

Next.js এর কনফিগারেশন সাধারণত next.config.js ফাইলের মাধ্যমে করা হয়। এই ফাইলটি আপনার প্রজেক্টের মূল ডিরেক্টরিতে থাকে এবং এটি Next.js এর কাস্টম কনফিগারেশন সেটিংস ধারণ করে। এই ফাইলটি শুধুমাত্র JavaScript কনফিগারেশন ফাইল, যেখানে আপনি আপনার অ্যাপ্লিকেশনের প্রয়োজনীয় সেটিংস করতে পারবেন।

next.config.js ফাইলের একটি উদাহরণ:

// next.config.js

module.exports = {
  reactStrictMode: true,  // React Strict Mode চালু
  env: {
    customKey: 'value',   // কাস্টম পরিবেশ ভেরিয়েবল
  },
  images: {
    domains: ['example.com'],  // নির্দিষ্ট ডোমেইন থেকে ইমেজ লোড করার অনুমতি
  },
  i18n: {
    locales: ['en', 'bn'],     // মাল্টি-ল্যাঙ্গুয়েজ সাপোর্ট
    defaultLocale: 'en',
  },
  webpack: (config, { isServer }) => {
    // কাস্টম Webpack কনফিগারেশন
    if (!isServer) {
      config.resolve.fallback = { fs: false }
    }
    return config;
  }
}

এখানে কিছু মূল কনফিগারেশন ফিচার আলোচনা করা হলো:

২. reactStrictMode

reactStrictMode অপশনটি React Strict Mode চালু বা বন্ধ করার জন্য ব্যবহৃত হয়। Strict Mode একটি React ফিচার, যা কোডের সম্ভাব্য সমস্যাগুলি চিহ্নিত করতে সাহায্য করে।

reactStrictMode: true

এটি যদি true হয়, তবে React আপনার অ্যাপ্লিকেশনকে কঠোরভাবে চেক করবে এবং ভুল বা অপ্রয়োজনীয় কোডের জন্য সতর্কবার্তা দেখাবে।

৩. env

Next.js আপনাকে কাস্টম পরিবেশ ভেরিয়েবল সংজ্ঞায়িত করার সুযোগ দেয়, যা আপনার অ্যাপের বিভিন্ন জায়গায় ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, API URL বা ডেটাবেস কনফিগারেশন।

env: {
  customKey: 'value'
}

এই কনফিগারেশনের মাধ্যমে আপনি process.env.customKey এর মাধ্যমে এই ভেরিয়েবল অ্যাক্সেস করতে পারবেন।

৪. images

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

images: {
  domains: ['example.com']
}

এতে, শুধু example.com ডোমেইন থেকে ইমেজ লোড করা যাবে। অন্য ডোমেইন থেকে ইমেজ লোড করতে হলে আপনাকে সেগুলোকেও এখানে যুক্ত করতে হবে।

৫. i18n (Multilingual Support)

Next.js মাল্টি-ল্যাঙ্গুয়েজ সাপোর্ট (i18n) প্রদান করে, যা আপনাকে একাধিক ভাষায় আপনার অ্যাপ্লিকেশনকে কনফিগার করতে সাহায্য করে। এই কনফিগারেশনটি locales এবং defaultLocale এর মাধ্যমে কাজ করে।

i18n: {
  locales: ['en', 'bn'],
  defaultLocale: 'en'
}

এটি দুটি ভাষা en (ইংরেজি) এবং bn (বাংলা) সমর্থন করে এবং en কে ডিফল্ট ভাষা হিসেবে সেট করে।

৬. webpack কনফিগারেশন

Next.js আপনাকে কাস্টম Webpack কনফিগারেশন করতে দেয়। আপনি webpack ফাংশন ব্যবহার করে Webpack এর কনফিগারেশন কাস্টমাইজ করতে পারেন।

webpack: (config, { isServer }) => {
  if (!isServer) {
    config.resolve.fallback = { fs: false }  // ক্লায়েন্ট সাইডে fs মডিউল ব্যবহার নিষিদ্ধ
  }
  return config;
}

এখানে আপনি ক্লায়েন্ট সাইডের জন্য fs (ফাইল সিস্টেম) মডিউলকে false সেট করেছেন, কারণ এটি ক্লায়েন্ট সাইডে ব্যবহার করা যাবে না।

৭. প্রতিটি ফিচারের বিবরণ

• reactStrictMode: React Strict Mode চালু বা বন্ধ করা যায়।
• env: কাস্টম পরিবেশ ভেরিয়েবল সংজ্ঞায়িত করা।
• images: ইমেজ অপটিমাইজেশন এবং ডোমেইন কনফিগারেশন।
• i18n: মাল্টি-ল্যাঙ্গুয়েজ সাপোর্ট এবং ডিফল্ট ভাষা নির্বাচন।
• webpack: কাস্টম Webpack কনফিগারেশন সেট করা।

সারাংশ

Next.js এর কনফিগারেশন অত্যন্ত নমনীয় এবং এটি আপনাকে আপনার প্রজেক্টের প্রয়োজন অনুযায়ী বিভিন্ন সেটিংস কাস্টমাইজ করার সুযোগ দেয়। next.config.js ফাইলের মাধ্যমে আপনি React Strict Mode, কাস্টম পরিবেশ ভেরিয়েবল, ইমেজ অপটিমাইজেশন, মাল্টি-ল্যাঙ্গুয়েজ সাপোর্ট, এবং Webpack কনফিগারেশন খুব সহজে কাস্টমাইজ করতে পারেন।

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 এর এই সহজ রাউটিং ব্যবস্থা আপনার অ্যাপ্লিকেশন ডেভেলপমেন্ট আরও দ্রুত এবং কার্যকর করে তোলে।

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

এখানে Next.js এর পেজ রাউটিং কী এবং এটি কিভাবে কাজ করে তা বিস্তারিতভাবে আলোচনা করা হলো।

পেজ রাউটিং কী?

পেজ রাউটিং হল এমন একটি প্রক্রিয়া যার মাধ্যমে ওয়েব পেজগুলো URL এর মাধ্যমে অ্যাক্সেস করা হয়। Next.js এর ক্ষেত্রে, পেজ রাউটিং স্বয়ংক্রিয়ভাবে কাজ করে, অর্থাৎ আপনি একটি ফাইল তৈরি করলে সেটি স্বয়ংক্রিয়ভাবে একটি রাউট হিসেবে কাজ করতে শুরু করে।

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

কিভাবে কাজ করে Next.js এর পেজ রাউটিং?

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

১. ডিফল্ট পেজ রাউটিং

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

উদাহরণ:

• pages/index.js → রাউট: /
  • এটি অ্যাপের হোম পেজ। আপনি যখন http://localhost:3000/ এ যান, এটি index.js পেজ রেন্ডার করবে।
• pages/about.js → রাউট: /about
  • যদি আপনি about.js ফাইলটি pages/ ফোল্ডারে তৈরি করেন, তবে এটি http://localhost:3000/about এই URL এর মাধ্যমে এক্সেস করা যাবে।

২. ডাইনামিক রাউটিং

Next.js ডাইনামিক রাউটিং সমর্থন করে, অর্থাৎ আপনি চাইলে URL প্যারামিটার হিসেবে ভেরিয়েবল ব্যবহার করতে পারেন। এর জন্য ফাইলের নামের মধ্যে [] চিহ্ন ব্যবহার করতে হবে। এতে সেই পেজটি ডাইনামিক রাউট হিসেবে কাজ করবে।

উদাহরণ:

• pages/posts/[id].js → রাউট: /posts/:id
  • এখানে, [id].js পেজটি http://localhost:3000/posts/1 বা http://localhost:3000/posts/2 এই ধরনের ডাইনামিক রাউটের জন্য ব্যবহৃত হবে।

এখানে id একটি প্যারামিটার যা আপনি কোডের মধ্যে ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:

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

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post ID: {id}</p>
}

export default Post

এই কোডে router.query.id দ্বারা URL প্যারামিটার id এর মান অ্যাক্সেস করা হবে এবং তা পেজে রেন্ডার করা হবে।

৩. নেস্টেড রাউটিং (Nested Routing)

Next.js পেজ রাউটিং সিস্টেমে নেস্টেড (nested) রাউটিংও সহজে করা যায়। আপনি যদি pages/ ফোল্ডারে কোনো সাব-ফোল্ডার তৈরি করেন, তবে সেই সাব-ফোল্ডারের ফাইলগুলোও রাউট হিসেবে কাজ করবে।

উদাহরণ:

• pages/blog/index.js → রাউট: /blog
  • pages/blog/ ফোল্ডারের মধ্যে থাকা index.js ফাইলটি /blog রাউটের জন্য ব্যবহৃত হবে।
• pages/blog/[slug].js → রাউট: /blog/:slug
  • যদি আপনি [slug].js ফাইলটি pages/blog/ ফোল্ডারে রাখেন, তাহলে এটি /blog/some-post বা /blog/another-post রাউটের জন্য ব্যবহৃত হবে।

৪. পেজ পিডিং (Page Preloading)

Next.js স্বয়ংক্রিয়ভাবে পেজ পিডিং (preloading) এর মাধ্যমে রাউট পরিবর্তন হওয়ার আগেই পরবর্তী পেজের জন্য ডাটা লোড করে নেয়। এই ফিচারটি পেজ লোডিংকে দ্রুত এবং কার্যকর করে।

৫. 404 পেজ

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

উদাহরণ:

// pages/404.js
const Custom404 = () => {
  return <h1>404 - Page Not Found</h1>
}

export default Custom404

এটি http://localhost:3000/some-non-existent-page এই ধরনের ভুল URL এ গিয়ে কাস্টম 404 পেজটি প্রদর্শন করবে।

সারাংশ

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

Next.js রাউটিং ব্যবস্থাটি খুবই শক্তিশালী এবং সহজ। এটি ডাইনামিক রাউটিং (Dynamic Routing) সমর্থন করে, যার মাধ্যমে আপনি অ্যাপের বিভিন্ন পেজ এবং ডেটা প্যারামিটার নির্ধারণ করতে পারেন। এছাড়াও, Next.js আপনাকে সহজে <Link> কম্পোনেন্ট ব্যবহার করার মাধ্যমে পেজের মধ্যে নেভিগেট করতে দেয়।

১. Next.js এর Link কম্পোনেন্ট

Next.js তে <Link> কম্পোনেন্টটি ব্যবহার করা হয় পেজের মধ্যে নেভিগেট করার জন্য। এটি সাধারণ React এর <a> ট্যাগের মতোই কাজ করে, তবে এটি স্পিড এবং পারফরম্যান্স বৃদ্ধির জন্য প্রয়োজনীয় অটোপ্রি-লোডিং (auto-preloading) সক্ষম করে।

উদাহরণ:

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  )
}

এখানে, <Link> কম্পোনেন্ট ব্যবহার করা হয়েছে /about রাউটের সাথে নেভিগেট করার জন্য। href প্রপের মাধ্যমে আপনি যেখানে যেতে চান তা নির্ধারণ করেন এবং <a> ট্যাগটি ব্যবহার করে আপনি ক্লিকযোগ্য লিঙ্ক তৈরি করেন।

Key Points:

• <Link> কম্পোনেন্টের মাধ্যমে পেজ ট্রানজিশন দ্রুত হয়, কারণ এটি রেন্ডারিং আগে পেজগুলোকে প্রি-লোড করে।
• <a> ট্যাগটি Next.js 13 এর পর অপরিহার্য নয়, তবে এটি ব্যবহারের জন্য সুপারিশ করা হয় (এটি অ্যাক্সেসিবিলিটি এবং SEO এর জন্য উপকারী)।

২. Dynamic Routing (ডাইনামিক রাউটিং)

Next.js ডাইনামিক রাউটিং সাপোর্ট করে, যা আপনাকে পেজের URL প্যারামিটার দ্বারা ডেটা পরিবর্তন করতে দেয়। উদাহরণস্বরূপ, আপনি একটি ব্লগ পেজ তৈরি করতে পারেন যেখানে পোস্টের আইডি অনুযায়ী বিভিন্ন পোস্ট প্রদর্শিত হবে।

ডাইনামিক রাউটিং সেটআপ:

Next.js ডাইনামিক রাউটিং করতে [param].js বা [param].tsx ফাইল নামের মাধ্যমে রাউট প্যারামিটার তৈরি করতে হয়।

উদাহরণ:

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

1. pages/posts/[id].js:

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { id } = router.query  // ডাইনামিক প্যারামিটার (id) গ্রহণ করা

  return (
    <div>
      <h1>Post ID: {id}</h1>
    </div>
  )
}

এখানে, useRouter হুকটি ব্যবহার করা হয়েছে পেজের URL থেকে ডাইনামিক প্যারামিটার (যেমন id) নিতে। এর মাধ্যমে, যখন আপনি /posts/1, /posts/2 বা অন্য কোন পেজে যাবেন, পেজের কন্টেন্ট ডাইনামিকভাবে পরিবর্তিত হবে।

৩. Link এবং Dynamic Routing একত্রে ব্যবহার

এখন, যদি আপনি একটি লিস্ট থেকে প্রতিটি পোস্টে যেতে চান, তবে <Link> কম্পোনেন্ট এবং ডাইনামিক রাউটিং একত্রে ব্যবহার করতে পারেন।

উদাহরণ:

1. pages/posts/index.js - পোস্টের লিস্ট

import Link from 'next/link'

export default function Posts() {
  const posts = [
    { id: 1, title: 'First Post' },
    { id: 2, title: 'Second Post' },
    { id: 3, title: 'Third Post' },
  ]

  return (
    <div>
      <h1>Posts List</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

এখানে, প্রতিটি পোস্টের জন্য একটি লিঙ্ক তৈরি করা হয়েছে, যা ডাইনামিক রাউট /posts/[id] রাউটের সাথে যুক্ত। যখন একজন ব্যবহারকারী একটি পোস্টে ক্লিক করবে, সে পোস্টের বিস্তারিত দেখাবে।

৪. Catch-all Routes

Next.js আরও একটি শক্তিশালী ফিচার সরবরাহ করে, যা হল catch-all routes। এটি একটি ডাইনামিক রাউট যা একাধিক প্যারামিটার গ্রহণ করতে পারে। catch-all রাউট তৈরি করতে [...param].js ফাইল নাম ব্যবহার করা হয়।

উদাহরণ:

1. pages/posts/[...slug].js - একাধিক স্লাগ দ্বারা রাউটিং

import { useRouter } from 'next/router'

export default function Post() {
  const router = useRouter()
  const { slug } = router.query  // সমস্ত প্যারামিটার গ্রহণ করা

  return (
    <div>
      <h1>Post Slug: {slug.join('/')}</h1>  {/* প্যারামিটারগুলোর তালিকা */}
    </div>
  )
}

এখানে slug হলো একটি অ্যারে যা সমস্ত প্যারামিটার ধারণ করে। উদাহরণস্বরূপ, /posts/first/second এই URL এর ক্ষেত্রে slug হবে ['first', 'second']।

৫. Fallback Rendering (Dynamic Routes এর জন্য)

Next.js getStaticPaths এবং getStaticProps এর মাধ্যমে fallback rendering সাপোর্ট করে, যার মাধ্যমে ডাইনামিক রাউটিংয়ের জন্য পেজ রেন্ডার করা হয়।

উদাহরণ:

1. pages/posts/[id].js:

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: true, // যখন পেজের জন্য ডেটা তৈরি করা না থাকে, তখন fallback true হওয়া উচিত।
  }
}

export async function getStaticProps({ params }) {
  const { id } = params
  return {
    props: {
      post: { id, title: `Post ${id}` },
    },
  }
}

এখানে, getStaticPaths ডাইনামিক পেজের জন্য কোন পাথ (URL) তৈরি হবে তা নির্ধারণ করে এবং getStaticProps সেই পাথের জন্য প্রয়োজনীয় ডেটা প্রদান করে।

সারাংশ

Next.js এ Link কম্পোনেন্ট এবং Dynamic Routing একসাথে ব্যবহারের মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরো ডাইনামিক এবং ইউজার ফ্রেন্ডলি করা যায়। আপনি সহজেই ডাইনামিক URL প্যারামিটার দিয়ে আপনার পেজগুলো তৈরি করতে পারবেন, এবং catch-all routes এবং fallback rendering এর মতো ফিচারের মাধ্যমে অ্যাপ্লিকেশনটি আরো শক্তিশালী করতে পারবেন।

Next.js একটি আধুনিক ফ্রেমওয়ার্ক যা React এর উপরে তৈরি এবং এটি স্টাইলিং এবং ইমেজ হ্যান্ডলিংয়ের জন্য উন্নত সুবিধা প্রদান করে। Next.js এর CSS এবং ইমেজ হ্যান্ডলিং সিস্টেমটি খুবই সহজ এবং কার্যকরী। এখানে আমরা আলোচনা করবো Next.js-এ CSS এবং ইমেজ হ্যান্ডলিং এর মূল বিষয়গুলো।

১. CSS হ্যান্ডলিং Next.js-এ

Next.js CSS ফাইল ব্যবহারে অনেক সুবিধা প্রদান করে এবং এটি CSS মডিউল (CSS Modules), গ্লোবাল CSS এবং স্টাইলড কম্পোনেন্টস সমর্থন করে।

গ্লোবাল CSS ফাইল

Next.js আপনাকে অ্যাপ্লিকেশনের জন্য গ্লোবাল স্টাইলস ব্যবহার করার সুযোগ দেয়। সাধারণত pages/_app.js ফাইলে গ্লোবাল CSS ফাইল অন্তর্ভুক্ত করা হয়।

• globals.css ফাইলটি সাধারণত styles/ ফোল্ডারে রাখা হয়।
• এই ফাইলটি গ্লোবাল স্টাইল প্রযোজ্য করার জন্য _app.js ফাইলে ইমপোর্ট করা হয়।

globals.css উদাহরণ:

/* styles/globals.css */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

_app.js ফাইলে গ্লোবাল CSS ইমপোর্ট করা:

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

এখন, আপনি globals.css ফাইলের স্টাইল পুরো অ্যাপ্লিকেশনে ব্যবহার করতে পারবেন।

CSS মডিউল

Next.js CSS মডিউল ব্যবহার করে কম্পোনেন্ট স্পেসিফিক স্টাইলিং করতে সহায়তা করে। CSS মডিউল ব্যবহার করার মাধ্যমে আপনি একটি কম্পোনেন্টে প্রযোজ্য CSS আলাদা রাখতে পারবেন এবং স্টাইল কনফ্লিক্টের সমস্যা থেকে মুক্তি পাবেন।

CSS মডিউল ফাইল তৈরি:

আপনি যদি কোনো কম্পোনেন্টের জন্য CSS মডিউল ব্যবহার করতে চান, তাহলে .module.css এক্সটেনশন দিয়ে CSS ফাইল তৈরি করতে হবে।

Home.module.css উদাহরণ:

/* styles/Home.module.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 36px;
}

এখন, এই CSS মডিউল ফাইলটি Home.js কম্পোনেন্টে ইমপোর্ট করতে হবে:

Home.js কম্পোনেন্ট:

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

function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Welcome to Next.js!</h1>
    </div>
  )
}

export default Home;

এভাবে আপনি styles.container এবং styles.title এর মাধ্যমে CSS স্টাইল প্রয়োগ করবেন, যা শুধু এই কম্পোনেন্টে প্রযোজ্য হবে।

২. Image হ্যান্ডলিং Next.js-এ

Next.js ইমেজ অপটিমাইজেশনের জন্য একটি বিল্ট-ইন Image কম্পোনেন্ট প্রদান করে, যা স্বয়ংক্রিয়ভাবে ইমেজ রিসাইজ, ফরম্যাট কনভার্সন এবং ল্যাজি লোডিং (lazy loading) এর সুবিধা দেয়। Next.js এর next/image কম্পোনেন্ট ব্যবহার করে ইমেজ ফাইল গুলি আরো দ্রুত এবং অপটিমাইজডভাবে লোড করা যায়।

next/image কম্পোনেন্ট ব্যবহার

Next.js এর Image কম্পোনেন্টের মাধ্যমে আপনি ইমেজ লোডিং অপটিমাইজ করতে পারেন। এটি ইমেজের সাইজ এবং রেজুলেশন স্বয়ংক্রিয়ভাবে অ্যাডজাস্ট করে।

next/image উদাহরণ:

import Image from 'next/image'
import logo from '../public/images/logo.png'

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Image 
        src={logo} 
        alt="Logo" 
        width={500} 
        height={500} 
      />
    </div>
  )
}

export default Home;

এখানে:

• src: ইমেজের সোর্স ফাইল।
• alt: ইমেজের বিকল্প টেক্সট (এটি SEO এর জন্য গুরুত্বপূর্ণ)।
• width এবং height: ইমেজের আকার নির্ধারণ করে।

Next.js ইমেজ অপটিমাইজেশন ফিচারটি স্বয়ংক্রিয়ভাবে:

• ইমেজকে স্কেল করে (রেজুলেশন অনুযায়ী),
• প্রয়োজনীয় ফরম্যাটে (যেমন WebP) কনভার্ট করে,
• ল্যাজি লোডিংয়ের মাধ্যমে পারফরম্যান্স উন্নত করে।

কাস্টম ডোমেইন থেকে ইমেজ লোডিং

Next.js এর ডিফল্ট সেটআপ শুধুমাত্র public/ ফোল্ডার থেকে ইমেজ লোড করতে অনুমতি দেয়। তবে আপনি যদি কাস্টম ডোমেইন থেকে ইমেজ লোড করতে চান, তাহলে আপনাকে next.config.js ফাইলে সেই ডোমেইনটি উল্লেখ করতে হবে।

next.config.js উদাহরণ:

module.exports = {
  images: {
    domains: ['example.com'],  // এখানে example.com থেকে ইমেজ লোড করা যাবে
  },
}

এভাবে আপনি example.com ডোমেইন থেকে ইমেজ লোড করতে পারবেন।

৩. নোট: CSS এবং Image হ্যান্ডলিং সম্পর্কিত কিছু গুরুত্বপূর্ণ পয়েন্ট

• CSS মডিউল: আপনি যখন CSS মডিউল ব্যবহার করেন, তখন স্টাইল শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের জন্য প্রযোজ্য হয় এবং এটি অন্য কম্পোনেন্টের স্টাইলের সাথে কনফ্লিক্ট সৃষ্টি করে না।
• next/image কম্পোনেন্ট: ইমেজ অপটিমাইজেশনের জন্য ব্যবহৃত এই কম্পোনেন্ট সঠিকভাবে ইমেজ লোড করার জন্য সর্বোত্তম সমাধান প্রদান করে। এটি শুধু পারফরম্যান্স নয়, SEO এর ক্ষেত্রেও সাহায্য করে।
• public/ ফোল্ডার: সব স্ট্যাটিক ফাইল যেমন ইমেজ, ফন্ট, পিডিএফ ফাইল ইত্যাদি public/ ফোল্ডারে রাখতে হবে, যা পরে সরাসরি URL এর মাধ্যমে অ্যাক্সেস করা যাবে।

Next.js আপনাকে একটি শক্তিশালী এবং সহজ CSS ও ইমেজ হ্যান্ডলিং সিস্টেম প্রদান করে, যা আপনার অ্যাপ্লিকেশনকে অপটিমাইজড এবং স্কেলেবল রাখে।