NextJS and persist layout that contains Leaflet

Question

I'm migrating a project from React to NextJS which has a layout where the common component is a Leaflet Map.

1. In Next JS, the "next/dynamic" used to load the map
2. React used react-router-dom@v6
3. 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='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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.