Next.js 中的自定义错误页面和 404 页面

Next.js 是一个 React 框架，它提供了一个灵活的路由系统和服务器渲染功能。在构建 Next.js 应用时，有时候我们需要自定义错误页面和 404 页面，以提高用户体验和网站的可访问性。本文将介绍如何在 Next.js 中自定义错误页面和 404 页面。

自定义错误页面

默认情况下，Next.js 会在发生错误时显示一个默认的错误页面。但是，我们可以通过创建一个 _error.js 文件来自定义错误页面。

在项目的根目录下创建一个 _error.js 文件，代码如下：

// javascriptcn.com 代码示例
import React from 'react';

class ErrorPage extends React.Component {
  static getInitialProps({ res, err }) {
    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
    return { statusCode };
  }

  render() {
    return (
      <div>
        <h1>{this.props.statusCode} Error</h1>
        <p>Sorry, something went wrong.</p>
      </div>
    );
  }
}

export default ErrorPage;

在这个文件中，我们定义了一个 ErrorPage 组件，它会在发生错误时显示。getInitialProps 方法是 Next.js 的一个特殊方法，它会在服务器端渲染时调用，用于获取错误状态码。如果是在客户端渲染时发生的错误，getInitialProps 方法不会被调用。

我们可以在 render 方法中根据错误状态码来显示不同的错误信息。

自定义 404 页面

类似地，Next.js 也提供了一个默认的 404 页面。我们可以通过创建一个 404.js 文件来自定义 404 页面。

在项目的根目录下创建一个 404.js 文件，代码如下：

// javascriptcn.com 代码示例
import React from 'react';

class NotFoundPage extends React.Component {
  render() {
    return (
      <div>
        <h1>404 Not Found</h1>
        <p>Sorry, the page you are looking for could not be found.</p>
      </div>
    );
  }
}

export default NotFoundPage;

在这个文件中，我们定义了一个 NotFoundPage 组件，它会在用户访问不存在的页面时显示。

总结

在本文中，我们介绍了如何在 Next.js 中自定义错误页面和 404 页面。通过自定义错误页面和 404 页面，我们可以提高用户体验和网站的可访问性。如果你想了解更多关于 Next.js 的知识，可以访问 Next.js 官网（https://nextjs.org/）。

示例代码

完整的示例代码可以在 GitHub 上查看：https://github.com/nextjs/next.js/tree/canary/examples/custom-error-pages

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