Ashik Paul
Ashik Paul

Reputation: 504

Next 13.4.1 : Images, Js and Css not loading after build. Shows 404 for all

I'm trying to deploy my next 13 app. I don't see any errors while building. When I try to load the app, only HTML shows up, and it shows 404 error for Js, Css and images(as seen in the network tab).

Its trying to load from _next folder by default (and this path does not exist)
Eg: http://localhost:3000/_next/static/chunks/522-b7eb9fb4e38abfae.js

And images directly
Eg: http://localhost:3000/assets/login.png

Unfortunately I can't post the src code.
I have tried everything. Any help is appreciated.

Folder structure

My-app
|_ public
  |_ assets/
    |_[all my images]
|_ nodemodules
|_ .next
|_ out
|_ src
  |_ app
|_ Dockerfile
|_ next.config.js
|_ package.json

Below are the scripts using

next.config.js

module.exports = {
  basePath: "",
  output: "standalone",
  experimental: {
    appDir: true,
  },
  images: {
    domains: [
      "localhost",
      "localhost:3001",
      "my-exapmle-domain.com",
    ],
  },
};

dockerfile

#Using a different image, below is just an example
FROM node:16_alpine-3.16 AS prebuild

USER root

WORKDIR /app

ARG env 
ENV NODE_ENV=${env}

RUN apk add --no-cache libc6-compat
RUN apk add --update npm

COPY package.json ./
COPY package-lock.json ./
RUN npm i --legacy-peer-deps

COPY . .

RUN npm run build

#Using a different image, below is just an example
FROM node:16_alpine-3.16

USER root

WORKDIR /app

ENV NEXT_TELEMETRY_DISABLED 1
ENV UID=10101
ENV GID=10101

## create & switch to non-root user
RUN apk add shadow
RUN /usr/sbin/groupadd -g ${GID} docker
RUN /usr/sbin/useradd -s /bin/sh -g ${GID} -u ${UID} limsuinext

USER 10101

COPY --from=prebuild /app/next.config.js ./
COPY --from=prebuild /app/package.json ./package.json
COPY --from=prebuild /app/.next ./.next
COPY --from=prebuild /app/node_modules ./node_modules
COPY --from=prebuild /app/public/ ./public


COPY --from=prebuild --chown=10101 /app/.next/standalone ./
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/static
COPY --from=prebuild --chown=10101 /app/.next/static ./.next/standalone/static
COPY --from=prebuild --chown=10101 /app/.next/out ./.next/standalone/out


# Fire up node server
ENV PORT 3001
EXPOSE 3001
# CMD ["node", ".next/standalone/server.js"]  Old approach
CMD ["node", "server.js"]

package.json

name: "my-app",
version: "0.1.0",
private: true,
scripts: {
    "dev": "PORT=3001 npx next dev",
    "build": "npx next build",
    "start": "PORT=3001 next start",
    "lint": "next lint"
},
dependencies: {...},
devDependencies: {...}

Upvotes: 1

Views: 1473

Answers (1)

Ashik Paul
Ashik Paul

Reputation: 504

The Fix is Manually copy the _next folder in dockerfile

For js and css COPY --from=builder --chown=10101 /app/.next ./_next

For images COPY --from=builder --chown=10101 /app/public ./public

Upvotes: 1

Related Questions