Скачать или смотреть How to Deploy Next.js Static Export with Nginx: Fixing Deep Link Issues

Learn how to configure Nginx for your Next.js static export project and resolve issues with direct deep linking to pages without file extensions.
---
This video is based on the question https://stackoverflow.com/q/72405739/ asked by the user 'orszaczky' ( https://stackoverflow.com/u/3009639/ ) and on the answer https://stackoverflow.com/a/72406591/ provided by the user 'Nayan' ( https://stackoverflow.com/u/9871073/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to deploy Next.js static export with Nginx? (deep links not working)

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Deploy Next.js Static Export with Nginx: Fixing Deep Link Issues

If you’ve recently transitioned to using Next.js for your web application and are deploying it using Nginx, you might encounter a situation where deep links (URLs without file extensions) don’t function as expected. In particular, if you have exported your Next.js application to a static site, navigating to direct URLs like myproject.com/privacy returns your main index page instead of the intended privacy page. This guide will guide you through the steps to configure Nginx correctly, allowing your application to serve static files properly, even with clean URLs.

Understanding the Problem

After exporting your Next.js project, your directory structure may look something like this:

[[See Video to Reveal this Text or Code Snippet]]

While your index page works just fine, you face an issue when trying to access the privacy page using the URL myproject.com/privacy. Instead of loading the privacy.html page, the server redirects you to the index.html, causing confusion for users and potentially affecting their experience.

The root of this issue lies in how the Nginx server is set up to handle requests. The configuration attempts to rewrite incoming requests but essential components are missing to correctly direct users to the desired pages when they enter URLs without file extensions.

Proposed Solution

To solve this issue, you need to modify your Nginx configuration file. Specifically, the problem is within the try_files directive in the location block. Here’s how to fix it step-by-step.

Step 1: Access Your Nginx Configuration

First, locate the Nginx configuration file. This could typically be found in /etc/nginx/sites-available/default or in the site-specific configuration file you’ve set up. Open it in your preferred text editor with root privileges.

Step 2: Modify the Location Block

Replace the existing location / block in your configuration with the updated directive. Your modified Nginx configuration should look like this:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Breakdown of the Updated Configuration

try_files $uri $uri.html /$uri /index.html;:

This directive tells Nginx to first attempt to serve the requested URI ($uri).

If that’s not found, it checks for the same name with .html suffix ($uri.html).

If neither matches, it explicitly serves the file based on the URI path as a fallback (/$uri).

If all else fails, it serves the index.html file.

Step 4: Test Your Configuration and Reload Nginx

Once you have made the changes, it is crucial to test your configuration for any syntax errors before applying it:

[[See Video to Reveal this Text or Code Snippet]]

If everything checks out with no errors, reload the Nginx service to apply the new configuration:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With these changes, your Nginx server should now correctly serve static pages for the specified routes, even when accessed without the .html extension. This solution streamlines the user experience by allowing users to access pages cleanly and intuitively. Follow these steps to ensure your Next.js static export works seamlessly with Nginx, thereby improving the usability of your web application.

Feel free to share your experiences or any further questions in the comments below! Happy deploying!