Resolved NextJS image not able to optimization

[chandrashekharkumar]

Server operating system version

AlmaLinux 8.4

Plesk version and microupdate number

18.0.56 Update #4

Hi,

I am get issue while loading the image in NextJS project.
The issue is with NextJS <Image> tag. If I use <Image/> than in production the image not get load/display. It gives 500 error.
If I add unoptimized in <Image /> than it get load in production.

Please help me to resolve it issue.

 

[itexpertnow]

I have the same issue, any idea how to fix?

No error

https://dev.amcolubricants.com/images/footage-placeholder.png

Error 500

https://dev.amcolubricants.com/_next/image?url=/images/footage-placeholder.png&w=3840&q=75

 

[itexpertnow]

 

[chandrashekharkumar]

Have you found any solution? I am facing same issue

 

[itexpertnow]

Only solution I found is to host the website somewhere else. I used vercel, it's free and works perfectly

 

[Maarten]

Instead of the App Startup File "node_modules/.bin/next", use the custom server "server.js" as explained on the Next.js website:

Guides: Custom Server | Next.js

Start a Next.js app programmatically using a custom server.

nextjs.org

Set Document Root to /httpdocs
Set Application Root to /httpdocs

Update the package.json file as explained on the Next.js website:

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

Run"npm install" -> "npm build" -> "npm start" and the <Image /> tag should work.

 

[itexpertnow]

That worked! thank you

 

[Maarten]

I'm glad to hear that it solved your issue!

 

[itexpertnow]

this is really strange, both approaches are now working even when using the .bin/next file, not sure what happened:

https://dev.amcolubricants.com/_next/image?url=%2Fcontent%2Fimages%2Fuser-icon.png&w=128&q=75

 

[Yurii]

Instead of the App Startup File "node_modules/.bin/next", use the custom server "server.js" as explained on the Next.js website:

Guides: Custom Server | Next.js

Start a Next.js app programmatically using a custom server.

nextjs.org

Set Document Root to /httpdocs
Set Application Root to /httpdocs

Update the package.json file as explained on the Next.js website:

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

Run"npm install" -> "npm build" -> "npm start" and the <Image /> tag should work.

Hi, I have the same problem. But when I run "yarn start" I get a server crash