Next.js 踩坑指南：如何解决 404 页面渲染问题-JavaScript中文网-JavaScript教程资源分享门户

Next.js 是一款基于 React 的服务端渲染框架，它的目的是为了提供一种简单、灵活和高效的开发方式，使得前端开发人员可以快速构建出稳定和高效的应用程序。但是在 Next.js 的开发过程中，我们难免会碰到各种各样的问题，其中 404 页面渲染问题就是一种常见的问题。在本篇文章中，我们将为大家介绍如何解决 Next.js 中的 404 页面渲染问题。

问题描述

在使用 Next.js 开发过程中，当我们输入一个不存在的路由地址时，页面就会显示 404 Not Found，但是实际上这个页面是由客户端渲染生成的，而不是服务端渲染生成的。这就导致了一些搜索引擎或者社交媒体无法正确地识别到这个页面，从而影响了 SEO 优化效果。

解决方案

方案一：使用自定义的 404 页面

Next.js 提供了一种简单的方式来解决 404 页面渲染的问题，即通过自定义 404 页面来实现。我们只需要在 pages 目录下创建一个 _error.js 文件，然后在这个文件中实现自定义的 404 页面即可。

示例代码：

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

const NotFoundPage = () => {
  return (
    <div>
      <h1>404 Not Found</h1>
      <p>抱歉，您访问的地址不存在！</p>
    </div>
  );
};

export default NotFoundPage;

方案二：使用服务端渲染生成的 404 页面

如果我们希望 404 页面可以被搜索引擎正确识别，那么我们可以通过在服务端生成 404 页面来实现。为了实现这个功能，我们需要进行以下步骤。

在 pages 目录下创建一个 _error.js 文件。
在 _error.js 文件中实现一个 getInitialProps 函数，这个函数可以从服务端获取到 http 状态码和错误信息。

示例代码：

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

const CustomErrorPage = ({ statusCode, message }) => {
  return (
    <div>
      <h1>{statusCode} Error</h1>
      <p>{message}</p>
    </div>
  );
};

CustomErrorPage.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  const message = res ? res.statusMessage : err ? err.message : '页面未找到';
  return { statusCode, message };
};

export default CustomErrorPage;

修改 next.config.js 中的配置，使得 Next.js 在出现错误时自动渲染 _error.js 中定义的页面。

示例代码：

// javascriptcn.com 代码示例
module.exports = {
  // 自定义 webpack 配置
  webpack: (config, { dev }) => {
    // 修改 webpack 配置
    return config;
  },
  // Next.js 错误处理
  // 只能在生产环境中工作
  // 如果你想在页面渲染时展示错误信息，且是在生产环境中，这个属性会被使用
  // 另一方面，如果您想指定一个特定的错误展示页面，则可以将该属性设置为页面相对路径。
  // 例如：‘/pages/_error.js’
  serverRuntimeConfig: {},
  publicRuntimeConfig: {},
};

方案三：使用自定义的 Layout 组件

除了上面提到的两种方式之外，我们还可以通过使用自定义的 Layout 组件来实现 404 页面的渲染。在应用程序的 Layout 组件中，我们可以根据路由地址来判断当前页面是否是 404 页面，从而使用不同的渲染方式来实现 404 页面的渲染。

示例代码：

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

const DefaultLayout = ({ children, router }) => {
  return (
    <div>
      <header></header>
      <main>{children}</main>
      {router.route === '/404' ? (
        <div>
          <h1>404 Not Found</h1>
          <p>抱歉，您访问的地址不存在！</p>
        </div>
      ) : null}
    </div>
  );
};

export default DefaultLayout;

总结

本篇文章主要介绍了如何解决 Next.js 中的 404 页面渲染问题。通过自定义的 404 页面、使用服务端渲染生成的 404 页面或者使用自定义的 Layout 组件，我们可以针对不同的需求选择不同的解决方案。希望本篇文章能够对大家学习和使用 Next.js 提供一些参考和帮助。

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