M

MLOG

বাংলা

Next.js-এর App Directory-তে বিপ্লবী ফাইল-ভিত্তিক রাউটিং সিস্টেম সম্পর্কে জানুন, যা আধুনিক ওয়েব অ্যাপ্লিকেশনগুলির জন্য উন্নত সংগঠন, পারফরম্যান্স এবং ডেভেলপার অভিজ্ঞতা প্রদান করে।

Next.js App Directory: একটি ফাইল-ভিত্তিক রাউটিং বিপ্লব

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

Next.js-এ রাউটিং-এর বিবর্তন বোঝা

App Directory-এর আগে, Next.js রাউটিং-এর জন্য Pages Directory-এর উপর নির্ভর করত। যদিও এটি কার্যকর ছিল, এই পদ্ধতির কিছু সীমাবদ্ধতা ছিল। Pages Directory একটি সহজ ফাইল-ভিত্তিক রাউটিং সিস্টেম ব্যবহার করত যেখানে `pages` ডিরেক্টরির প্রতিটি ফাইল একটি রুটের সাথে সঙ্গতিপূর্ণ ছিল। উদাহরণস্বরূপ, `pages/about.js` ফাইলটি `/about` রুটে ম্যাপ করা হতো।

যদিও এটি সহজবোধ্য ছিল, Pages Directory-তে জটিল লেআউট, ডেটা ফেচিং কৌশল এবং সার্ভার-সাইড রেন্ডারিং প্যাটার্নের জন্য বিল্ট-ইন সমর্থন ছিল না, যার ফলে ডেভেলপারদের প্রায়ই এই ফিচারগুলো ম্যানুয়ালি প্রয়োগ করতে হতো। উপরন্তু, ডেটা ফেচিং এবং কম্পোনেন্ট রেন্ডারিং-এর মধ্যে ঘনিষ্ঠ সংযোগ কখনও কখনও পারফরম্যান্সের সমস্যা তৈরি করত।

App Directory এই সীমাবদ্ধতাগুলো সমাধান করে React Server Components, Layouts এবং অন্যান্য উন্নত ফিচারের উপর ভিত্তি করে একটি আরও নমনীয় এবং শক্তিশালী রাউটিং সিস্টেম চালু করেছে। এটি একটি সাধারণ ফাইল-টু-রুট ম্যাপিংয়ের বাইরে গিয়ে অ্যাপ্লিকেশন রুট এবং লেআউট সংজ্ঞায়িত করার জন্য একটি আরও ডিক্লারেটিভ এবং কম্পোজেবল পদ্ধতি প্রস্তাব করে।

App Directory-এর পরিচিতি: রাউটিং-এর জন্য একটি নতুন দৃষ্টান্ত

App Directory, যা আপনার Next.js প্রকল্পের রুটে `app` ফোল্ডারের মধ্যে অবস্থিত, রাউটিং-এর জন্য একটি মৌলিকভাবে ভিন্ন পদ্ধতি চালু করে। ফাইলগুলোকে সরাসরি রুটে ম্যাপ করার পরিবর্তে, App Directory একটি কনভেনশন-ভিত্তিক সিস্টেম ব্যবহার করে যেখানে ডিরেক্টরির গঠন এবং বিশেষ ফাইলগুলো অ্যাপ্লিকেশনের রুট নির্ধারণ করে।

এই পদ্ধতির বেশ কিছু মূল সুবিধা রয়েছে:

App Directory-এর রাউটিং সিস্টেমের মূল ধারণা

App Directory-এর রাউটিং সিস্টেম কার্যকরভাবে ব্যবহার করার জন্য, এর কার্যকারিতার ভিত্তি স্থাপনকারী মূল ধারণাগুলো বোঝা অপরিহার্য:

১. রুট সেগমেন্ট এবং ফোল্ডার

`app` ডিরেক্টরির মধ্যে প্রতিটি ফোল্ডার একটি রুট সেগমেন্ট প্রতিনিধিত্ব করে। ফোল্ডারের নামটি URL-এর পাথ সেগমেন্টের সাথে সঙ্গতিপূর্ণ। উদাহরণস্বরূপ, একটি `app/blog/posts` ফোল্ডার কাঠামো `/blog/posts` রুটে ম্যাপ হবে।

