default.js / default.tsx কী?

• default.js ফাইলটি একটি fallback হিসেবে কাজ করে Parallel Routes ব্যবহৃত ক্ষেত্রে, যেসব সাব-স্লটগুলোর “active state” Next.js পুনরুদ্ধার (recover) করতে পারে না একটি full-page load এ। (Next.js)

• অর্থাৎ, যখন কেউ সরাসরি একটি URL এ যায় (page refresh বা deep link) এবং কিছু সাব-স্লট (named slots) সেই URL অনুযায়ী নির্ধারিত নেই, তখন Next.js সেই সাব-স্লটগুলোর জন্য default.js রেন্ডার করবে। (Next.js)

• যদি কোনো default.js না দেওয়া থাকে, তখন named slots-এর ক্ষেত্রে একটি error (404 বা mismatch) আসতে পারে। (Next.js)

এই ফাইলটি সাধারণত app/…/@slotName/default.js (বা .tsx) ফোল্ডারে থাকে। (Next.js)

কখন এবং কেন প্রয়োজন?

Parallel Routes memungkinkan একই রুপে একাধিক “slot” বা গ্রুপ রেন্ডার করা — উদাহরণস্বরূপ, তুমি একটি layout এ দুইটি অংশ রাখতে পারো যা স্বতন্ত্রভাবে পরিবর্তনশীল।

কিন্তু soft navigation (Next.js client-side navigation) সময় Next.js “active state” ট্র্যাক করতে পারে, অর্থাৎ কোন সাব-রুট কোন slot-এ সক্রিয় ছিল, সেটা ধরে রাখতে পারে। (Next.js)

কিন্তু যদি পেজ রিফ্রেশ (hard navigation) ঘটে, Next.js সেই active state পুনরুদ্ধার করতে পারে না। তখন যদি কোনো slot-এর জন্য সক্রিয় সাবরুট URL না পাওয়া যায়, তখন default.js ফাইলটি রেন্ডার হয়। (Next.js)

যদি কোন default.js না থাকে সেই slot এ — named slot-এর ক্ষেত্রে তখন error হবে। (Next.js)

Props ও Signature

default.js / default.tsx ফাইল সাধারণত নিচের মত signature রাখে:

export default async function Default({
  params,
}: {
  params: Promise<{ /* dynamic route parameters */ }>
}) {
  // Optional: await params, use them
  // Return React component
}

• params — একটি promise, যা সমাধান করবে dynamic route parameters যেগুলো root segment থেকে সেই slot পর্যন্ত পৌঁছেছে। (Next.js)

• যদি তোমার slot কোনো dynamic route segment-এর ভেতরে থাকে, তখন তুমি params থেকে সেই মানগুলি পেয়ে ব্যবহার করতে পারো। (Next.js)

উদাহরণ:

// app/[artist]/@sidebar/default.js

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params;
  return <div>Sidebar default for {artist}</div>;
}

পদক্ষেপ: কিভাবে ব্যবহার ও ইমপ্লিমেন্ট করবে

নিচে ধাপে ধাপে নির্দেশিকা ও উদাহরণ:

ধাপ ১: প্রকল্প তৈরি ও Parallel Routes ব্যবহার শুরু করো

সাধারণত, তোমার app/ ডিরেক্টরির ভেতরে এমন কিছু স্ট্রাকচার থাকতে পারে, যেখানে তুমি named slots ব্যবহার করো। উদাহরণ:

app/
 ├─ layout.tsx
 ├─ page.tsx
 ├─ dashboard/
 │    ├─ layout.tsx
 │    ├─ page.tsx
 │    ├─ @analytics/
 │    │    ├─ page.tsx
 │    │    └─ default.tsx    ← এখানে default slot
 │    └─ @team/
 │         ├─ page.tsx
 │         └─ default.tsx

এখানে @analytics ও @team হল named slots।

ধাপ 2: default.tsx (বা default.js) ফাইল তৈরি করো

যেখানে তুমি expect করো কোনো slot unmatched হলে fallback প্রদর্শন করতে হবে, সেখানে default.tsx ফাইল রাখো। যেমন:

// app/dashboard/@analytics/default.tsx

import { notFound } from 'next/navigation';

export default function AnalyticsDefault() {
  // তুমি চাইলে fallback UI দেখাতে পারো বা 404 দেখাও
  // এখানে fallback UI উদাহরণ:
  return <div>No Analytics selected</div>;
}

