30
votes

Erreur: l'optimisation de l'image à l'aide du chargeur par défaut de next.js n'est pas compatible avec `Next export`

J'ai obtenu cette erreur lors du déploiement de next.js sur netlify.

Error: Image Optimization using Next.js default loader is not compatible with `next export`.

Possible solutions:

6:47:15 AM:   - Use `next start`, which starts the Image Optimization API.
6:47:15 AM:   - Use Vercel to deploy, which supports Image Optimization.
6:47:15 AM:   - Configure a third-party loader in `next.config.js`.
6:47:15 AM:  -  Read more: https://err.sh/next.js/export-image-api.
6:47:15 AM:   at exportApp (/opt/build/repo/node_modules/next/dist/export/index.js:14:712)

Le problème ne se produit pas lors du déploiement sur Vercel.


0 commentaires

5 Réponses :


26
votes

semble que vous utilisez suivant / images. Mais suivant / images Ne fonctionne pas avec les pages statiques (générées avec Exportation suivante ) Pour les pages statiques, utilisez cet optimiseur d'image: Next-optimized-images à la place


2 commentaires

Wow, merci pour cette réponse, mais je n'ai pas pu trouver un moyen de charger les images paresseuses en utilisant cette dépendance. Connaissez-vous une façon de faire cela?


@ R.Karlus doit être inclus. Voir les documents en recherchant paresseux : github.com/cyrilwanner / Images optimisés suivants



12
votes

J'ai fait face au même problème lors de l'utilisation de la commande EXPORT . Je reçois toujours cette erreur:

Erreur: l'optimisation de l'image à l'aide du chargeur par défaut de next.js n'est pas compatible avec Exportation suivante . Solutions possibles:

  • Utilisez Démarrer Next Pour exécuter un serveur, qui inclut l'API d'optimisation d'image.
  • Utilisez un fournisseur qui prend en charge l'optimisation de l'image (comme Vercel).
  • Configurez un chargeur tiers dans next.config.js .
  • Utilisez le chargeur Prop pour suivant / image .

Donc, pour faire fonctionner mon chargeur personnalisé correctement, j'avais besoin Pour définir un chemin sur une chaîne vide:

Ainsi, pour ceux qui sont également confrontés à cela, veuillez essayer de définir le chemin vers un / en tant que tel:

module.exports = {
  // https://github.com/vercel/next.js/issues/21079
  // Remove this workaround whenever the issue is fixed
  images: {
    loader: 'imgix',
    path: '/',
  },
}


4 commentaires

Est-ce que ce fichier Next.config.js?


@Deepkakkar Oui, dans le fichier next.config.js


Cela fonctionnera-t-il si je ne déploierai pas sur Vercel? , il suffit d'exporter la construction à l'aide de Exportation suivante . Obtenir actuellement une erreur d'optimisation de l'image pendant l'exportation


@Deepkakkar Oui, cela devrait fonctionner ailleurs après cette solution de contournement. Je l'ai testé dans Netlify et l'erreur a disparu



36
votes

Utiliser akamai

setting images.loader à 'imgix' a provoqué les erreurs de développement et de construction.

J'ai utilisé ceci à la place:

// next.config.js

module.exports = {
  images: {
    loader: 'akamai',
    path: '',
  },
}

Cela fonctionne juste pour tout ce qui m'importe.

Valeurs possibles pour images.loader : [par défaut, imgix, cloudinary, akamai, coutust]
Référence: https://nextjs.org/docs/api-reference / Suivant / Image # intégrés intégrés


2 commentaires

Pour moi, cela a fonctionné après avoir établi le chemin: '/'


moi aussi .. travaillé après le chemin mis: '/'



0
votes

Cette erreur concerne l'image / ensuite, je fais face à la même erreur alors que "la prochaine construction", que j'utilise au lieu de dans le projet et le reconstruire par npm run build et il résout l'erreur.


0 commentaires

0
votes

à partir de next.js 12.2, vous pouvez désactiver complètement l'optimisation de l'image pour next / image en utilisant un indicateur expérimental dans next.config.js . Cela évite d'avoir à utiliser un fournisseur tiers pour optimiser l'image lors de l'utilisation de suivant / export .

à partir du suivant / image Documentation:

non optimisé - Lorsque cela est vrai, l'image source sera servie en tant que au lieu de changer la qualité, la taille ou le format. Par défaut à false .

module.exports = {
    experimental: {
        images: {
            unoptimized: true
        }
    }
}


0 commentaires