What wrong? Next.js Image dont work on server

[Xazgl]

Summary

Next.js Image does not work on the server, but it works on the localhost.

One could think about permissions, because I take images from a third-party domain, BUT I load images in a regular img, both on the server and on the localhost correctly.

The logic is this: I take from the domain side with pictures, images of machines and their characteristics into my database. And already from the database I reflect them in the Image component. Due to the large weight of the image, I applied the sizes attribute.

I don't understand then what the reason may be. I think you need to configure the reception of images from other servers, somewhere other than next.conf.But then it's strange why it takes the image of a character in a regular img.

I read here https://nextjs.org/docs/pages/api-reference/components/image-legacy#remote-patterns

My deploy conf: Node + Next.js/Prisma

Next.js and his < Image /> its work on localhost but on server i have this: enter image description here

In alt there is a regular url, and in src there is already a prefix next and it should choose an optimized size for sizes, but it does not do this. enter image description `here```

Additional information

<Image
                                    src={car.picture[0]}
                                    alt={car.picture[0]}
                                    layout="fill"
                                    sizes="(max-width: 750px) 50vw,
                                            (max-width: 828px) 40vw,
                                            (max-width: 1080px) 33vw,
                                            20vw"
                                    loading="lazy"
                                /> 

This is the usual < img />.Its work on server or localhost, but images sizes amazing:

<img
                            loading="lazy"
                            decoding='async'
                            src={car.picture[0]}
                            className="cardImg">
                        </img> 

Added a third-party domain with img in next.config.js:

const nextConfig = {
  reactStrictMode: true,
};

module.exports = {
  ...nextConfig,
  images: {
    domains: ['mydomaineImg.com'],
  },
};

https://stackoverflow.com/questions/76181016/what-wrong-next-js-image-dont-work-on-server

Additional information

https://stackoverflow.com/questions/76181016/what-wrong-next-js-image-dont-work-on-server

Example

No response

[icyJoseph]

When you say, it works on localhost, do you mean in next dev or next build && next start?

I wonder if the 3rd party domain has CORS or some other kind of restriction on the caller, but the weird thing is that next/image first sends the request to the next.js server via _next/ calls, could you try to post some screenshot with what's going on with those calls? They look like this: /_next/image?url=, look for them in the network tab.

Are you also copying the next.config.js into your production server?

[Xazgl]

I put this code. I don't see anything, in the server console

But in localhost I see :

The file itself is on the same level with env and Docker inside the root of the project

If it outputs on the local host, then it works on the server as well, is the project the same ?

[icyJoseph]

It should only log on the server, during development, during next build time and during next start.

Locally you see it right? But not in your production server?

This is strange. You are not using standalone mode, you are not doing export and you have a recent Next.js version. What else could be wrong.

Are you copying the .next folder (result of running next build) somewhere else? Are you maybe using a custom next.js server? Very confusing stuff.

[Xazgl]

Now I'm trying to figure out what else can be looked at for this reason. In a rare case, I attach my docker and package.json. Essentially I'm running it like this

package.json :

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "migrate": "deploy",
    "prisma:generate": "prisma generate",
    "lint": "next lint",
    "xml:init:db": "nodemon --watch ./xmlTasks ./xmlTasks/index.js",
    "seed": "prisma db seed"
  },
  "prisma": {
    "seed": "node prisma/seed.js"
  },

My docker:

FROM node:lts-alpine AS builder

# Create app directory
WORKDIR /app

# A wildcard is used to ensure both package.json AND package-lock.json are copied
COPY package*.json ./
COPY prisma ./prisma/


# Install app dependencies
RUN npm install
RUN npx prisma generate


COPY . .

RUN npm run build

FROM node:lts-alpine

WORKDIR /app

COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/prisma ./prisma


# Install Redis
RUN apk add --update redis


# # Stop Redis service
# RUN pkill redis-server && redis-cli shutdown

# Copy Redis configuration file
COPY redis.conf /usr/local/etc/redis/redis.conf  


# Set ownership and permissions for Redis configuration file
RUN chown redis:redis /usr/local/etc/redis/redis.conf

# Set Redis configuration
ENV REDIS_HOST=https://test.opel-arkont-volgograd.ru
ENV REDIS_PORT=6379

ENV NODE_ENV=production



EXPOSE 3000

CMD ["npx", "prisma", "migrate", "deploy", "--preview-feature"]

docker-compose:

#arkont subdomen
  app-arkont:
    container_name: app-arkont
    image: arkont-image
    build:
      context: arkont
      dockerfile: Dockerfile
    restart: always
    environment:
      NODE_ENV: production
    networks:
      - arkont-net
    env_file: 
      - arkont/.env
    ports:
      - 7000:3000
    depends_on:
      - "db-arkont"
    command: sh -c "sleep 13 && npx prisma migrate deploy && npm start"
    links:
      - redis:redis   
    # Выше добавляем ссылку на сервис Redis
  
  #  Redis
  redis:
    container_name: redis
    image: redis:latest
    restart: always
    environment:
      NODE_ENV: production
      REDIS_HOST: test.opel-arkont-volgograd.ru
      REDIS_PORT: 6379 
    ports:
      - 6379:6379
    # command: sh -c "sudo systemctl stop redis && redis-server"
    command: redis-server
    networks:
      - arkont-net
      
  db-arkont:
    container_name: db-arkont
    env_file:
      - arkont/.env
    image: postgres:latest
    restart: always
    volumes:
      - db-arkont-data:/var/lib/postgresql/data
    networks:
      - arkont-net


  #adminer 
  adminer:
    container_name: adminer
    image: adminer
    restart: always
    ports:
      - 8080:8080
    environment:
      - PMA_ARBITRARY=1
    networks:
      - arkont-net


volumes:
  db-arkont-data: {}

networks:
  arkont-net:
    name: arkont-net

[icyJoseph]

In your dockerfile, in the step that copies from builder, you don't copy the next.config.js file, it must be present at dev, build, and start time, therefore you must copy it along.

[Xazgl]

Thank you very much! I'm a fucking idiot, it was so easy and on the surface, and I didn't find it)

[smartdeveler]

For external URL you must add URL to config.next.js and add unoptimized prop to Image tag:

<Image unoptimized {...rest} />

[DabirRahmani]

optimizing and caching the optimized image as webp is the core feature of nextjs image. adding unoptimized to tag is a crime