如何在 Next.js 中使用自定义 404 页面

在网站开发中，404 页面是一个很常见的页面，表示用户访问的页面不存在。默认情况下，Next.js 提供了一个简单的 404 页面，但是它并不一定符合我们的需求。因此，本文将介绍如何在 Next.js 中使用自定义 404 页面。

创建自定义 404 页面

首先，我们需要创建一个自定义的 404 页面。在 Next.js 中，我们可以在 pages 目录下创建一个名为 404.js 的文件。该文件将作为自定义 404 页面的入口。

// javascriptcn.com 代码示例
import Link from 'next/link'

export default function Custom404() {
  return (
    <div>
      <h1>404 - 页面不存在</h1>
      <p>很抱歉，您访问的页面不存在。</p>
      <Link href="/">
        <a>返回首页</a>
      </Link>
    </div>
  )
}

在该文件中，我们可以自定义 404 页面的内容。例如，我们可以添加一些提示信息和返回首页的链接。

配置自定义 404 页面

接下来，我们需要在 Next.js 中配置自定义 404 页面。我们可以通过在 pages 目录下创建一个 _error.js 的文件来实现。

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    console.error('ErrorBoundary caught an error:', error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return <Custom404 />
    }

    return this.props.children
  }
}

export default ErrorBoundary

在该文件中，我们创建了一个 ErrorBoundary 组件，它可以捕获子组件的错误并显示自定义的 404 页面。我们可以通过将该组件包装在 _app.js 文件中的 App 组件中来实现全局的错误处理。

// javascriptcn.com 代码示例
import React from 'react'
import App from 'next/app'
import ErrorBoundary from './_error'

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props

    return (
      <ErrorBoundary>
        <Component {...pageProps} />
      </ErrorBoundary>
    )
  }
}

export default MyApp

在该文件中，我们将 ErrorBoundary 组件包装在 App 组件中，以便全局处理错误。这样，当用户访问不存在的页面时，就会显示自定义的 404 页面了。

总结

本文介绍了如何在 Next.js 中使用自定义 404 页面。我们可以通过创建一个自定义的 404.js 文件来定义页面内容，然后通过创建一个 ErrorBoundary 组件和将其包装在 App 组件中来全局处理错误并显示自定义 404 页面。这样，我们可以更好地控制网站的用户体验，提高用户满意度。

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