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

[Ashikpaul]

Summary

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.

Additional information

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: {...}

[icyJoseph]

How do you start the server?

[Ashikpaul]

Locally I don't need these but the server in prod uses the dockerfile (which is failing). Hence I am trying to mock this failure using the commands I mentioned in the below link.

#49803 (reply in thread)

The reason why its showing 404 error in the network tab is because that path doesn't exist (this is what i think, may be i am wrong). I couldn't find a similar settings in anybody's setup. I don't know what to do.

I read that next automatically created _next folder. If this was true all the files should have been there, which i don't see it.

My only goal is to run Next 13 setup using Dockerfile (prod setup). Maybe my approach is wrong.

[icyJoseph]

I understand why the 404's but I just couldn't follow how you deploy the app.

Ok, so the production environment builds the docker file and runs the resulting image. And even though it does that, the static files are unreachable. Correct?

[Ashikpaul]

Exactly. Sorry I didn't make it clear

[icyJoseph]

Just one more question, the screenshot you showed, why does it say localhost? Is it a screenshot taken locally?

[Ashikpaul]

Yes. Its the same error in prod with a different host

[Ashikpaul]

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

Thank you @icyJoseph

[khal3d]

@Ashikpaul I have a similar issue. Any luck figuring out what's causing it?

[abhinavgurung]

@khal3d Hello I have similar issue. Mine is deployed in aks. did you find the solution?

[Ashikpaul]

@khal3d, @abhinavgurung

FROM PATH_TO_YOUR_NODE_IMAGE AS prebuild

USER root

WORKDIR /app

ARG env 
ENV NODE_ENV=dev

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

COPY ./MY_PROJECT .


RUN npm i --legacy-peer-deps

WORKDIR /app

RUN npm run build

/*Prepare Final Deployable Artifact*/

FROM PATH_TO_YOUR_NODE_IMAGE 

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} MY_PROJECT

USER 10101

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/.next/static
COPY --from=prebuild --chown=10101 /app/public ./
COPY --from=prebuild --chown=10101 /app/public ./public
COPY --from=prebuild --chown=10101 /app/.next/server ./.next/standalone/server
COPY --from=prebuild --chown=10101 /app/.next/cache ./.next/standalone/cache
COPY --from=prebuild --chown=10101 /app/.next/static ./_next/static
COPY --from=prebuild --chown=10101 /app/.next ./_next


/* Fire up node server */
ENV PORT 3000
EXPOSE 3000
CMD ["node", "server.js"]

This is the one that works for me.
Hope this helps

[dbain-texada]

I'm wondering how this changes at all if I am setting basePath: '/docs', for instance in my next.config.mjs file? Seems like everything works as expected running npm run dev (next dev -p 3002), however, after building DockerFile image it seems the basePath is ignored and I can only access localhost:3002 and all my static files http://localhost:3002/docs/_next/static/chunks/XXXXXXXXX etc. return 404?

[plamabo]

hey dbain, that's interesting we are at the same point now a week later. Did you have any additional insights?
thanks :)
matthias

[gilbertlucas46]

I had update next config to

const nextConfig = {
distDir: '_next',
}

locally it works fine but when I deployed in production the build files is in _next folder instead of .next