Penanganan error, not-found, dan metadata

// app/[lang]/dashboard/error.tsx
"use client";                      // error boundaries must be Client Components

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div role="alert">
      <h2>Something went wrong loading your dashboard</h2>
      {/* In production, error.message is replaced with a generic string. */}
      <p>{error.digest ? "Reference: " + error.digest : null}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

import { notFound } from "next/navigation";

export default async function LessonPage({ params }) {
  const { module, lesson } = await params;
  const ref = getLesson(module, lesson);

  // Not an error - a legitimate 404. Renders not-found.tsx with a 404 status.
  if (!ref) notFound();

  return <article>...</article>;
}

// Static, when it never depends on the data:
export const metadata: Metadata = {
  title: "Dashboard",
  description: "Your learning progress",
};

// Dynamic, when it does:
export async function generateMetadata({ params }): Promise<Metadata> {
  const { module, lesson } = await params;
  const ref = getLesson(module, lesson);
  if (!ref) return {};                     // a 404 needs no title
  return { title: ref.lesson.title.en, description: ref.lesson.summary.en };
}

// In the root layout, a template applies a suffix to every child title:
export const metadata: Metadata = {
  title: { default: "Fullstack Learning Path", template: "%s · Fullstack Learning Path" },
};