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