Next.js 国际化场景下 404 页面解决方案

Next.js 中使用 i18n 时处理 404 页面的最佳实践

作为一名使用 Next.js 框架进行 Web 开发的开发者，你可能遇到过在国际化 (i18n) 场景中使用 404 页面时遇到的挑战。这个问题源于 Next.js 在生产环境下对页面进行预渲染的方式，这可能会导致 404 页面无法正常显示。

但不要担心，这不是一个无法解决的问题。通过实施一些巧妙的技巧，你可以轻松地解决这个问题，并确保在所有受支持的语言中都能正确显示 404 页面。

理解 Next.js 如何处理 404 页面

在深入了解解决方案之前，让我们快速回顾一下 Next.js 如何处理 404 页面。在生产环境中，Next.js 将静态文件预渲染为 HTML 文件，并将其存储在 .next/server 目录中。当用户访问一个页面时，Next.js 会检查该页面是否已预渲染，如果已预渲染，则直接将预渲染的 HTML 文件发送给用户，从而提高性能。

在开发环境中，Next.js 不会预渲染页面，而是使用 webpack dev server 提供实时重新加载功能。这意味着当用户访问一个页面时，webpack dev server 会将该页面编译成 JavaScript 代码，并将其发送给用户。

在 i18n 场景中处理 404 页面

当使用 i18n 时，Next.js 会为每个语言创建一个单独的 .next/server 目录，并将预渲染的 HTML 文件存储在这些目录中。当用户访问一个页面时，Next.js 会根据用户的语言选择，将相应的预渲染的 HTML 文件发送给用户。

然而，在 app route 模式下，Next.js 会将所有的页面都视为应用程序的一部分，并将其预渲染成 HTML 文件。这导致了 404 页面无法正常使用，因为 Next.js 会始终将 404 页面预渲染成 HTML 文件，即使该页面不存在。

解决这个问题的解决方案

要解决这个问题，我们可以使用以下分步方法：

1. 创建自定义 404 页面组件

创建一个新的 React 组件，专门用于处理 404 页面。此组件应包含你希望在 404 页面上显示的内容和行为。

2. 在 pages/_error.js 文件中导入自定义 404 页面组件

pages/_error.js 文件是 Next.js 中的特殊文件，它会在发生错误时加载。在此文件中，我们需要导入自定义 404 页面组件。

3. 在自定义 404 页面组件中获取当前语言

在自定义 404 页面组件中，使用 getInitialProps() 方法获取当前语言。

4. 根据当前语言加载相应的语言版本 404 页面

使用从 getInitialProps() 方法中获取的语言，加载相应的语言版本 404 页面。

通过遵循这些步骤，你可以在 i18n 场景下正确显示 404 页面。

示例代码

以下代码示例演示了如何实现自定义 404 页面组件：

import React, { useEffect, useState } from 'react';
import Router from 'next/router';

const Custom404Page = () => {
  const [currentLanguage, setCurrentLanguage] = useState('');

  useEffect(() => {
    const { pathname } = Router;
    const language = pathname.split('/')[1];
    setCurrentLanguage(language);
  }, []);

  const get404PageContent = () => {
    switch (currentLanguage) {
      case 'en':
        return (
          <h1>404 Not Found</h1>
        );
      case 'es':
        return (
          <h1>404 Página no encontrada</h1>
        );
      default:
        return (
          <h1>404 Página no encontrada</h1>
        );
    }
  };

  return (
    <div>
      {get404PageContent()}
    </div>
  );
};

export default Custom404Page;

常见问题解答

1. 为什么自定义 404 页面组件不显示？

   • 确保你已正确导入自定义 404 页面组件到 pages/_error.js 文件中。

2. 为什么 404 页面仅显示一种语言的内容？

   • 确保在自定义 404 页面组件中根据当前语言加载相应的语言版本内容。

3. 我可以使用这个解决方案在不同的语言中显示不同的 404 页面吗？

   • 是的，你可以根据需要创建多个语言版本的自定义 404 页面组件。

4. 这个解决方案在开发模式下是否有效？

   • 是的，这个解决方案在开发模式和生产模式下都有效。

5. 是否还有其他方法来处理 404 页面？

   • 除了自定义 404 页面组件，你还可以使用 Next.js 的 next.config.js 文件中的 exportTrailingSlash 和 trailingSlash 属性来配置 404 页面行为。