如何在Next.js中正确配置OpenLayers？双地图异常问题求助

核心问题原因 #

1. React Strict Mode 重复渲染：开发环境下React Strict Mode会触发两次组件渲染，你使用固定ID map 作为地图容器，OpenLayers会在同一个DOM元素上创建两个地图实例，导致显示重复地图。
2. 未清理地图实例：组件卸载时没有销毁OpenLayers地图对象，造成内存泄漏，引发卡顿、异常。
3. 客户端组件标记缺失：MapComponent 使用了 useEffect（客户端API）但未添加 'use client' 指令，在Next.js App Router中可能导致渲染逻辑异常。

修复后的代码 #

MapComponent.tsx #

'use client'
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import { useEffect, useRef } from 'react';

function MapComponent() {
  const mapContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!mapContainerRef.current) return;

    const map = new Map({
      target: mapContainerRef.current,
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });

    // 组件卸载时销毁地图，清理内存
    return () => {
      map.dispose();
    };
  }, []);

  return (
    <div 
      ref={mapContainerRef}
      style={{ height: '300px', width: '100%' }} 
      className="map-container" 
    />
  );
}

export default MapComponent;

关键修改点 #

• 添加 'use client' 指令，明确标记为客户端组件。
• 使用 useRef 获取地图容器DOM元素，替代全局ID，避免重复实例化问题。
• 在 useEffect 的清理函数中调用 map.dispose()，销毁地图实例，防止内存泄漏。

额外说明 #

开发环境下的Strict Mode重复渲染是正常现象，修复后生产环境不会出现此问题；清理地图实例不仅解决卡顿，还能避免后续路由切换时的内存累积问题。

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