面试题：Next.js 自定义 Document 组件下处理多语言页面元数据的策略

实现思路

安装依赖：确保项目中安装了 next - i18next 及相关依赖，用于国际化支持。
配置 next - i18next：在项目根目录创建 next - i18next.config.js 文件，配置语言列表、默认语言等参数。例如：

module.exports = {
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en'
  }
};

创建自定义 Document 组件：在 pages/_document.js 文件中，创建自定义的 Document 组件。引入 next - i18next 中的 useTranslation 钩子来获取翻译函数。

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { useTranslation } from 'next - i18next';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    const { t } = useTranslation('common');
    const title = t('pageTitle');
    const description = t('pageDescription');

    return (
      <Html lang={this.props.locale}>
        <Head>
          <title>{title}</title>
          <meta name="description" content={description} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

准备翻译文件：在 public/locales 目录下，按照语言代码创建文件夹（如 en、zh），并在每个文件夹内创建 common.json 文件（可根据实际情况命名），用于存储页面元数据等通用翻译内容。例如 public/locales/en/common.json：

{
  "pageTitle": "English Page Title",
  "pageDescription": "English page description"
}

public/locales/zh/common.json：

{
  "pageTitle": "中文页面标题",
  "pageDescription": "中文页面描述"
}

可能遇到的问题及解决方案

翻译文件加载问题：
- 问题：翻译文件未正确加载，导致页面元数据无法正确显示。
- 解决方案：确保 next - i18next 配置正确，检查文件路径和命名是否符合规范。同时，在开发环境中，可通过日志打印来确认翻译文件是否被加载。
语言切换时元数据更新不及时：
- 问题：切换语言后，页面元数据没有实时更新。
- 解决方案：可以在语言切换逻辑中，强制页面重新渲染。例如，使用 next/router 的 replace 方法，并传递 { shallow: true } 来触发组件重新渲染，从而更新元数据。
SEO 相关问题：
- 问题：搜索引擎爬虫可能无法正确识别多语言页面的元数据，影响 SEO 效果。
- 解决方案：可以使用 next - i18next - seo 等插件，自动生成符合 SEO 规范的多语言元数据。同时，确保服务器端渲染（SSR）配置正确，使爬虫能够获取到正确的页面内容和元数据。

面试题：Next.js 自定义 Document 组件下处理多语言页面元数据的策略

知识考点

面试题答案

实现思路

可能遇到的问题及解决方案