How to deploy nextjs into a directory which is not a root directory

Question

Recently I learn something about nextjs because I want to make a site which SEO friendly by using React. Everything looks great until I ran into a problem.

It's about how can I deploy nextjs app into a directory which is not a root directory, for example '/next'. I use a simple config for nextjs, use the default node server listen to 3000 port and then use nginx for reverse.

next.config looks like :

nginx conf :

When I access localhost:8080/next I got the 404 page which is provided by nextjs and the css or js is also 404. It seems like the config of nextjs or nginx is wrong.

Answer 1

Your current config tells nginx to map urls 1-to-1, that means that /next/what-ever will be mapped to http://localhost:3000/next/what-ever.

To solve this you need to add an additional slash.

server {
  ...
  location /next/ {
    proxy_pass http://localhost:3000/ // <----  this last slash tells to drop the prefix
  }
}

For more info read https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/#passing-a-request-to-a-proxied-server