I am facing an issue while attempting to run a Next.js app locally inside a Docker container. Everything works fine when I run the container, except for my image files not rendering on the page. Upon inspecting with developer tools, it shows a failed network request for those images without any error code displayed (no 4XX code). The failed request appears like this:
https://i.stack.imgur.com/qSFde.png
Interestingly, when I build with npm run build and run the app locally using npm run start, the same request runs successfully. Similarly, in development mode using npm run dev, it also succeeds.
Below is the section of code utilizing the Next Image module:
import Image from "next/image";<Image
src="/images/computerStation.png"
alt=""
height={300}
width={600}
/>
Here is the directory tree structure for my public folder:
root
│
└───public
│
└───images
│
└───computerStation.png
Based on the success in my local build and development environment, I suspect there might be an issue with my Docker file configuration. I mostly followed the guidelines from the Next.js documentation but adapted it to work with npm instead of yarn. You can view my Dockerfile below:
# Install dependencies only when needed
FROM node:alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN npm run build
# Production image, copy all the files and run next
FROM node:alpine AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next
USER nextjs
EXPOSE 3000
RUN npx next telemetry disable
CMD ["node_modules/.bin/next", "start"]
I would appreciate any assistance on resolving this issue. Thank you!