cuando quiero exportar mi aplicación nextjs, dice que no puedo exportar mis imágenes en sitios web estáticos.
Error: la optimización de imágenes con el cargador predeterminado de Next.js no es compatible con
next export. Posibles soluciones: - Utilicenext startpara ejecutar un servidor, que incluye la API de optimización de imágenes. - Utilice cualquier proveedor que admita la optimización de imágenes (como Vercel). - Configure un cargador de terceros ennext.config.js. - Use el apoyo delloaderparanext/image.
¿Cómo puedo hacer para que lo haga?
¿Hay alguna manera de que simplemente le diga que renderice imágenes de forma estática? No quiero pasar por otros cargadores de imágenes en línea.
Debe configurar un cargador de imágenes personalizado en Next.js
En su archivo next.config.js , agregue esta propiedad a la exportación:
images: { loader: "custom" } Y haz un script llamado loader.js que exporte esto:
function imageLoader({ src }) { return `/images/${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY } module.exports = imageLoader; Para cada componente de la Image , configure el accesorio del loader manualmente:
const imageLoader = require("PATH TO loader.js"); <Image loader={imageLoader} />Creé un módulo npm para que podamos usar el componente Next.js <Image/> con imágenes optimizadas mientras usamos la funcionalidad de exportación estática.
https://www.npmjs.com/package/next-image-export-optimizer
La biblioteca envuelve el componente <Image /> de Next.js y crea automáticamente imágenes optimizadas usando sharp.js en el momento de la exportación.
Utiliza un cargador personalizado para crear un srcset para el <img /> que crea el componente <Image /> de Next.js. Luego, en el momento de la compilación/exportación, las imágenes dentro de la carpeta public/images (como ejemplo) se optimizan con sharp.js y se copian en la carpeta de compilación.
Voy a agregar a la respuesta de skara9 porque no funcionó para mí. Encontré un hilo en github discutiéndolo y la respuesta funcionó para mí. Simplemente envuelve el componente de imagen NextJS y funciona bastante bien para mí.
// components/Image.js import NextImage from "next/image"; // opt-out of image optimization, no-op const customLoader = ({ src }) => { return src } export default function Image(props) { return ( <NextImage {...props} loader={customLoader} /> ); } Asegúrese de cambiar sus importaciones y actualizar su next.config.js
import Image from '../components/Image.js'