Next Export 脚本不适用于 next/image 组件

Question

I have a project. I want to build and export it but there is an error.

Here is my build script in package.json file.

"scripts": {
    "build": "next build && next export"
}

Here is my component where I'm using next/image

import Image from 'next/image'

export default function Logo(){
    return(
        <Image 
            src={process.env.website_url ? (process.env.website_url + "/img/logo/logo1.png") : "/img/logo/logo1.png" } 
            width={width} 
            height={height}
            alt="logo"
        />
    )
}

And here is the error when I want to build the project:

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

So, what sould I do now. Should I use a different loader or what? Thanks.

Answer 1

next export is only for static pages. So next/image are images optimized and loaded with server started by next start (They are images on demand not on build). next start starts server which has Image optimization API. That's why its unable to export. Try using other image loading service. You can also try only building the next js (next build) without next export and use next start to start server which will handle the Image optimization.

You can Also configure your own loader for Image optimization. Refer these :

Loader reference

next-optimized-images

Next JS Doc message