How to deploy Next.js app with nginx to subpath? - nginx

Question

My goal
I would like to deploy my Next.js app with nginx to subpath.
My setting is the following:
Nginx config
location /subpath/ {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://localhost:3030/;
}
next.config.js
module.exports = {
basePath: '/subpath'
}
Trouble
This next.config.js causes mydomain.com/subpath/ to 404.
Otherwise, mydomain.com/subpath/subpath displayed the page. ><
(all other pages also needed /subpath/subpath/xxx)
(Every link href leads to 404, so I confirmed pages by typing /subpath/subpath/ in address bar.)
Other info
The version of next.js is 10.0.4
How can I solve this?
I'm pleased to be provided with the knowledge of deploying next.js app to subpath.
Simplest way is better.
I will appreciate any advice. Thanks in advance.

Answer 1

According to the configurations the problem here is with the trailing slash,
location /subpath/ {
proxy_pass http://localhost:3030/;
}
change it to this,
location /subpath {
proxy_pass http://localhost:3030;
}
and the complete config will be looks like this,
location /subpath {
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://localhost:3030;
}
The reason behind is By default Next.js will redirect urls with trailing slashes to their counterpart without a trailing slash. according to the docs
But you've mentioned in the Nginx config that your url should have trailing slash. then it will return 404.