typescript - Optimizarea imaginilor NextJS nu funcționează în producție pe Vercel

În prezent lucrez la o aplicație NextJS. Aplicația mea va fi implementată cu mai multe domenii pe Vercel. Aplicația ar trebui să afișeze imaginile dinamic. Toate imaginile sunt afișate corect în mediul de previzualizare pe Vercel, dar când implementez aplicația în mediul de producție, răspunsul pentru imaginea optimizată este: Cerere greșită INVALID_IMAGE_OPTIMIZE_REQUEST

Dacă solicit imaginea originală (neoptimizată), totul funcționează conform așteptărilor. Folosesc cea mai recentă versiune de NextJS (14.0.4)

Am încercat să folosesc mai multe configurații diferite pentru NextJS (config.nextjs.mjs). De asemenea, am încercat să cer diferite imagini manual (originale și optimizate).

Configurarea mea actuală next.config.mjs arată astfel

images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
        {
            hostname: 'domain1.example.com',
        },
        {
            hostname: 'domain2.example.com',
        },
    ],
},

URL-ul imaginii mele, de exemplu, este /api/images/some-image-uuid. Pentru a încărca imagini optimizate, folosesc componenta Image din NextJS de la next/image.

Răspuns #1

Configurația ta următoare ar putea fi insuficientă. Sugerez să adaugi protocolul și portul, precum și alte proprietăți dacă este necesar. Iată documentația

De asemenea, s-ar putea să fie nevoie să adăugați domeniul în obiectul images. Iată problema

images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "openweathermap.org",
        port: "",
      },
    ],
  },

Răspunsul #2

În cazul meu, mi-am mutat imaginile într-un alt bucket S3, dar am uitat să reflect această schimbare în variabilele de mediu de producție.

Mi-a luat ore întregi de cercetare, dar când am înlocuit variabila de mediu, imaginile mele au început să apară din nou.