Report this

What is the reason for this report?

Any Next.js page reloading redirects to home page

Posted on November 15, 2020

Hello! I am working with Next.js applications now. In the dev version on my localhost, I can reload any page and the page stays on the same URL. But when I deploy it to a domain in plesk panel integrated with Digitalocean CentOS server, then the application’s pages do not stay the same after reloading, it always goes back to the homepage. I can not hit any page by specific page Url, it also redirects to the home page application. Is there any solution from the Digitalocean server configuration? I tried so many ways as trailingSlash enabled and so many things but it does not work. On the other hand, when I deploy it to the Vercel platform, it works as expected way. I want to stay on the Digitalocean server. Are there any solutions to this? Thanks in advance.



This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Heya,

Just came across this answer and decided to write some general guidelines for anyone who comes across this in the future despite the old question.

With a single page application (like a Next.js app), all routing is generally handled client side, meaning you always serve up the same HTML file regardless of the path, and your JavaScript takes care of rendering the correct page content. It seems like your server might be trying to find a specific file for each path, which is why it defaults back to the homepage.

I recommend checking your server configuration and ensuring it’s set up to support client-side routing. You’ll want to set it up to fallback to index.html for all routes. How you do this would depend on your web server setup. Here are guides for NGINX and Apache web servers:

For NGINX: how to configure NGINX for client-side routing.

For Apache: how to configure Apache for client-side routing.

Once you’ve made these changes and redeployed your application, it should behave as expected.

Hope that this helps!

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.