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.