Next.js Discord

Discord Forum

404 page in Next.js & Nginx & Docker compose

Answered
Egyptian Mau posted this in #help-forum
Open in Discord
Egyptian MauOP
Hello, I need help for deploying my Next.js app with Nginx and Docker compose, here is the nginx config:
server {
  # ...
  location /app {
      proxy_pass http://frontend:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
  }
  
  location / {
    # Django app which works perfectly
  }
}

Dockerfile:
FROM node:18-alpine
WORKDIR /app
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN yarn --frozen-lockfile
COPY app ./app
COPY public ./public
COPY next.config.js .
COPY tsconfig.json .
RUN yarn build
CMD yarn start


docker-compose.yml:
# ...
services:
  # ...
  frontend:
   container_name: frontend
   build:
     context: ./frontend
     dockerfile: Dockerfile
   restart: always
   ports:
     - 3000


I am getting a 404 page
The Next.js app works in local with yarn build & yarn start, but doesn't with nginx I've tried many solutions and still getting 404 page when I do domain.com/app/*
Answered by Egyptian Mau
I've found the solution, it's written in the docs, I have to app the baseName in the src for images, and there are served.
View full answer

23 Replies

European sprat
Where does nginx come into play here? I don't see it referenced in the dockerfile or compose file
Egyptian MauOP
Yeah, I didn't show it for shortening because it works, but here it is:
services:
 nginx:
   build: ./nginx
   ports:
     - 80:80
     - 443:443
   depends_on:
     - api
   restart: "on-failure"
   volumes:
     - static_volume:/home/app/staticfiles
     - media_volume:/home/app/mediafiles
     - certbot_etc:/etc/letsencrypt
     - certbot_var:/var/lib/letsencrypt
     - ./nginx:/var/www/certbot
Nginx works because the Django app is running successfully in example.com/, for Next js (example.com/app) I am still getting a 404 page
European sprat
Have you tried adding the basePath next config option for "/app"
You may also need to change the proxy path in nginx to point there
Egyptian MauOP
How to change the proxy path?
Please?
I am now trying to chang ethe basePath, I am rebuilding.
After doing this, I am getting this 502 error when I request /app:
[error] 21#21: *105 connect() failed (113: Host is unreachable) while connecting to upstream, client: XXX.XXX.XXX.XX, server: example.com, request: "GET /app HTTP/1.1", upstream: "http://XXX.XX.X.X:3000/app", host: "example.com"
Egyptian MauOP
Now it works after I've added this:
proxy_pass http://frontend:3000/app;
But static files like images are not showing, please help solve this, I really appreciate your help, what should I add in the nginx conf for the static files to show up?
European sprat
What does the network request show for the static files? 404? What path does it show? Does it include the basePath?
Egyptian MauOP
I've found the solution, it's written in the docs, I have to app the baseName in the src for images, and there are served.
Answer
Egyptian MauOP
Last problem, is that I am using dynamic routes /posts/[id] in App Router
When I request example.com/app/posts/[id], I get this:
Application error: a client-side exception has occurred (see the browser console for more information).

When I see the console I get this:
webpack-d538654abc483c68.js:1     GET https://example.com/app/_next/static/chunks/app/posts/%5Bid%5D/page-9d8fc14e4d9c523d.js net::ERR_ABORTED 404 (Not Found)
What's the problem please? I have no idea.
and this message in the console as well with dynamic routes:
596-eed84b36917eaabb.js:1 ChunkLoadError: Loading chunk 626 failed.
(error: https://example.com/app/_next/static/chunks/app/posts/%5Bid%5D/page-9d8fc14e4d9c523d.js)
Note that I am not using generateStaticParams() because the content is from an API or DB
European sprat
I don't know. Make sure your next.config.js file has the basePath set properly
Egyptian MauOP
Downgrading to v13.4.12 fixed the issue, more details here: https://github.com/vercel/next.js/issues/54008
@Egyptian Mau Downgrading to `v13.4.12` fixed the issue, more details here: https://github.com/vercel/next.js/issues/54008
European sprat
Have you tried setting ENV HOSTNAME "0.0.0.0"
The issue might be related to that. It caused a bunch of problems for me on lower versions