NextJS and persist layout that contains Leaflet - reactjs

Question

I'm migrating a project from React to NextJS which has a layout where the common component is a Leaflet Map.
In Next JS, the "next/dynamic" used to load the map
React used react-router-dom#v6
next layout
Layout code:
import dynamic from "next/dynamic";
import React, { useMemo, useState } from "react";
const DynamicLeafletMap = dynamic(
() => import("../components/LeafletMap/LeafletMap"),
{
ssr: false,
}
);
function Layout({ children }) {
return (
<main>
<DynamicLeafletMap />
{children}
</main>
);
}
export default Layout;
_app.js code:
import Layout from "../components/Layout";
import "../styles/globals.scss";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
LeafletMap.jsx
import { MapContainer, TileLayer } from "react-leaflet";
import styles from "./LeafletMap.module.scss";
const initial_position = [38.9637, 35.2433];
function LeafletMap() {
return (
<>
<div className={styles.map}>
<MapContainer
center={initial_position}
zoom={4}
scrollWheelZoom={true}
className={styles.map__container}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</MapContainer>
</div>
</>
);
}
export default LeafletMap;
The problem is that when using "router.push" (for example, clicking on a marker should open a modal window on top of the map), the map is rerendered and reseted.
I tried different ways like useMemo, createPortal but this didn't work.
Is there a way to fix this behaviour? Maybe there is another framework that provides functionality like "persist layout"?

Answer 1

Next13 with new app directory or Remix solves this problem.