এই কাঠামোটি বিবেচনা করুন:

app/
  blog/
    posts/
      page.js

এই কাঠামোটি `/blog/posts`-এ একটি রুট সংজ্ঞায়িত করে। `posts` ফোল্ডারের মধ্যে `page.js` ফাইলটি হল রুট সেগমেন্ট কম্পোনেন্ট, যা সেই রুটের বিষয়বস্তু রেন্ডার করে।

২. `page.js` ফাইল: রুট কন্টেন্ট রেন্ডারিং

page.js (অথবা TypeScript-এর জন্য page.tsx) ফাইলটি একটি বিশেষ ফাইল যা একটি নির্দিষ্ট রুট সেগমেন্টের জন্য রেন্ডার করা বিষয়বস্তু সংজ্ঞায়িত করে। এটি সেই রুটের জন্য এন্ট্রি পয়েন্ট। এই ফাইলটিকে তার ডিফল্ট এক্সপোর্ট হিসাবে একটি React কম্পোনেন্ট এক্সপোর্ট করতে হবে।

উদাহরণ:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <p>List of blog posts will be displayed here.</p>
    </div>
  );
}

৩. লেআউট: শেয়ার করা UI সংজ্ঞায়িত করা

লেআউট আপনাকে একাধিক পেজ বা রুট সেগমেন্ট জুড়ে শেয়ার করা UI সংজ্ঞায়িত করতে দেয়। একটি লেআউটে হেডার, ফুটার, সাইডবার বা অন্য কোনো কম্পোনেন্ট থাকতে পারে যা আপনার অ্যাপ্লিকেশনের একটি অংশ জুড়ে সামঞ্জস্যপূর্ণ থাকা উচিত। লেআউটগুলো `layout.js` (বা `layout.tsx`) ফাইল ব্যবহার করে সংজ্ঞায়িত করা হয়।

লেআউটগুলো নেস্টেড থাকে। এর মানে হল যে রুট লেআউট (`app/layout.js`) পুরো অ্যাপ্লিকেশনটিকে র‍্যাপ করে, এবং নেস্টেড লেআউটগুলো নির্দিষ্ট রুট সেগমেন্টগুলোকে র‍্যাপ করে। যখন একটি লেআউট শেয়ার করা রুটগুলোর মধ্যে নেভিগেট করা হয়, Next.js লেআউটের স্টেট সংরক্ষণ করে এবং এটিকে পুনরায় রেন্ডার করা থেকে বিরত থাকে, যার ফলে পারফরম্যান্স উন্নত হয় এবং ব্যবহারকারীর অভিজ্ঞতা মসৃণ হয়।

উদাহরণ:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Home</a> |
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Copyright 2023</p>
        </footer>
      </body>
    </html>
  );
}

এই উদাহরণে, `RootLayout` পুরো অ্যাপ্লিকেশনের জন্য বেসিক HTML কাঠামো, হেডার, ফুটার এবং নেভিগেশন সংজ্ঞায়িত করে। `app` ডিরেক্টরির মধ্যে রেন্ডার করা যেকোনো পেজ এই লেআউট দ্বারা র‍্যাপ করা হবে।

৪. টেমপ্লেট: রুটগুলোর মধ্যে স্টেট সংরক্ষণ করা

লেআউটের মতোই, টেমপ্লেটগুলোও চাইল্ড রুটগুলোকে র‍্যাপ করে। তবে, লেআউটের মতো নয়, টেমপ্লেটগুলো প্রতিটি চাইল্ড রুটের জন্য একটি নতুন কম্পোনেন্ট ইনস্ট্যান্স তৈরি করে। এর মানে হল যে টেমপ্লেটের মধ্যে রুটগুলোর মধ্যে নেভিগেট করার সময় টেমপ্লেটের স্টেট সংরক্ষিত থাকে না। টেমপ্লেটগুলো এমন পরিস্থিতিতে কার্যকর যেখানে রুট ট্রানজিশনের সময় স্টেট রিসেট বা পুনরায় ইনিশিয়ালাইজ করার প্রয়োজন হয়। টেমপ্লেট তৈরি করতে template.js (বা template.tsx) ব্যবহার করুন।

৫. রুট গ্রুপ: URL সেগমেন্ট ছাড়াই রুট সংগঠিত করা

