在 Next.js 项目中使用自定义 404 页面的方法

在 Next.js 项目中，404 页面是指用户访问不存在的页面时显示的页面。默认情况下，Next.js 会在浏览器中显示一个简单的错误页面，但是这个页面通常不够美观也不够有用，因此我们需要自定义一个更好的404页面。

本文将介绍如何在 Next.js 项目中使用自定义404页面，并提供了详细的步骤和示例代码。

步骤一：创建自定义404页面

首先，我们需要创建一个自定义的404页面。在 Next.js 中，我们可以使用pages/404.js文件来创建一个自定义的404页面。

在pages/404.js文件中，我们可以编写自己的404页面代码，例如：

import Link from 'next/link';

export default function Custom404() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
      <Link href="/">
        <a>Go back to homepage</a>
      </Link>
    </div>
  );
}

在上面的代码中，我们定义了一个名为Custom404的函数组件，它返回一个包含错误消息和一个链接的页面。我们还使用了Link组件来创建一个返回首页的链接。

步骤二：配置 Next.js 项目

一旦我们创建了自定义的404页面，我们需要告诉 Next.js 如何使用它。为此，我们需要在next.config.js文件中添加一个自定义配置。

在next.config.js文件中，我们可以使用webpack配置来定义我们的自定义404页面。例如：

module.exports = {
  webpack: (config, { dev, isServer }) => {
    // 如果是服务端渲染
    if (isServer) {
      const originalEntry = config.entry;
      // 重写 entry 文件
      config.entry = async () => {
        const entries = await originalEntry();

        // 如果页面不存在，使用自定义404页面
        if (entries['pages/_error.js'] && !entries['pages/404.js']) {
          entries['pages/_error.js'].unshift('./pages/404.js');
        }

        return entries;
      };
    }

    return config;
  },
};

在上面的代码中，我们在webpack配置中定义了一个函数，它会在编译时被调用。如果是服务端渲染，我们会重写entry文件，用自定义的404页面替换默认的错误页面。

步骤三：测试自定义404页面

一旦我们完成了上述步骤，我们就可以测试自定义的404页面了。为此，我们可以通过访问一个不存在的页面来触发错误，并查看是否正确显示了我们的自定义404页面。

例如，我们可以访问http://localhost:3000/this-page-does-not-exist来测试我们的自定义404页面。

总结

在本文中，我们介绍了如何在 Next.js 项目中使用自定义404页面。我们提供了详细的步骤和示例代码，并希望这篇文章对于需要自定义404页面的 Next.js 开发者有所帮助。

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