images.remotePatterns – Autorizarea domeniilor externe pentru optimizare imagini în Next.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'media.dexblog.ro',
        pathname: '/**',
      },
    ],
  },
};

Ce face images.remotePatterns - Autorizarea domeniilor externe pentru optimizare imagini

Din motive de securitate (prevenirea atacurilor SSRF și a consumului abuziv de resurse pe server), componenta `` refuză să optimizeze imagini de pe domenii străine dacă acestea nu sunt aprobate explicit.

Configurația modernă images.remotePatterns înlocuiește vechea proprietate relaxată `domains`, oferind reguli stricte bazate pe protocol, port, domeniu și expresii de cale `pathname`.

Exemple

Exemplul 1: Autorizarea imaginilor stocate într-un bucket AWS S3 dedicat

Permite optimizarea imaginilor venite din depozitul cloud.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'dexblog-stocare.s3.eu-central-1.amazonaws.com',
        pathname: '/uploads/**',
      },
    ],
  },
};

Ieșire în terminal

Imaginile din bucketul S3 pot fi folosite în siguranță cu <Image />.

Greșeli frecvente

• Folosirea unui wildcard prea permisiv (‘**’) pe hostname, deschizând serverul la abuzuri din partea oricărui site malițios din internet.

Comenzi înrudite

• Componenta <Image> (next/image) - Optimizarea automată a imaginilor: Extinde elementul HTML <img> oferind conversie automată în WebP/AVIF, redimensionare responsivă și eliminarea fenomenului de deplasare a conținutului (CLS).
• next.config.js - Fișierul principal de configurare Next.js: Centralizează setările avansate ale compilatorului, modulelor externe, regulilor de redirecționare și mediului de rulare.