Next.js change directly from url not working

Question

Next.js version 10.0.6 - Node version 12.18.4 - Linux 18.04

On my server, I am trying to change the URL directly to the about page (by typing to URL - not by clicking the links) but it gives me a 502 bad gateway. Any copy-paste to URL not working. Only in my navbar can navigate to the about page when I click the link "about".

Example:

www.example.com/about

That action in development mode on my PC works perfectly fine. The problem is with my server.

My steps of deploy:

package.json file:

"scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },

npm run build

I took all files from the "out" folder and put them on my server.

nginx conf file:

server {
    listen myip:80 default_server;
    listen [::]:80 default_server;
    server_name example.com www.example.com;

location / {
 proxy_pass http://localhost: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 ~ /.well-known {
  allow all;
}

 location ~* "/\.(htaccess|htpasswd)$" {
        deny    all;
        return  404;
    }

    location /vstats/ {
        alias   /home/admin/web/example.com/stats/;
        include /home/admin/conf/web/example.com.auth*;
    }

    include     /etc/nginx/conf.d/phpmyadmin.inc*;
    include     /etc/nginx/conf.d/phppgadmin.inc*;
    include     /etc/nginx/conf.d/webmail.inc*;

    include     /home/admin/conf/web/nginx.example.com.conf*;
}

I restart the service of Nginx and start pm2.

sudo service nginx restart

pm2 start npm --name "next" -- start

What I do possible wrong? Is my configuration correct?

If do you need any additional information, please do not hesitate to ask me.

Answer 1

You can add trailingSlash: true to your next.config.js so that /about can route to the HTML file. This was the default behaviour prior to Next.js 9 but now needs to be enabled explicitly.

// next.config.js

module.exports = {
    trailingSlash: true
}