Next.js Server Rendered Pages not Working / Static Pages Working

[naregkhodanian]

Question about Next.js

Hello everyone,

I have a Digital Ocean server running with docker containers for my website setup. Everything works perfectly except Server Rendered pages. For some reason, in my local development, it works completely fine but once I put it into docker it gives me a 404 and tries to load from the static folder where it does not exist.

server.js

const next = require('next')
const routes = require('./routes')
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handler = routes.getRequestHandler(app)

// With express
const express = require('express')
app.prepare().then(() => {
    express().use(handler).listen(3000)
})

Dockerfile

FROM node:10-alpine

ENV PORT 3000

# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app

# Install app dependencies
COPY package*.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

RUN npm run build
EXPOSE 3000

CMD [ "npm", "run" "start" ]

docker-compose.yaml

version: "3"

networks:
  web:
    external: true
  internal:
    external: false

services:
  front:
    build: ./frontend
    labels:
      - traefik.backend=frontend
      - traefik.frontend.rule=Host:{my domain name}
      - traefik.docker.network=web
      - traefik.port=3000
    networks:
      - internal
      - web
  api:
    build: ./api
    labels:
      - traefik.backend=api
      - traefik.frontend.rule=Host:api.{my domain name}
      - traefik.docker.network=web
      - traefik.port=8080
    networks:
      - internal
      - web

Getting 502 errors on dynamic pages

[Timer]

Can you please provide a fully reproducing demo? We need to see your application code as well!

[c0b41]

@naregkhodanian this maybe traefik fault, because they relased new version lately and not backward compatibility 1.x, so might be checkout your traefik version

[wouterds]

I believe I'm seeing the same issue. When it's trying to resolve pages with dynamic routing it 404s during prefetch or when you click them. Then it falls back to a hard refresh. Happens both in development mode and in production.

Live demo: https://dynamic-pages-example-k9jroax4n.now.sh
Example repository: https://github.com/wouterds/dynamic-pages-example

[timneutkens]

@wouterds in your case it's this: https://github.com/zeit/next.js#dynamic-routing

<Link href="/post/[pid]" as="/post/abc">
  <a>First Post</a>
</Link>

href -> path in pages dir
as -> path you see in the url bar

[timneutkens]

Regarding the initial issue:

Please follow the issue template.

https://github.com/zeit/next.js/issues/new/choose

https://github.com/zeit/next.js/issues/new?template=8.Question_about_next.md

# Question about Next.js

GitHub Issues are reserved for Bug reports and Feature requests. The best place to get your question answered is to post it on https://spectrum.chat/next-js.

[naregkhodanian]

@timneutkens Should I make a new issue or post here: https://spectrum.chat/next-js

Also thank you everyone for the help I will try a few options suggested above such as maybe running a new version of traefik.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.