Förklaring

Next.js delar upp klientkoden i flera JavaScript-filer (chunks) vid byggtid. Varje build ger dessa filer unika hash-baserade namn. När en ny version driftsätts slutar de gamla filnamnen att fungera.

Om en besökare hade appen öppen i webbläsaren vid driftsättning försöker Next.js lazy-loada nya routes med de gamla filnamnen, men de finns inte längre på servern. Resultatet är ett ChunkLoadError.

Felet är alltså inte ett kodbugsproblem utan ett timing-problem: gammal JavaScript i webbläsaren försöker nå resurser som inte längre existerar.

Vanliga orsaker

En ny version driftsattes medan en besökare hade appen öppen. Gammal service worker som cachar HTML med gamla script-referenser.

Lösning

Lägg till en global felhanterare i app/error.js som laddar om sidan automatiskt vid chunk-fel:

'use client';
import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    if (error?.name === 'ChunkLoadError') {
      window.location.reload();
    }
  }, [error]);

  return (
    <div>
      <h2>Något gick fel</h2>
      <button onClick={reset}>Försök igen</button>
    </div>
  );
}

Med router.refresh() kan sidan i många fall uppdateras utan en hård omladdning.