রুট গ্রুপ আপনাকে URL কাঠামোকে প্রভাবিত না করে App Directory-এর মধ্যে আপনার রুটগুলোকে সংগঠিত করতে দেয়। রুট গ্রুপগুলো ফোল্ডারের নামকে বন্ধনীতে র‍্যাপ করে সংজ্ঞায়িত করা হয়, যেমন `(group-name)`। এই বন্ধনীগুলো Next.js-কে বলে যে ফোল্ডারটিকে একটি রুট সেগমেন্টের পরিবর্তে একটি যৌক্তিক গ্রুপিং মেকানিজম হিসাবে বিবেচনা করতে হবে।

এটি বিশেষ করে অনেক রুট সহ বড় অ্যাপ্লিকেশনগুলো সংগঠিত করার জন্য দরকারী। উদাহরণস্বরূপ, আপনি আপনার অ্যাপ্লিকেশনের বিভিন্ন বিভাগ, যেমন `(marketing)` এবং `(app)` আলাদা করতে রুট গ্রুপ ব্যবহার করতে পারেন। এই গ্রুপগুলো শুধুমাত্র ফাইল কাঠামোকে প্রভাবিত করে, URL পাথকে নয়।

উদাহরণ:

app/
  (marketing)/
    home/
      page.js  // /home-এ অ্যাক্সেসযোগ্য
    about/
      page.js  // /about-এ অ্যাক্সেসযোগ্য
  (app)/
    dashboard/
      page.js  // /dashboard-এ অ্যাক্সেসযোগ্য

৬. ডাইনামিক রুট: পরিবর্তনশীল সেগমেন্ট পরিচালনা করা

ডাইনামিক রুট আপনাকে পরিবর্তনশীল সেগমেন্ট সহ রুট তৈরি করতে দেয়। এটি এমন পরিস্থিতিতে দরকারী যেখানে আপনাকে ডেটার উপর ভিত্তি করে রুট তৈরি করতে হবে, যেমন ব্লগ পোস্ট, প্রোডাক্ট পেজ বা ব্যবহারকারীর প্রোফাইল। ডাইনামিক রুট সেগমেন্টগুলো সেগমেন্টের নামকে বর্গাকার বন্ধনীতে আবদ্ধ করে সংজ্ঞায়িত করা হয়, যেমন `[id]`। `id` একটি প্যারামিটার প্রতিনিধিত্ব করে যা `page.js` কম্পোনেন্টের মধ্যে অ্যাক্সেস করা যেতে পারে।

উদাহরণ:

app/
  blog/
    [slug]/
      page.js

এই উদাহরণে, `[slug]` একটি ডাইনামিক রুট সেগমেন্ট। `/blog/my-first-post`-এর মতো একটি URL এই রুটের সাথে মিলবে, এবং `slug` প্যারামিটার `my-first-post`-এ সেট হবে। আপনি `page.js` কম্পোনেন্টের মধ্যে `params` prop ব্যবহার করে `slug` প্যারামিটারটি অ্যাক্সেস করতে পারেন।

// app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>Content of the blog post with slug: {slug}</p>
    </div>
  );
}

আপনাকে এই ডাইনামিক রুটগুলোর জন্য সম্ভাব্য মান তৈরি করতে হবে। Next.js স্ট্যাটিক সাইট জেনারেশন (SSG) এবং সার্ভার-সাইড রেন্ডারিং (SSR)-এর জন্য `generateStaticParams` ফাংশন প্রদান করে। এই ফাংশনটি আপনাকে নির্দিষ্ট করতে দেয় যে কোন ডাইনামিক রুটগুলো বিল্ড টাইমে প্রি-রেন্ডার করা উচিত।

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>Content of the blog post with slug: {slug}</p>
    </div>
  );
}

৭. ক্যাচ-অল সেগমেন্ট: অজানা রুট পরিচালনা করা

ক্যাচ-অল সেগমেন্ট হল এক ধরনের ডাইনামিক রুট যা আপনাকে একটি URL-এর যেকোনো সংখ্যক সেগমেন্টের সাথে মেলাতে দেয়। এগুলো সেগমেন্টের নামের আগে তিনটি ডট দিয়ে সংজ্ঞায়িত করা হয়, যেমন `[...path]`। ক্যাচ-অল সেগমেন্টগুলো বিভিন্ন URL কাঠামো পরিচালনা করতে পারে এমন নমনীয় রুট তৈরির জন্য দরকারী।

