I’m create Next.js v14 app and use leaflet package for react (react-leaflet). I have api page with json reponse at url /servers/map/json.

My app/src/servers/page.tsx with content:

'use client';


import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css';
import 'leaflet-defaulticon-compatibility';


import dynamic from "next/dynamic";
import useSWR from "swr";
import {usePathname} from "next/navigation";
import Loader from "@/components/Loader";


export default function Map() {
    const fetcher = (...args: Parameters<typeof fetch>) => fetch(...args).then(response => response.json());
    const {data, error, isLoading, isValidating, mutate} = useSWR(`${usePathname()}/json`, fetcher);

    const MapWithNoSSR = dynamic(() => import("@/components/MyMap"), {
        loading: () => (
            <Loader/>
        ),
        ssr: false,
    });

    if (!data) {
        return (
            <Loader/>
        );
    }

    if (!isLoading && error) {
        return (
            <div className="container bg-warning text-primary">
                <h1>Error</h1>
            </div>
        );
    }
    const markers = data.servers.map((server: any) => {
        return server;
    });

    return (
        <div className="container">
            <MapWithNoSSR markers={markers}/>
        </div>
    );
};

I have no issues with running dev server (npm run dev), but have on building process.

npm run build:

Error occurred prerendering page "/servers/map". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: window is not defined
    at <root_app>/.next/server/app/servers/map/page.js:1:4649
    at 8052 (<root_app>/.next/server/app/servers/map/page.js:1:151106)
    at t (<root_app>/.next/server/webpack-runtime.js:1:128)
    at 8510 (<root_app>/.next/server/app/servers/map/page.js:9:979)
    at Object.t [as require] (<root_app>/.next/server/webpack-runtime.js:1:128)
    at require (<root_app>/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18490)
    at I (<root_app>/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at <root_app>/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:96668
    at F._fromJSON (<root_app>/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97106)
    at JSON.parse (<anonymous>)
 ✓ Generating static pages (10/10)

> Export encountered errors on following paths:
        /servers/map/page: /servers/map

I have no idea how to make it work, but I really need it.

• Next.js: 14.2.5
• NodeJS: v18.20.4

Please fix me.