未找到页面在 next.js 13 中不起作用

Question

这是我的 next.js 项目的结构。

我的 404.js 页面是：

'use client';

export default function NotFound() {
    return (
        <div>
            <h2>Not Found</h2>
        </div>
    );
}

当我输入错误的路线时，它不起作用，也不会转到我的自定义页面，而是转到 next.js 404页面。为什么，我哪里错了？

提前致谢。

Answer 1

使用 Next 13.3，您只需将文件名更改为not-found.js.

\n

现在，文件app/not-found.js将自动处理对应用程序中没有匹配路由的 URL 的访问。

\n

文档：https ://nextjs.org/docs/app/api-reference/file-conventions/not-found

\n

宣布于： https: //nextjs.org/blog/next-13-3

\n\n

根据文档，在 Next 13.2 中：

\n

\n

“注意：not-found.js 目前仅在由 notFound 函数触发时才会呈现，我们正在努力支持捕获不匹配的路由。”

\n

\n

所以它还不是自动的，但看起来他们正在努力。文件还应该命名not-found.js而不是404.js，

\n

同时，由于看起来动态路由是在静态路由之后解析的，因此您可以通过使用文件夹创建动态包罗万象的路由[...not_found]并将其添加到您的应用程序文件夹来解决该问题。

\n

\n

在动态路由文件夹内添加一个page.js调用该notFound()函数的文件。

\n

应用程序/[...not_found]/page.js

\n

import {notFound} from "next/navigation"\n\nexport default function NotFoundCatchAll() {\n  notFound()\n}\n\n

\n

not-found.js在应用程序文件夹根目录的文件内，您可以添加自定义 404 页面。

\n

应用程序/not-found.js

\n

import Link from \'next/link\'\n\nexport default function NotFound() {\n  return <div>\n      <h1>Not found \xe2\x80\x93 404!</h1>\n      <div>\n        <Link href="/">Go back to Home</Link>\n      </div>\n  </div>\n}\n

\n

需要注意的是，如果您的应用程序文件夹中有多个动态路由，则此方法可能会产生问题。然而，另一个静态文件夹中的动态路由应该没问题。

\n

希望它有帮助，祝你好运！

\n

Answer 2

NextJS13 不会以这种格式进行错误处理，您不想使用名为 的文件404.js，而是使用名为error.js.

这将捕获返回 404 响应的 API 请求发送的任何错误。

此处的文档： https: //beta.nextjs.org/docs/routing/error-handling

如果您的 API 返回 200 响应但正文为空，您可以创建另一个名为 的组件not-found.js，将其导入到您希望其显示的文件中，并在 api 为空时返回它，例如：

应用程序/仪表板/not-found.js

export default function NotFound() {
  return (
    <>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
    </>
  );
}

应用程序/仪表板/index.js：

import { notFound } from 'next/navigation';

async function fetchUsers(id) {
  const res = await fetch('https://...');
  if (!res.ok) return undefined;
  return res.json();
}

export default async function Profile({ params }) {
  const user = await fetchUser(params.id);

  if (!user) {
    notFound();
  }

  // ...
}

此处的文档： https: //beta.nextjs.org/docs/api-reference/notfound

Answer 3

要使用 app 文件夹在 Next.js 中创建未找到页面，您可以按照以下步骤操作：

1. 在项目的根目录中创建一个名为 Pages 的新文件夹。

2. 在页面文件夹中，创建一个名为 404.js 的新文件。

3. 在 404.js 文件中，添加以下代码以呈现“Not Found”页面：

   const NotFound = () => {
     return (
       <div>
         <h1>404 - Not Found</h1>
       </div>
     )
   }
   
   export default NotFound
   

4. 在您的 _app.js 文件中，添加一个包罗万象的路由以显示任何未知路由的“未找到”页面：

const NotFound = () => {
  return (
    <div>
      <h1>404 - Not Found</h1>
    </div>
  )
}

export default NotFound

现在，当用户访问应用程序中不存在的路线时，将显示“未找到”页面。