CODEWITHSUNDEEP
nginxnext.js
orszaczky
orszaczky

Reputation: 15665

How to deploy Next.js static export with Nginx? (deep links not working)

I made a next.js export into the out folder.

Folder structure is:

I set up nginx to serve files from this folder:

server {
    root /var/www/myproject/out;
    index index.html index.htm index.nginx-debian.html;

    server_name myproject.com;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

The main page (index) opens fine. Navigation from within the app to urls like myproject.com/privacy works fine. The problem is if I try to open these links directly, it will serve the main page (index) instead of the actual pages, since those urls don't exist in the folder. The only way to open the privacy page directly is adding the html extension to the url: myproject.com/privacy.html.

How to configure nginx to serve the actual page myproject.com/privacy.html when someone enters the myproject.com/privacy url?

Upvotes: 9

Views: 10611

Answers (4)

Sanjeeb Kumar
Sanjeeb Kumar

Reputation: 1

You can have following modification to make properly working.

next.config.js

const nextConfig = {
  reactStrictMode: false,
  output: 'export',
  images: {
    unoptimized: true
  },
  trailingSlash: false // optional, make false (Condition 1) or true (Condition 2)
};

Condition 2: Trailing Slash = true (default) If trailingSlash is set to true, every URL will end with a trailing slash (e.g., /about/).

location / {
    root   /usr/share/nginx/html;
    index  index.html;
    try_files $uri $uri/ /index.html;
}

Condition 1: Trailing Slash = false If trailingSlash is set to false, URLs will not have trailing slashes (e.g., /about). This requires more complex handling in Nginx.

Nginx Configuration for Condition 1: Option 1

location / {
    try_files $uri $uri.html $uri/ =404;
}

# Manually add rules for specific paths like /news/
location /news/ {
    rewrite ^/news/(.*)$ /news/$1.html break;
}

Nginx Configuration for Condition 1: Option 2 (Automatically Remove Trailing Slash)

location / {
    root /usr/share/nginx/html;
    index index.html;

    # Redirect requests with a trailing slash to the version without it
    if ($request_uri ~* "/(.+)/$") {
        return 301 /$1;
    }

    # Try the exact URI, then .html, then index.html for SPA routing
    try_files $uri $uri.html /index.html;
}

Upvotes: 0

Saikat Roy
Saikat Roy

Reputation: 523

I tried this configuration and it works like charm.

server_name example.com;

root /var/www/example.com/;
index index.html;

location / {
    try_files $uri $uri.html /$uri $uri/ /404.html =404;
}

location ~ ^/[^/]+\.html$ {
    try_files $uri $uri/ /index.html;
}

Upvotes: 0

Ron Newcomb
Ron Newcomb

Reputation: 3302

I needed a 2nd location block because of the way NextJS does ids in the url. NextJS will have files like [id].html or whatever.

    location / {
        try_files $uri $uri.html /$uri /index.html;
    }

    location ~* /(.*)/(\d+)$ {
        try_files $1/[id].html /$1/[id].html /index.html;
    }

So I needed the 2nd block to catch urls of the form /whatever/etc/5 and redirect nginx to /whatever/etc/[id].html

Upvotes: 8

Nayan
Nayan

Reputation: 651

Issue is in try_files.

As current configuration includes:

  • / (which default route to index.html at root path)
  • index.html
  • /index.html
  • test/*.html

To access pages route path name without extension i.e., /privacy that format should be included in try_files insdie location /

Try this:

try_files $uri $uri.html /$uri /index.html

Upvotes: 18

Related Questions