উদাহরণ:

app/
  docs/
    [...path]/
      page.js

এই উদাহরণে, `[...path]` একটি ক্যাচ-অল সেগমেন্ট। `/docs/introduction`, `/docs/api/reference`, এবং `/docs/examples/basic`-এর মতো URLগুলো সবই এই রুটের সাথে মিলবে। `path` প্যারামিটারটি মেলানো সেগমেন্টগুলো সম্বলিত একটি অ্যারে হবে।

// app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Documentation</h1>
      <p>Path: {path.join('/')}</p>
    </div>
  );
}

৮. প্যারালাল রুট: একই সাথে একাধিক পেজ রেন্ডার করা

প্যারালাল রুট আপনাকে একই লেআউটের মধ্যে একই সাথে একাধিক পেজ রেন্ডার করতে সক্ষম করে। এটি জটিল UI প্যাটার্ন তৈরির জন্য বিশেষভাবে দরকারী, যেমন একাধিক প্যানেল সহ ড্যাশবোর্ড বা বর্তমান পেজের উপরে প্রদর্শিত মোডাল ডায়ালগ। প্যারালাল রুটগুলো @ চিহ্ন ব্যবহার করে সংজ্ঞায়িত করা হয়, যেমন `@children`, `@modal`। এগুলো সরাসরি URL-এ নির্দিষ্ট করা যেতে পারে বা `useRouter` হুক ব্যবহার করে নেভিগেট করা যেতে পারে।

উদাহরণ:

app/
  @children/
    page.js // প্রধান বিষয়বস্তু রেন্ডার করে
  @modal/
    login/
      page.js // লগইন মোডাল রেন্ডার করে

প্যারালাল রুট প্রদর্শন করতে, `` কম্পোনেন্ট ব্যবহার করুন।

৯. ইন্টারসেপ্টিং রুট: অত্যাধুনিক UI ট্রানজিশন তৈরি করা

ইন্টারসেপ্টিং রুট আপনাকে বর্তমান রুটের প্রেক্ষাপটে আপনার অ্যাপ্লিকেশনের একটি ভিন্ন অংশ থেকে একটি রুট লোড করতে দেয়। এটি অত্যাধুনিক UI ট্রানজিশন তৈরি করতে ব্যবহার করা যেতে পারে, যেমন বর্তমান পেজ থেকে নেভিগেট না করে একটি লিঙ্কে ক্লিক করার সময় একটি মোডাল ডায়ালগ প্রদর্শন করা। এগুলো (...) সিনট্যাক্স ব্যবহার করে সংজ্ঞায়িত করা হয়।

App Directory-তে ডেটা ফেচিং

App Directory ডেটা ফেচ করার জন্য নতুন এবং উন্নত উপায় প্রবর্তন করে, React Server Components এবং বিল্ট-ইন ক্যাশিং এবং রিভ্যালিডেশন ক্ষমতা সহ `fetch` API ব্যবহার করে। এটি উন্নত পারফরম্যান্স এবং একটি আরও সুবিন্যস্ত ডেভেলপমেন্ট অভিজ্ঞতার দিকে পরিচালিত করে। সার্ভার এবং ক্লায়েন্ট উভয় কম্পোনেন্টই ডেটা ফেচ করতে পারে, তবে কৌশল ভিন্ন।

১. সার্ভার কম্পোনেন্টে ডেটা ফেচিং

