在 Web 开发中，404 页面是指当用户访问网站中不存在的页面时，服务器返回的错误页面。通常情况下，404 页面都是由服务器自动生成的，但是在一些特殊情况下，我们可能需要自定义404页面。本文将介绍如何在 Next.js 中实现自定义404页面。
为什么需要自定义404页面？
默认情况下，当用户访问 Next.js 应用中不存在的页面时，会自动跳转到404页面。这个页面是 Next.js 自动创建的，看起来非常简单，只有一个“404 Not Found”的标题和一个返回首页的链接。但是，对于一些需要更加个性化的网站来说，这个默认的404页面可能无法满足需求。
因此，自定义404页面可以帮助我们更好地控制网站的用户体验，让用户更容易理解发生了错误，同时也可以增加网站的品牌形象。
实现自定义404页面的步骤
第一步：创建404页面组件
首先，我们需要创建一个自定义的404页面组件。在 Next.js 中，我们可以在pages/目录下创建一个名为404.js的文件，然后在这个文件中编写我们自己的404页面组件。
-- -------------------- ---- -------
------ ---- ---- ------------
----- --------- - -- -- -
------ -
-----
------- - ---- --- ----------
--------- --- ---- --- --- ------- --- ---- --- ----------
----- ---------
----- ---- -- ---- --------
-------
------
--
--
------ ------- ----------这个自定义的404页面组件非常简单，只是一个包含了错误信息和返回首页链接的简单页面。
第二步：配置404页面路由
接下来，我们需要告诉 Next.js 如何将访问不存在的页面时，自动跳转到我们自定义的404页面。在 Next.js 中，我们可以通过在pages/目录下创建一个名为_error.js的文件来实现。
import Custom404 from './404';
const ErrorPage = () => {
return <Custom404 />;
};
export default ErrorPage;在这个文件中，我们导入了我们之前创建的自定义404页面组件，并将其作为返回值。这样，当用户访问不存在的页面时，就会自动跳转到我们自己的404页面。
第三步：添加404页面的样式
最后一步是添加样式。我们可以在styles/目录下创建一个名为404.module.css的文件，然后在这个文件中添加我们自定义404页面的样式。
-- -------------------- ---- ------- ---------- - ---------- ------ ------- - ----- -------- ----- ----------- ------- - -- - ---------- ----- -------------- ----- - - - ---------- ----- -------------- ----- - - - ------ -------- ---------------- ----- ---------- ----- - ------- - ---------------- ---------- -
在这个样式文件中，我们定义了一个包含容器、标题、文本和链接样式的.container类。然后，我们就可以在我们自定义的404页面组件中使用这个样式了。
-- -------------------- ---- -------
------ ------ ---- ---------------------------
------ ---- ---- ------------
----- --------- - -- -- -
------ -
---- -----------------------------
------- - ---- --- ----------
--------- --- ---- --- --- ------- --- ---- --- ----------
----- ---------
----- ---- -- ---- --------
-------
------
--
--
------ ------- ----------现在，我们自定义的404页面已经完成了。用户访问不存在的页面时，就会自动跳转到我们自己的404页面，并且这个页面还有我们自己的样式。
总结
在本文中，我们介绍了如何在 Next.js 中实现自定义404页面。首先，我们创建了一个自定义的404页面组件，然后告诉 Next.js 如何将访问不存在的页面时，自动跳转到我们自定义的404页面。最后，我们为自定义的404页面添加了样式。通过这些步骤，我们可以自由地控制404页面的样式和内容，提高网站的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6511201595b1f8cacd97d09c