Making Next.js and Mapbox GL JS get along

Mapbox and the window object

This is going to be a very short post, but that does not make it unimportant — I just wanted to share a solution to a problem I encountered while using next.js and Mapbox.

This is not what you want!

Using dynamic imports

For this, the next package comes with a method that allows us to dynamically import components that need client-side rendering.

// This is going to rekt your appimport Map from './client';export default () => (
<div>
<Map />
</div>
);
const DynamicMap = dynamic(() => import('./client'), {
loading: () => <p>Loading...</p>
});
const DynamicMap = dynamic(() => import('./client'), {
loading: () => <p>Loading...</p>,
ssr: false
});

--

--

Tech Enthusiast, Music Afficionado, Great At Googling

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Timothy Krechel

Timothy Krechel

Tech Enthusiast, Music Afficionado, Great At Googling