Next.jsBeginner

Error Handling

error.tsx, not-found.tsx, expected errors ও error boundaries — Next.js-এ error handling বাংলায়।

11টি অংশবাংলা ভাষায়

Next.js error-কে দুই ভাগে ভাগ করে — expected errors (যেমন form validation failure) ও uncaught exceptions (অপ্রত্যাশিত crash)।

Uncaught Error: error.tsx

Route segment-এ error.tsx ফাইল দিলে সেটি একটি error boundary — সবচেয়ে কাছের parent error.tsx-এ error memorial হয়।

app/dashboard/error.tsxtsx

tsx

"use client"; // Error boundary সবসময় Client Component

import { useEffect } from "react";

export default function ErrorPage({
  error,
  unstable_retry,
}: {
  error: Error & { digest?: string };
  unstable_retry: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={() => unstable_retry()}>Try again</button>
    </div>
  );
}

404: not-found.tsx

app/blog/[slug]/page.tsxtsx

tsx

import { notFound } from "next/navigation";

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = getPostBySlug(slug);

  if (!post) {
    notFound();
  }

  return <h1>{post.title}</h1>;
}

app/blog/[slug]/not-found.tsxtsx

tsx

export default function NotFound() {
  return <div>404 - এই পেজটি পাওয়া যায়নি</div>;
}

Expected Errors

Form submission বা যাচাই-বাছাই-এর মতো expected errors-এ throw না করে return value হিসেবে মডেল করুন — useActionState দিয়ে দেখান।

app/actions.tstsx

tsx

"use server";

export async function createPost(prevState: any, formData: FormData) {
  const title = formData.get("title");

  const res = await fetch("https://api.vercel.app/posts", {
    method: "POST",
    body: JSON.stringify({ title }),
  });

  if (!res.ok) {
    return { message: "Failed to create post" };
  }
}

Global Error

Root layout-এর error-এর জন্য app/global-error.tsx — এতে নিজস্ব <html> ও <body> দিতে হয়, কারণ এটি root layout replace করে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।