解决 Next.js 自定义 404 页面的问题

在使用 Next.js 开发应用过程中，我们有时需要自定义应用的 404 页面以提供更好的用户体验。本文将介绍如何在 Next.js 应用中自定义 404 页面。

解决方法

1. 使用自定义 404 组件

在 Next.js 中，可以使用一个名为 _error.js 的特殊文件对应用的 404 页面进行自定义。在该文件中，我们需要返回一个自定义的 404 页面组件。以下是一个示例：

// javascriptcn.com 代码示例
// pages/_error.js

import React from "react";

const Custom404 = () => {
  return <h1>404 - Page Not Found</h1>;
};

export default Custom404;

在上述示例中，我们定义了一个名为 Custom404 的 React 组件，并在其中返回一个简单的错误信息。在实际应用中，我们可以根据需要自行定义 404 页面的样式和内容。

2. 使用正确的 HTTP 状态码

当应用返回自定义的 404 页面时，应该使用 404 状态码通知浏览器该页面不存在。在 Next.js 中，可以通过设置 asPath 字段或使用 res.statusCode 属性来返回正确的状态码。以下是一个示例：

// javascriptcn.com 代码示例
// pages/_error.js

import React from "react";
import { NextSeo } from "next-seo";

const Custom404 = ({ statusCode }) => {
  return (
    <>
      <NextSeo title={`404 - Page Not Found`} />
      <h1>{statusCode} - Page Not Found</h1>
    </>
  );
};

Custom404.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Custom404;

在上述示例中，我们使用了 getInitialProps 方法来获取应该返回的 HTTP 状态码，并在组件中使用了 NextSeo 组件设置页面标题。如果你不需要使用 NextSeo，可以直接返回一个数字状态码即可。

总结

在本文中，我们介绍了如何使用 _error.js 文件自定义 Next.js 应用的 404 页面，并且强调了正确使用 HTTP 状态码的重要性。希望本文能够帮助读者更好地理解如何处理 Next.js 应用中的错误页面，并提供有效的解决方案。

参考资料

• https://nextjs.org/docs/advanced-features/custom-error-page

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654362c77d4982a6ebd1d655