1

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

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.