Ubah hala ke halaman 404 Not Found dalam folder aplikasi Next.js: panduan langkah demi langkah

Question

Sebagai contoh, kami pernah menggunakan getServerSideProps untuk mengubah hala ke halaman 404 dalam komponen halaman seperti ini:

// pages/index.js

export async function getServerSideProps(context) {
  const placeId = context.params.placeId;
  const places = await getPlace(placeId);

  if (!places.length) { 
   return {
     notFound: true,
   }
  }

  return {
    props: {
      places[0],
    },
  };

Dengan direktori Next.js 13 dan app, kami mempunyai komponen pelayan. 13 和 app 目录，我们有了服务器组件。 getServerSideProps Bagaimana untuk mengubah hala ke halaman 404 apabila tidak lagi digunakan?

Answer 1

Mengikut dokumentasi, anda boleh menggunakan fail notFound( ) 函数如下所示，它会渲染相应的 not-found.js:

// app/user/page.js

import { notFound } from 'next/navigation';

export default async function Profile({ params }) {
  const res = await fetch(`/user/${params.id}`);
  if (!res.ok) {
    notFound();
  }
  return <div>Actual Data</div>;
}

// app/user/not-found.js

export default function NotFound() {
  return <p>404 Not Found</p>
}

Tanpa app/user/not-found.js 文件，则使用 app/not-found.js。如果没有 app/not-found.js, ia akan menggunakan nilai lalai yang diberikan oleh Next.js.