Förklaring

Av säkerhetsskäl blockerar next/image externa bildkällor från domäner som inte finns i konfigurationens allowlista. Det skyddar mot att bildoptimeringsproxyn används för att serva bilder från godtyckliga externa domäner.

Felet uppstår när du skickar en extern URL som src till Image-komponenten, men hostnamnet inte finns i remotePatterns i next.config.js. Det spelar ingen roll om bilden är publikt tillgänglig. Next.js kräver ett explicit godkännande per domän.

Sedan Next.js 13 är remotePatterns den rekommenderade konfigurationen. Den äldre domains-arrayen fungerar fortfarande men stöder inte wildcards.

Vanliga orsaker

Extern bild-URL skickad till Image-komponenten utan att hostnamnet är konfigurerat. Skillnad i hostnamn, till exempel www.example.com kontra example.com, behandlas som separata domäner.

Lösning

Lägg till hostnamnet i remotePatterns i next.config.js:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
};

module.exports = nextConfig;

För att tillåta hela subdomäner används wildcard: hostname: '**.example.com'. Starta om dev-servern efter att konfigurationen ändrats.