Next.js Pages Router如何仅在客户端导入Google Maps组件库代码？

出现这个错误的核心原因是：Next.js默认的服务端渲染（SSR）环境中不存在浏览器的document对象，而@googlemaps/extended-component-library依赖浏览器环境运行。以下是几种无需使用@googlemaps/extended-component-library/react的客户端导入方案：

方案1：Next.js动态导入（推荐） #

利用next/dynamic实现组件级别的禁用SSR，确保地图相关代码仅在客户端加载：

// 页面文件（如pages/map.js）
import dynamic from 'next/dynamic';

// 动态导入地图组件，禁用SSR
const GoogleMapsContainer = dynamic(() => import('../components/GoogleMaps'), {
  ssr: false,
  loading: () => <div>加载地图中...</div>
});

export default function MapPage() {
  return <GoogleMapsContainer />;
}

在单独的地图组件文件中正常导入库：

// components/GoogleMaps.js
import { Map } from '@googlemaps/extended-component-library';

export default function GoogleMaps() {
  return (
    <div style={{ height: '500px', width: '100%' }}>
      <Map 
        apiKey="你的Google Maps API密钥"
        center={{ lat: 39.9042, lng: 116.4074 }}
        zoom={12}
      />
    </div>
  );
}

方案2：useEffect延迟导入 #

通过useEffect钩子在客户端渲染完成后再导入库，避免服务端执行相关代码：

import { useEffect, useState } from 'react';

export default function GoogleMaps() {
  const [MapComponent, setMapComponent] = useState(null);

  useEffect(() => {
    // 仅在客户端异步导入地图组件
    const loadMapLibrary = async () => {
      const { Map } = await import('@googlemaps/extended-component-library');
      setMapComponent(Map);
    };

    loadMapLibrary();
  }, []);

  if (!MapComponent) return <div>加载地图中...</div>;

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <MapComponent 
        apiKey="你的Google Maps API密钥"
        center={{ lat: 39.9042, lng: 116.4074 }}
        zoom={12}
      />
    </div>
  );
}

方案3：条件判断环境导入 #

通过检查window对象是否存在，确保仅在客户端环境导入库：

// 仅在浏览器环境中导入地图组件
let Map;
if (typeof window !== 'undefined') {
  Map = require('@googlemaps/extended-component-library').Map;
}

export default function GoogleMaps() {
  if (!Map) return <div>加载地图中...</div>;

  return (
    <div style={{ height: '500px', width: '100%' }}>
      <Map 
        apiKey="你的Google Maps API密钥"
        center={{ lat: 39.9042, lng: 116.4074 }}
        zoom={12}
      />
    </div>
  );
}

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