অথবা, তুমি চাইলে unmatched হলে 404 দেখাও:

// app/dashboard/@analytics/default.tsx

import { notFound } from 'next/navigation';

export default function Default() {
  notFound();
}

ধাপ 3: params প্রয়োগ (যদি dynamic route হয়)

যদি slot path dynamic route segment-এর ভিতর থাকে, তাহলে default ফাইলে params prop ব্যবহার করবে। যেমন:

// app/[artist]/@sidebar/default.tsx

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params;

  return (
    <div>
      <h2>Sidebar for {artist}</h2>
      <p>No specific sub-page selected.</p>
    </div>
  );
}

এখানে URL যেমন /madonna হলে, artist = "madonna" হবে এবং fallback UI সেই অনুযায়ী দেখাবে।

ধাপ 4: নিশ্চিত হও যে সব slot-এ default রয়েছে (children slot সহ)

Important: “children” slot (implicit slot) হিসাবেও একটি default.js / .tsx থাকা প্রয়োজন। কারণ যদি Next.js active state পুনরুদ্ধার করতে না পারে children slot-এ, তাহলে fallback দেখাতে হবে। (Next.js)

যদি তুমি children slot-এর জন্য default না দাও, তাহলে রিফ্রেশ করার সময় 404 হবে। (Next.js)

// app/default.tsx

export default function Default() {
  return <div>Default fallback content</div>;
}

উদাহরণ (Full Example)

নিচে একটি পুরো উদাহরণ দিচ্ছি, যেখানে dashboard নামে একটি route আছে, এবং @analytics ও @team named slots আছে:

app/
 ├─ layout.tsx
 ├─ page.tsx
 ├─ dashboard/
 │    ├─ layout.tsx
 │    ├─ page.tsx
 │    ├─ @analytics/
 │    │    ├─ page.tsx
 │    │    └─ default.tsx
 │    └─ @team/
 │         ├─ page.tsx
 │         └─ default.tsx
 └─ default.tsx

layout.tsx:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html><body>{children}</body></html>;
}

app/default.tsx:

export default function Default() {
  return <div>Welcome to My App</div>;
}

app/dashboard/layout.tsx:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <h1>Dashboard</h1>
      {children}
    </div>
  );
}

app/dashboard/page.tsx:

export default function DashboardPage() {
  return <div>Select a tab: Analytics or Team</div>;
}

app/dashboard/@analytics/page.tsx:

export default function AnalyticsPage() {
  return <div>Analytics content here</div>;
}

app/dashboard/@analytics/default.tsx:

export default function AnalyticsDefault() {
  return <div>No Analytics selected</div>;
}

app/dashboard/@team/page.tsx:

export default function TeamPage() {
  return <div>Team content here</div>;
}

app/dashboard/@team/default.tsx:

export default function TeamDefault() {
  return <div>No Team selected</div>;
}

এখন:

• যদি ইউজার /dashboard এ যায়, children slot-এর default (app/default.tsx) দেখাবে, এবং named slots (@analytics, @team) তারা default থাকবে।

• যদি ইউজার /dashboard/@analytics এ যায়, তাহলে AnalyticsPage দেখাবে; কিন্তু /dashboard রিফ্রেশ করলে default.tsx দেখাবে @analytics slot-এ।

• যদি ইউজার /dashboard/someRoute যেটি কোনও named slot-এর subpage নয়, তখন default.js বা default.tsx fallback দেখাবে।

গুরুত্বপূর্ণ বিষয় ও সতর্কতা

1. Named slots এ default থাকা বাধ্য
   — যদি তুমি named slots ব্যবহার করো (যেমন @analytics, @team), তাহলে তাদের জন্য default.tsx ফাইল রাখতে হবে, নাহলে রিফ্রেশ বা দুর্ঘটনাজনিত ক্ষেত্রে error হবে। (Next.js)

2. Children slot-এর default
   — implicit children slot এর জন্যও default.tsx থাকা জরুরি। (Next.js)

3. Dynamic route parameters
   — যদি slot dynamic route-এর অংশ হয়, তাহলে তুমি params prop ব্যবহার করে fallback UI কাস্টমাইজ করতে পারো। (Next.js)

4. notFound() ব্যবহার করা যেতে পারে
   — যদি তোমার fallback হিসেবে 404 দেখাতে চাও, তাহলে notFound() ফাংশন কল করতে পারো। (Next.js)