I’ve been working on a Next.js app with a Leaflet map component.
Using this combination of technologies has not gone smoothly.
I’ve been running into an issue trying to make the Leaflet component render client side.
From my understanding, Next.js renders React server-side by default, but this is easy to change with the 'use client' directive.
After a bit of work, I was able to get a map component rendering on the page by importing it with
const MapView = dynamic(
() => import('@/components/MapView'),
{
loading: () => <p>Map is loading</p>,
ssr: false
}
)
From here, I wanted to configure the markers, which I intended to set and store in a React hook. I was not able to find a way to make this work. I’ve consulted documentation a few different tutorials, mostly notably Jan’s article, but have yet to get this working with dynamic data.