跳到主要内容

Next.js 404 页面处理

在构建 Web 应用时，处理用户访问不存在的页面是一个重要的任务。Next.js 提供了简单而强大的方式来创建自定义的 404 页面。本文将详细介绍如何在 Next.js 中处理 404 页面，并提供实际案例和代码示例。

什么是 404 页面？​

404 页面是当用户尝试访问一个不存在的页面时显示的页面。它通常用于通知用户他们请求的资源不存在，并提供导航回主页或其他相关页面的选项。

在 Next.js 中创建自定义 404 页面​

Next.js 允许你通过创建一个名为 404.js 或 404.tsx 的文件来自定义 404 页面。这个文件应该放在 pages 目录下。

基本示例​

以下是一个简单的自定义 404 页面示例：

jsx
// pages/404.js
export default function Custom404() {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉，您访问的页面不存在。</p>
      <a href="/">返回首页</a>
    </div>
  );
}

在这个示例中，当用户访问一个不存在的页面时，Next.js 会自动渲染这个组件。

使用 getStaticProps 或 getServerSideProps​

你还可以在 404 页面中使用 getStaticProps 或 getServerSideProps 来获取数据。例如，你可能希望在 404 页面上显示一些推荐内容或导航链接。

jsx
// pages/404.js
export async function getStaticProps() {
  return {
    props: {
      recommendedLinks: [
        { title: '首页', url: '/' },
        { title: '关于我们', url: '/about' },
        { title: '联系我们', url: '/contact' },
      ],
    },
  };
}

export default function Custom404({ recommendedLinks }) {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉，您访问的页面不存在。</p>
      <ul>
        {recommendedLinks.map((link, index) => (
          <li key={index}>
            <a href={link.url}>{link.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

在这个示例中，我们使用 getStaticProps 来获取推荐链接，并在 404 页面上显示它们。

实际应用场景​

1. 电商网站​

在电商网站中，404 页面可以显示一些推荐商品或热门分类，帮助用户找到他们可能感兴趣的内容。

jsx
// pages/404.js
export async function getStaticProps() {
  return {
    props: {
      recommendedProducts: [
        { name: '商品A', url: '/product/a' },
        { name: '商品B', url: '/product/b' },
        { name: '商品C', url: '/product/c' },
      ],
    },
  };
}

export default function Custom404({ recommendedProducts }) {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉，您访问的页面不存在。</p>
      <h2>推荐商品</h2>
      <ul>
        {recommendedProducts.map((product, index) => (
          <li key={index}>
            <a href={product.url}>{product.name}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

2. 博客网站​

在博客网站中，404 页面可以显示一些热门文章或最新发布的文章，帮助用户找到他们可能感兴趣的内容。

jsx
// pages/404.js
export async function getStaticProps() {
  return {
    props: {
      popularPosts: [
        { title: '文章A', url: '/post/a' },
        { title: '文章B', url: '/post/b' },
        { title: '文章C', url: '/post/c' },
      ],
    },
  };
}

export default function Custom404({ popularPosts }) {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉，您访问的页面不存在。</p>
      <h2>热门文章</h2>
      <ul>
        {popularPosts.map((post, index) => (
          <li key={index}>
            <a href={post.url}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

总结​

在 Next.js 中处理 404 页面非常简单。通过创建一个自定义的 404.js 文件，你可以为用户提供一个友好的页面，帮助他们找到他们可能感兴趣的内容。你还可以使用 getStaticProps 或 getServerSideProps 来动态生成 404 页面的内容。

附加资源​

练习​

  1. 创建一个自定义的 404 页面，并在页面上显示一些推荐链接。
  2. 使用 getStaticProps 在 404 页面上动态生成推荐内容。
  3. 尝试在 404 页面上添加一个搜索框，允许用户搜索他们想要的内容。

通过这些练习，你将更好地理解如何在 Next.js 中处理 404 页面，并为用户提供更好的体验。