Image optimization doesnt work on prod
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
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'
}