4

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.

1 Answer 1

3

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

Sign up to request clarification or add additional context in comments.

3 Comments

It was very helpful, thank you for answer. I want to use next/image component. How can I get start my application without static pages on my server?
First npm run build and then npm run start(next start see your package.jsonf for this). So what it will do is build your file, minify and etc. And the next start will start the next.js server which has the image optimization API and will deliver it based on user demand as in might be lazy loaded. This is for production. For development just npm run dev. nextjs.org/docs/deployment#nodejs-server. Let me know if this helps or just help me understand more about your question.
I have created a custom server and uploaded all documents to host but server is not working and there is a 503 server unavailable error... Server is working in the local but not working on the host... I will add my server codes to the top and you can check.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.