在Next.js中配置React Leaflet地图显示异常求助

你的地图出现瓦片分割的问题，核心原因是Leaflet CSS加载方式错误，加上Next.js 13 App Router的特殊要求导致样式未生效，具体解决步骤如下：

1. 标记组件为客户端组件 #

在Homepage组件文件顶部添加'use client';指令，因为react-leaflet依赖浏览器环境，而Next.js 13 App Router默认是服务器组件：

'use client';
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

2. 正确引入Leaflet CSS #

不要在组件内直接返回<link>标签，改用以下两种方式之一：

方式一：全局引入（推荐） #

在app/layout.tsx中直接导入Leaflet的CSS文件：

import 'leaflet/dist/leaflet.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

方式二：客户端组件内动态加载 #

如果需要在组件内单独加载，用useEffect动态创建link标签：

'use client';
import { useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export default function Homepage() {
  useEffect(() => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
    link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=';
    link.crossOrigin = '';
    document.head.appendChild(link);
    return () => document.head.removeChild(link);
  }, []);

  // 后续组件代码
}

3. 完善地图容器样式 #

给MapContainer添加明确的宽高样式，确保容器尺寸完整：

<MapContainer
  center={[51.505, -0.09]}
  zoom={13}
  scrollWheelZoom={false}
  style={{ height: '400px', width: '100%' }} // 同时设置宽高
>

验证依赖兼容性 #

你使用的Next.js 13.4.19 + react-leaflet 4.2.1 + leaflet 1.9.4版本组合是兼容的，无需调整版本。

完成以上步骤后，地图应该能正常显示在橙色区块内，不会再出现瓦片分割的问题。

内容的提问来源于stack exchange，提问作者Clément Ramos