在 Next.js 中创建自定义 404 页面

Next.js 13.3：使用 not-found.js 自动处理不匹配的路由

简介：
在快节奏的 Web 开发领域，Next.js 不断发展和改进。随着Next.js 13.3的发布，我们引入了一项新功能，简化了应用程序中不匹配路由的处理方式。此功能使其更加方便开发者使用，并简化了创建自定义 404 页面的流程。在本篇博文中，我们将探讨这些变化以及如何利用它们。

callout

🚀 让我们一起创造伟大的事物。💡
电子邮件：heyshabink@gmail.com

Next.js 中的“未找到页面”
在 Next.js 13.3 中，管理自定义 404 页面和处理不匹配的路由变得更加简单。您只需将文件名更改为 即可not-found.js。app/not-found.js现在，文件将自动处理对应用中没有匹配路由的 URL 的访问。

您可以在Next.js 文档中找到有关此文件约定的详细信息。

这一令人兴奋的更新已在Next.js 13.3 发行说明中正式宣布。

重要提示： 虽然 Next.js 13.3 简化了处理不匹配路由的过程，但仍有一个关键细节需要注意。该not-found.js文件目前仅在由该notFound函数触发时才会渲染。不过，Next.js 团队正在积极努力添加自动捕获不匹配路由的支持，使其更加无缝衔接。要利用当前功能，请确保您的自定义 404 页面名为 ，not-found.js而不是404.js。

同时，由于动态路由似乎是在静态路由之后解析的，您可以通过使用文件夹创建动态捕获所有路由[...not_found]并将其添加到您的应用程序文件夹来解决该问题。

您可以按照以下步骤操作：

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

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

import {notFound} from "next/navigation"

export default function NotFoundCatchAll() {
  notFound()
}

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

应用程序/未找到.js

import Link from 'next/link'

export default function NotFound() {
  return <div>
      <h1>Not found – 404!</h1>
      <div>
        <Link href="/">Go back to Home</Link>
      </div>
  </div>
}

请注意，如果您的应用文件夹中有多个动态路由，则此方法可能会产生问题。但是，如果您在另一个静态文件夹中有动态路由，则使用此方法应该不会出现问题。

使用 Next.js 进行编码很愉快！