如何优雅地处理 Next.js 中遇到的 404 页面错误？

对于 Next.js 开发者来说，处理 404 页面错误是一个常见的问题。当用户访问一个不存在的页面时，Next.js 默认会显示一个简单的 404 页面，没有任何提示和反馈。这不仅影响用户体验，还可能影响 SEO。在本文中，我们将介绍如何优雅地处理 Next.js 中遇到的 404 页面错误，并提供一些实用的指导意义和示例代码。

方案一：自定义 404 页面

首先，我们可以通过自定义 404 页面来提高用户体验。在 Next.js 中，我们可以通过创建 pages/404.js 文件来自定义 404 页面。在这个文件中，我们可以展示一些有用的提示信息，比如“您访问的页面不存在，请检查您输入的 URL 是否正确”等等。另外，我们可以添加一些导航链接或按钮，让用户更轻松地找到他们想要的页面。

下面是一个自定义 404 页面的示例代码：

import Link from 'next/link';

export default function Custom404() {
  return (
    <div>
      <h1>404 - 页面不存在</h1>
      <p>您访问的页面不存在，请检查您输入的 URL 是否正确。</p>
      <p>您可以尝试以下链接:</p>
      <ul>
        <li>
          <Link href="/">
            <a>返回首页</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>关于我们</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a>联系我们</a>
          </Link>
        </li>
      </ul>
    </div>
  );
}

通过自定义 404 页面，我们可以提高用户体验，并帮助用户更轻松地找到他们想要的页面。不过，这种方法只能解决用户体验问题，而不能解决 SEO 问题。因此，我们需要一些更高级的方法来解决 SEO 问题。

方案二：使用自定义路由处理 404 错误

另一个可以解决 SEO 问题的方法是使用自定义路由来处理 404 错误。在 Next.js 中，我们可以使用 getStaticPaths 和 getStaticProps 方法来提供动态路由和服务器端渲染。这种方法可以帮助我们更好地处理 404 错误，并提高 SEO。

下面是一个使用自定义路由处理 404 错误的示例代码：

import { useRouter } from 'next/router';

export default function DynamicPage({ data }) {
  const router = useRouter();
  const fallback = (
    <div>
      <h1>404 - 页面不存在</h1>
      <p>您访问的页面不存在，请检查您输入的 URL 是否正确。</p>
      <p>您可以尝试以下链接:</p>
      <ul>
        <li>
          <button onClick={() => router.push('/')}>返回首页</button>
        </li>
        <li>
          <button onClick={() => router.push('/about')}>关于我们</button>
        </li>
        <li>
          <button onClick={() => router.push('/contact')}>联系我们</button>
        </li>
      </ul>
    </div>
  );

  // 如果没有数据则说明页面不存在，返回 fallback 页面
  if (!data) {
    return fallback;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
      {/* 渲染数据 */}
    </div>
  );
}

export async function getStaticPaths() {
  // 获取所有动态路由的数据
  const paths = [
    { params: { slug: 'post-1' } },
    { params: { slug: 'post-2' } },
    { params: { slug: 'post-3' } },
    // ...
  ];

  return {
    paths,
    fallback: true, // 开启 fallback 页面
  };
}

export async function getStaticProps({ params }) {
  // 根据动态路由参数获取数据
  const data = { title: '文章标题', description: '文章描述' };

  if (!data) {
    return { notFound: true }; // 404 页面
  }

  return { props: { data } };
}

通过使用自定义路由和服务器端渲染，我们可以更好地处理 404 错误，并提高 SEO。不过，这种方法需要一些额外的工作和配置，可能对于新手和小型项目来说有些困难。

总结

在本文中，我们介绍了两种解决 Next.js 中遇到的 404 页面错误的方法。第一种方法是通过自定义 404 页面来提高用户体验，第二种方法是使用自定义路由和服务器端渲染来解决 SEO 问题。不同的情况下，我们可以选择不同的方法，以更好地处理 404 页面错误。希望本文能给你带来一些有用的指导意义和实践经验。

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