Next.js中如何在Document组件中获取locale值？

Document组件是在服务器端渲染的，没法直接用客户端的useRouter Hook，你可以通过以下两种方式获取locale并设置到谷歌地图脚本中：

方法一：用Document的getInitialProps（Pages Router适用） #

在Document组件里定义getInitialProps方法，从服务器上下文里提取locale，再把它作为props传入组件使用：

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

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 从服务器上下文拿到当前locale
    const { locale } = ctx;
    return { ...initialProps, locale };
  }

  render() {
    const { locale } = this.props;
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <script 
            defer 
            src={`https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=${locale || 'en'}`}
          /> 
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

注：如果你的项目已经开启国际化路由，ctx.locale会自动带当前语言环境；要是没开启，可能得从请求头或自定义逻辑里获取locale。

方法二：在客户端组件中动态加载脚本 #

要是不想在Document里处理，可以把谷歌地图脚本的加载逻辑放到客户端组件里，这样就能正常用useRouter拿locale了：

1. 先把Document里的谷歌地图脚本删掉
2. 新建一个客户端组件（比如MapScriptLoader.js）：

'use client';

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function MapScriptLoader() {
  const router = useRouter();
  const { locale } = router;

  useEffect(() => {
    // 先检查脚本有没有加载过，避免重复加载
    if (!document.querySelector('script[src*="maps.googleapis.com"]')) {
      const script = document.createElement('script');
      script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=${locale || 'en'}`;
      script.defer = true;
      document.head.appendChild(script);
    }
  }, [locale]);

  return null;
}

3. 在你的页面或布局组件里引入这个加载器：

import MapScriptLoader from '../components/MapScriptLoader';

export default function Home() {
  return (
    <>
      <MapScriptLoader />
      {/* 你的页面内容 */}
    </>
  );
}

这种方式的好处是，用户切换语言时，脚本能自动加载对应语言的版本，适配locale变化。

内容的提问来源于stack exchange，提问作者John Johnson