Next Export script is not working with next/image component

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.

EDIT: I have created a server.js file and revised package.json scripts.

Server.js file:

const express = require('express')
const server = express()
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'

const app = next({dev})
const handle = app.getRequestHandler()
const port = 3000

app.prepare().then(()=>{

  server.get('*', (req, res)=>{
    return handle(req,res)
  })

  server.listen(port, (err) => {
    if(err) console.log(err)
    console.log(`SERVER SUCCESS: ${port}`)
  })

}).catch((e)=>{

  console.log(e.stack)
  process.exit(1)
  
})

Scripts in package.json file:

"scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "node server.js"
  }

Server is working on the localhost, but not working on the host. There is a 503 Service Unavailable error.

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