next/image doesn't load on production

285 Views Asked by At

I'm using next/image as follows:

import image from "@public/images/image.png";

...

<Image className="hidden dark:block" src={image} alt="image" height={32} priority />

And this works fine locally, however it doesn't work on production and I can't figure out why. I have sharp installed and there are no errors being reported except that NGINX times out. It just keeps loading https://domain.tld/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage.92ffd75f.png&w=256&q=75. Even if I directly query the containter bypassing NGINX it will just load forever, as it has been loading for 5+ minutes now. Other info:

Next config:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "standalone",
    reactStrictMode: true,
    swcMinify: true,
    images: {
        domains: ["xxx"],
    },
};

module.exports = nextConfig;

Deployement is done using docker:

FROM node:18.15-alpine AS base

FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json* ./
RUN \
  if [ -f package-lock.json ]; then npm ci; \
  else echo "Lockfile not found." && exit 1; \
  fi

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npx prisma generate
RUN npm run build

FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nodejs /app/.env ./.env

RUN mkdir -p /data
RUN chown -R nextjs:nodejs /data
RUN chmod -R 755 /data

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["node", "server.js"]

I've fixed it for now by changing the image from a static image to a dynamic image. This somehow fixed the problem. If anyone knows an actual solution, please let me know. https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

0

There are 0 best solutions below