使用 Next.js 构建一个动态的 404 页面-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，404 页面是指当用户访问一个不存在的页面时，服务器返回的错误页面。通常这个页面是比较简单的，只有一句话“404 Not Found”和一个返回首页的链接。但是，对于用户来说，这样的页面并不能提供太多的帮助，很容易让用户感到迷惑和失望。在这篇文章中，我们将介绍如何使用 Next.js 构建一个动态的 404 页面，为用户提供更好的体验。

为什么需要动态的 404 页面

一个好的 404 页面应该能够帮助用户解决问题，而不是让用户感到困惑和失望。如果你只是简单地展示一句话和一个链接，用户很可能会离开你的网站，而不会再次尝试访问。因此，为了提高用户体验，我们需要一个更加友好和有用的 404 页面。

动态的 404 页面可以根据用户的请求自动生成，可以包含一些有用的信息，比如类似于“您访问的页面不存在，请检查您的链接是否正确”这样的提示，或者提供一些可能的解决方案，比如返回首页或者搜索相关内容。

使用 Next.js 构建动态的 404 页面

Next.js 是一个 React 框架，它可以帮助我们快速构建 SSR（服务器端渲染）应用程序。使用 Next.js 可以很容易地构建一个动态的 404 页面，下面是具体的步骤：

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

在 Next.js 中，我们可以创建一个名为404.js的文件，它将会被用作 404 页面。在这个文件中，我们可以编写我们想要的任何内容。

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

const Custom404 = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>
        The page you are looking for does not exist. Please check your URL or
        return to the <Link href="/">homepage</Link>.
      </p>
    </div>
  );
};

export default Custom404;

在这个示例中，我们展示了一个标题和一段提示信息，同时提供了一个返回首页的链接。你可以根据需要自定义这个页面的内容，比如添加搜索框或者使用动画效果。

步骤 2：在`next.config.js`中配置自定义错误页面

在 Next.js 中，我们可以使用next.config.js文件来配置一些全局的设置。我们可以在这个文件中配置自定义的错误页面。

// javascriptcn.com 代码示例
module.exports = {
  async redirects() {
    return [
      {
        source: "/404",
        destination: "/404",
        permanent: true,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: "/404",
        destination: "/custom-404",
      },
    ];
  },
};

在这个示例中，我们将/404页面重定向到/custom-404页面，并将其设置为永久重定向。这样，当用户访问一个不存在的页面时，Next.js 将会自动跳转到我们自定义的 404 页面。

步骤 3：使用`getStaticProps`方法获取数据

在我们的自定义 404 页面中，我们可能需要获取一些数据来展示给用户。在 Next.js 中，我们可以使用getStaticProps方法来获取这些数据。

// javascriptcn.com 代码示例
export async function getStaticProps() {
  const res = await fetch("https://api.example.com/some-data");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

在这个示例中，我们使用了fetch方法来获取一些数据，然后将其作为props传递给页面组件。你可以根据需要修改这个方法，来获取你需要的任何数据。

步骤 4：在页面组件中使用获取到的数据

最后，在我们的自定义 404 页面组件中，我们可以使用获取到的数据来展示给用户。

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

const Custom404 = ({ data }) => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>{data.message}</p>
      <p>
        The page you are looking for does not exist. Please check your URL or
        return to the <Link href="/">homepage</Link>.
      </p>
    </div>
  );
};

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/some-data");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default Custom404;

在这个示例中，我们展示了从 API 中获取到的一些数据，同时保留了之前的标题和提示信息。

总结

使用 Next.js 构建动态的 404 页面可以为用户提供更好的体验，帮助他们更容易地解决问题。在这篇文章中，我们介绍了如何使用 Next.js 来构建一个动态的 404 页面，并提供了一个示例代码。你可以根据需要修改这个代码，来满足你的需求。

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

使用 Next.js 构建一个动态的 404 页面