Next.js Discord

Discord Forum

Image optimization doesnt work on prod

Unanswered
Abyssinian posted this in #help-forum
Open in Discord
Avatar
AbyssinianOP
Hello everyone, I know that there have been tons of topics regarding this, but I would need some help i believe as I struggle since 2nd day already to get this working.

So I have some custom server for my web app based on React and NextJS. Im using <Image /> to display images and everything works perfectly fine on local but when moving to production nothing seems to work and all images are broken.

1. My next.config.mjs contains proper remotePatterns and allows all domains that I'm using.
2. Images are saved on my backend server and fetched from there
3. NextJS optimization messing up with those urls and my server cannot handle it.

What I tried?
https://nextjs.org/docs/pages/building-your-application/configuring/custom-server

I setup server.ts:
import { createServer } from "http"
import { parse } from "url"
import next from "next"

const port = process.env.NODE_ENV === "production" ? 3000 : 3000
const dev = process.env.NODE_ENV !== "production"
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
    createServer((req, res) => {
        const parsedUrl = parse(req.url!, true)
        handle(req, res, parsedUrl)
    }).listen(port)

    console.log(`> Server listening at port: ${port} as ${dev ? "development" : process.env.NODE_ENV}`)
})

as it is in docs, updated package.json:
    "scripts": {
        "dev": "cross-env NODE_ENV=development next dev",
        "build": "cross-env NODE_ENV=production next build && tsc --project tsconfig.server.json",
        "start": "cross-env NODE_ENV=production node dist/server.js",
        "lint": "next lint"
    },


added tsconfig.server.json:
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "commonjs",
        "outDir": "dist",
        "lib": ["es2019"],
        "target": "es2019",
        "isolatedModules": false,
        "noEmit": false
    },
    "include": ["server.ts"]
}

Doing unoptimized: true works only.

14 Replies

Avatar
@Abyssinian Hello everyone, I know that there have been tons of topics regarding this, but I would need some help i believe as I struggle since 2nd day already to get this working. So I have some custom server for my web app based on React and NextJS. Im using <Image /> to display images and everything works perfectly fine on local but when moving to production nothing seems to work and all images are broken. 1. My `next.config.mjs` contains proper `remotePatterns` and allows all domains that I'm using. 2. Images are saved on my backend server and fetched from there 3. NextJS optimization messing up with those urls and my server cannot handle it. What I tried? https://nextjs.org/docs/pages/building-your-application/configuring/custom-server I setup `server.ts`: ts import { createServer } from "http" import { parse } from "url" import next from "next" const port = process.env.NODE_ENV === "production" ? 3000 : 3000 const dev = process.env.NODE_ENV !== "production" const app = next({ dev }) const handle = app.getRequestHandler() app.prepare().then(() => { createServer((req, res) => { const parsedUrl = parse(req.url!, true) handle(req, res, parsedUrl) }).listen(port) console.log(`> Server listening at port: ${port} as ${dev ? "development" : process.env.NODE_ENV}`) }) as it is in docs, updated `package.json`: json "scripts": { "dev": "cross-env NODE_ENV=development next dev", "build": "cross-env NODE_ENV=production next build && tsc --project tsconfig.server.json", "start": "cross-env NODE_ENV=production node dist/server.js", "lint": "next lint" }, added `tsconfig.server.json`: json { "extends": "./tsconfig.json", "compilerOptions": { "module": "commonjs", "outDir": "dist", "lib": ["es2019"], "target": "es2019", "isolatedModules": false, "noEmit": false }, "include": ["server.ts"] } Doing `unoptimized: true` works only.
Avatar
go to the network tab and look at the image requests. they should start with /_next/image?. what are the status codes? are they 500 or 4xx?

any logs on the server relevant to this issue?
Avatar
AbyssinianOP
@joulev those are 500
on server side i noticed this only: TypeError: fetch failed at async fetchExternalImage (E:\Code\pieces-market-fe\node_modules\next\dist\server\image-optimizer.js:601:17) at async NextNodeServer.imageOptimizer (E:\Code\pieces-market-fe\node_modules\next\dist\server\next-server.js:672:48) at async cacheEntry.imageResponseCache.get.routeKind (E:\Code\pieces-market-fe\node_modules\next\dist\server\next-server.js:178:85) at async (E:\Code\pieces-market-fe\node_modules\next\dist\server\response-cache\index.js:91:36) at async (E:\Code\pieces-market-fe\node_modules\next\dist\lib\batcher.js:45:32) { [cause]: [Error: unable to verify the first certificate] { code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE' }
Avatar
AbyssinianOP
yes it is correctly setup. Once I turn off optimization there are no more SSL issues
Avatar
if you make a script.js file, fetch the image (https) URL in there, and run that file with nodejs, does the same error occur or do you get a 200 response?
Avatar
AbyssinianOP
I will have to play with it then a bit to solve this SSL issue if thats the case indeed. Thanks for help I will keep you posted
Avatar
AbyssinianOP
@joulev it turned out that this certificate and LEAF_SIGNATURE error after fix still doesnt solve images display issue. The only thing that works is to turn off images optimization. But we really wanted to use it..
Avatar
AbyssinianOP
Whenever you just hover over broken Image it throws Internal Server Error 500
Avatar
@Abyssinian Whenever you just hover over broken Image it throws Internal Server Error 500
Avatar
Yes but the server log should have the error message with more info