সার্ভার কম্পোনেন্ট, যা App Directory-তে ডিফল্ট, সরাসরি ডেটাবেস বা API থেকে ডেটা ফেচ করতে পারে। এটি রেন্ডারিংয়ের আগে কম্পোনেন্ট ফাংশনের মধ্যে করা হয়। যেহেতু সার্ভার কম্পোনেন্টগুলো সার্ভারে এক্সিকিউট হয়, আপনি ক্লায়েন্টের কাছে প্রকাশ না করে নিরাপদে সিক্রেট কী এবং ক্রেডেনশিয়াল অন্তর্ভুক্ত করতে পারেন। `fetch` API স্বয়ংক্রিয়ভাবে মেমোাইজড হয়, যার মানে একই ডেটা অনুরোধগুলো ডিডুপ্লিকেট করা হয়, যা পারফরম্যান্সকে আরও উন্নত করে।

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // রিটার্ন ভ্যালু সিরিয়ালাইজড হয় না
  // আপনি Date, Map, Set, ইত্যাদি রিটার্ন করতে পারেন।

  if (!res.ok) {
    // এটি নিকটতম `error.js` Error Boundary সক্রিয় করবে
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

২. ক্লায়েন্ট কম্পোনেন্টে ডেটা ফেচিং

ক্লায়েন্ট কম্পোনেন্ট, যা ফাইলের শীর্ষে 'use client' ডিরেক্টিভ দ্বারা নির্দেশিত হয়, ব্যবহারকারীর ব্রাউজারে এক্সিকিউট হয়। ক্লায়েন্ট কম্পোনেন্টে ডেটা ফেচিং সাধারণত `useEffect` হুক এবং `axios` বা `fetch` API-এর মতো একটি লাইব্রেরি ব্যবহার করে করা হয়। সার্ভার অ্যাকশনগুলো ক্লায়েন্ট কম্পোনেন্ট থেকে সার্ভার ডেটা পরিবর্তন করার একটি নিরাপদ উপায় প্রদান করে। এটি ক্লায়েন্ট কম্পোনেন্টগুলোকে সরাসরি API এন্ডপয়েন্ট প্রকাশ না করে সার্ভারে ডেটার সাথে ইন্টারঅ্যাক্ট করার একটি নিরাপদ উপায় প্রদান করে।

// app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{data.title}</div>;
}

App Directory-এর সাথে এসইও বিবেচনা

App Directory-এর সার্ভার-ফার্স্ট পদ্ধতি এসইও-এর জন্য উল্লেখযোগ্য সুবিধা প্রদান করে। যেহেতু কন্টেন্ট সার্ভারে রেন্ডার করা হয়, সার্চ ইঞ্জিন ক্রলাররা সহজেই পেজের কন্টেন্ট অ্যাক্সেস এবং ইনডেক্স করতে পারে। এখানে কিছু মূল এসইও বিবেচনা রয়েছে:

App Directory-এর রাউটিং সিস্টেম ব্যবহারের সুবিধা

App Directory-এর রাউটিং সিস্টেম অনেকগুলো সুবিধা প্রদান করে যা ডেভেলপমেন্ট প্রক্রিয়াকে উন্নত করে, অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ায় এবং একটি উন্নত ব্যবহারকারী অভিজ্ঞতায় অবদান রাখে। আসুন এই সুবিধাগুলো আরও বিস্তারিতভাবে দেখি:

App Directory রাউটিং-এর ব্যবহারিক উদাহরণ

App Directory-এর রাউটিং সিস্টেমের শক্তি এবং নমনীয়তা ব্যাখ্যা করার জন্য, আসুন কয়েকটি ব্যবহারিক উদাহরণ বিবেচনা করি:

১. ডাইনামিক রুট সহ একটি সাধারণ ব্লগ তৈরি করা

একটি ব্লগ অ্যাপ্লিকেশন বিবেচনা করুন যেখানে প্রতিটি ব্লগ পোস্টের তার স্লাগের উপর ভিত্তি করে নিজস্ব অনন্য URL রয়েছে। App Directory-এর সাহায্যে, এটি সহজেই ডাইনামিক রুট ব্যবহার করে প্রয়োগ করা যেতে পারে:

app/
  blog/
    [slug]/
      page.js

