React-leaflet fix for next.js

Usage no npm install needed!

<script type="module">
  import meysam213ReactLeaflet from 'https://cdn.skypack.dev/@meysam213/react-leaflet';


React-leaflet for Next.js

this package fixed problems react-leaflet & leaflet for next.js

Next.js 11 is Passed ✔

install with npm

$ npm install @meysam213/react-leaflet

install with yarn

$ yarn add @meysam213/react-leaflet


first create component

import { NextMap } from '@meysam213/react-leaflet';

const MapBox = () => {
  return (
      <NextMap lat={50} lng={50} />

and for use with next.js import dynamic

import dynamic from 'next/dynamic';

const MapBox = dynamic(() => import('components/mapBox'), {
  ssr: false,

notice: Due to being SSR, it is necessary to use import dynamics


prop Default Type Necessary
lat - Number Necessary
lng - Number Necessary
scrollWheelZoom true Boolean Optional
zoomControl false Boolean Optional
attributionControl false Boolean Optional
zoom 17 Number Optional
Height 300px String Optional
Width 300px String Optional
popUp Hello! String Optional
borderRadius 0px String Optional


Github: @premier213

Twitter : @premier213