Serve dynamic routes with nginx in a NextJS application

  docker, next.js, nginx, reactjs

I use nginx as my static file server for my NextJS application, in order to test it in dev environment. My application follows a pattern in which I have, normaly, the following routes:

someRoute/
    index.tsx
    register.tsx
    [id].tsx

My nginx.conf file has the following content:

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        try_files $uri $uri/ /index.html /register.html;
    }
}

What is happening is that, when I create a docker image of the application using nginx, if i try to access someRoute/register or someRoute/123, I always get the localhost/index page. someRoute/index works fine, but the other two don’t.

My guess is that when I try to navigate to someRoute/123 nginx expects to find 123.html inside $uri/, which of course won’t happen, since it is a dynamic route. As per register.html, I really don’t know what’s wrong.

How do I get someRoute/register and someRoute/[id] working?

Source: Docker Questions

LEAVE A COMMENT