javascript - Wie kann man in Next.js auf eine 404-Seite mit Fehlerstatuscode umleiten?

Ich verwende Server-Komponenten (app Router). Wenn die Serverantwort erfolgreich ist (Datensatz in der Datenbank gefunden), wird die Seite geladen. Wenn der Datensatz nicht gefunden wird oder ein anderer Serverfehler auftritt, wird die spezielle errorboundary-Seite geladen. Ich habe sie in der Entwicklungsphase verwendet und dies ist ein praktisches Werkzeug. Das Problem ist, dass nach der Bereitstellung der Website einige Seiten von Suchmaschinen indexiert werden können. Wenn die Seite nach einiger Zeit gelöscht wird, muss Google einen Fehler erhalten, um die Seite aus seinem Index zu entfernen. Ist es möglich, so zu konfigurieren, dass im Fehlerfall der richtige Code (404) zurückgegeben wird und die Seite 404 geladen wird? Vielen Dank für jede Hilfe. Hier ist meine Komponente:

import Nodata from "@/components/Nodata";
import { IPost } from "@/misc/types";
import Post from "@/wrappers/Post";
import { Metadata, ResolvingMetadata } from "next";
import React from "react";

const HOST = process.env.NEXT_PUBLIC_HOST;

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const slug = params.slug;

  // fetch data
  const data: IPost[] = await fetch(`${HOST}/api/news/${String(slug)}`, {
    cache: "no-store",
  })
    .then((res) => res.json())
    .catch((err) => {
      throw new Error("Failed to fetch data");
    });

  const content = data[0];

  return {
    metadataBase: new URL(String(HOST)),
    title: content.title,
    description: content.description,
    openGraph: {
      url: `${HOST}/news/${slug}`,
      title: content.title,
      description: content.description,
    },
  };
}

async function getData(slug: string) {
  const res = await fetch(`${HOST}/api/news/${slug}`, {
    cache: "no-store",
  });
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Page({ params, searchParams }: Props) {
  const { slug } = params;
  const data = await getData(slug);

  if (data) {
    return <Post data={data[0]} slug={slug} />;
  } else return <Nodata />;
}

error.tsx (die Errorboundary-Komponente):

"use client"; // Error components must be Client Components

import ErrWrapper from "@/wrappers/ErrWrapper";
import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return <ErrWrapper title="Whoops! Something went wrong..." img="oops.png" />;
}

not-found.tsx (404 Seite):

import ErrWrapper from "@/wrappers/ErrWrapper";

export default function NotFound() {
  return <ErrWrapper title="404 - Document not found" img="404.gif" />;
}