`[slug]` ডিরেক্টরিটি একটি ডাইনামিক রুট সেগমেন্টকে প্রতিনিধিত্ব করে, যা `/blog/` পাথের অধীনে যেকোনো URL-এর সাথে মিলবে। `[slug]` ডিরেক্টরির মধ্যে `page.js` ফাইলটি সংশ্লিষ্ট ব্লগ পোস্টের জন্য কন্টেন্ট রেন্ডার করবে।

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  // ডাটাবেস বা API থেকে সমস্ত ব্লগ পোস্ট ফেচ করুন
  const posts = await fetchPosts();

  // পোস্টগুলোকে স্লাগ প্যারামিটারের একটি অ্যারেতে ম্যাপ করুন
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const { slug } = params;

  // ম্যাচিং স্লাগ সহ ব্লগ পোস্টটি ফেচ করুন
  const post = await fetchPost(slug);

  if (!post) {
    return <div>Post not found</div>;
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

এই উদাহরণটি দেখায় কিভাবে ডাইনামিক রুট ব্যবহার করে একটি সহজ এবং কার্যকর উপায়ে প্রতিটি ব্লগ পোস্টের জন্য পৃথক পেজ তৈরি করা যায়।

২. ইন্টারসেপ্টিং রুট সহ একটি মোডাল ডায়ালগ প্রয়োগ করা

ধরুন আপনি একটি মোডাল ডায়ালগ প্রয়োগ করতে চান যা ব্যবহারকারী যখন একটি লিঙ্কে ক্লিক করে তখন প্রদর্শিত হয়, বর্তমান পেজ থেকে নেভিগেট না করে। এটি ইন্টারসেপ্টিং রুট ব্যবহার করে অর্জন করা যেতে পারে:

app/
  (.)photos/
    [id]/
      @modal/
        page.js
  page.js

এখানে, `(.)photos/[id]/@modal/page.js` বর্তমান পেজ থেকে `photos/[id]`-তে যাওয়া অনুরোধগুলোকে ইন্টারসেপ্ট করে। যখন একজন ব্যবহারকারী একটি নির্দিষ্ট ছবির লিঙ্কে ক্লিক করে, তখন মোডাল ডায়ালগটি একটি নতুন পেজে নেভিগেট করার পরিবর্তে বর্তমান পেজের উপরে প্রদর্শিত হবে।

৩. প্যারালাল রুট সহ একটি ড্যাশবোর্ড লেআউট তৈরি করা

কল্পনা করুন আপনি একাধিক প্যানেল সহ একটি ড্যাশবোর্ড অ্যাপ্লিকেশন তৈরি করছেন যা একই সাথে রেন্ডার করা প্রয়োজন। এই লেআউটটি অর্জন করতে প্যারালাল রুট ব্যবহার করা যেতে পারে:

app/
  @analytics/
    page.js       // অ্যানালিটিক্স ড্যাশবোর্ড
  @settings/
    page.js       // সেটিংস প্যানেল
  page.js           // প্রধান ড্যাশবোর্ড লেআউট

এই কাঠামোতে, `@analytics` এবং `@settings` প্যারালাল রুটগুলোকে প্রতিনিধিত্ব করে যা প্রধান ড্যাশবোর্ড লেআউটের মধ্যে রেন্ডার করা হবে। প্রতিটি প্যারালাল রুটের নিজস্ব page.js ফাইল রয়েছে যা সেই প্যানেলের জন্য কন্টেন্ট সংজ্ঞায়িত করে। লেআউটটি <Slot> কম্পোনেন্ট ব্যবহার করে এগুলো কোথায় স্থাপন করতে হবে তা নির্ধারণ করতে পারে।

Pages Directory থেকে App Directory-তে মাইগ্রেশন

একটি বিদ্যমান Next.js অ্যাপ্লিকেশনকে Pages Directory থেকে App Directory-তে মাইগ্রেট করার জন্য সতর্ক পরিকল্পনা এবং বাস্তবায়ন প্রয়োজন। যদিও App Directory উল্লেখযোগ্য সুবিধা প্রদান করে, এটি নতুন ধারণা এবং প্যাটার্নও প্রবর্তন করে যা ডেভেলপারদের বুঝতে হবে। মাইগ্রেশন প্রক্রিয়ায় আপনাকে সাহায্য করার জন্য এখানে একটি ধাপে ধাপে নির্দেশিকা রয়েছে:

  1. মূল পার্থক্যগুলো বুঝুন: মাইগ্রেশন শুরু করার আগে, নিশ্চিত করুন যে আপনি Pages Directory এবং App Directory-এর মধ্যে মূল পার্থক্যগুলো পুঙ্খানুপুঙ্খভাবে বোঝেন, যার মধ্যে রাউটিং সিস্টেম, ডেটা ফেচিং এবং কম্পোনেন্ট আর্কিটেকচার অন্তর্ভুক্ত রয়েছে।
  2. একটি `app` ডিরেক্টরি তৈরি করুন: আপনার Next.js প্রকল্পের রুটে `app` নামে একটি নতুন ডিরেক্টরি তৈরি করুন। এই ডিরেক্টরিতে App Directory-এর অংশ হিসাবে থাকা সমস্ত কম্পোনেন্ট এবং রুট থাকবে।
  3. ধীরে ধীরে রুট মাইগ্রেট করুন: একবারে একটি করে রুট মাইগ্রেট করে শুরু করুন। এটি আপনাকে প্রতিটি রুট পৃথকভাবে পরীক্ষা এবং ডিবাগ করার অনুমতি দেবে, ত্রুটি প্রবর্তনের ঝুঁকি হ্রাস করবে।
  4. কম্পোনেন্টগুলোকে সার্ভার কম্পোনেন্টে রূপান্তর করুন: যখনই সম্ভব আপনার বিদ্যমান React কম্পোনেন্টগুলোকে সার্ভার কম্পোনেন্টে রূপান্তর করুন। এটি পারফরম্যান্স উন্নত করবে এবং ব্রাউজারে ডাউনলোড এবং এক্সিকিউট করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্টের পরিমাণ হ্রাস করবে।
  5. ডেটা ফেচিং লজিক আপডেট করুন: App Directory-এর বিল্ট-ইন ডেটা ফেচিং ক্ষমতার সুবিধা নিতে আপনার ডেটা ফেচিং লজিক আপডেট করুন। এর মধ্যে ক্লায়েন্ট কম্পোনেন্ট থেকে সার্ভার কম্পোনেন্টে ডেটা ফেচিং কোড সরানো অন্তর্ভুক্ত থাকতে পারে।
  6. লেআউট এবং টেমপ্লেট প্রয়োগ করুন: একাধিক পেজ জুড়ে সামঞ্জস্যপূর্ণ শেয়ার করা UI এলিমেন্ট সংজ্ঞায়িত করতে লেআউট এবং টেমপ্লেট প্রয়োগ করুন।
  7. পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: প্রতিটি মাইগ্রেটেড রুট পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন যাতে এটি সঠিকভাবে কাজ করে এবং কোনো রিগ্রেশন নেই।
  8. `pages` ডিরেক্টরি সরিয়ে ফেলুন: সমস্ত রুট মাইগ্রেট হয়ে গেলে, আপনি `/pages` ডিরেক্টরিটি সরিয়ে ফেলতে পারেন।

উপসংহার

Next.js App Directory ফাইল-ভিত্তিক রাউটিং-এ একটি উল্লেখযোগ্য বিবর্তনকে প্রতিনিধিত্ব করে, যা ডেভেলপারদের আধুনিক ওয়েব অ্যাপ্লিকেশন তৈরির জন্য একটি আরও সংগঠিত, পারফরম্যান্ট এবং নমনীয় উপায় প্রদান করে। মূল ধারণাগুলো বোঝার মাধ্যমে এবং নতুন ফিচারগুলো গ্রহণ করার মাধ্যমে, ডেভেলপাররা ব্যতিক্রমী ব্যবহারকারী অভিজ্ঞতা তৈরি করতে এবং বৃহত্তর উৎপাদনশীলতা অর্জন করতে App Directory-কে ব্যবহার করতে পারে। Next.js ডেভেলপমেন্টের ভবিষ্যৎ App Directory-এর মধ্যে নিহিত, এবং এটি গ্রহণ করা অত্যাধুনিক ওয়েব অ্যাপ্লিকেশন তৈরির জন্য একটি কৌশলগত পদক্ষেপ। এটি বিশ্বব্যাপী ডেভেলপারদের জন্য একটি শক্তিশালী টুল।

যেহেতু Next.js ইকোসিস্টেম বিকশিত হতে চলেছে, App Directory শক্তিশালী, স্কেলেবল এবং পারফরম্যান্ট ওয়েব অ্যাপ্লিকেশন তৈরির জন্য স্ট্যান্ডার্ড হয়ে উঠতে চলেছে। পরিবর্তনকে আলিঙ্গন করুন, সম্ভাবনাগুলো অন্বেষণ করুন এবং Next.js-এর সম্পূর্ণ সম্ভাবনা উন্মোচন করুন!