Next JS Export to static HTML always redirect to home page “/” if page refresh

[yvescoinpass]

Bug report

Describe the bug

I am creating a blogging application using Next JS and React. I already understand the basics because of this tutorial https://nextjs.org/learn/basics/getting-started.

So I tried to implement the blogging application. When I try to test it in development mode yarn dev the routing are fine. But if I build it yarn build and export into static HTML yarn export. The routing misses up when I click on the link it goes on the right page but when I refresh the browser it always takes me back to the / page.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Follow this tutorial https://nextjs.org/learn/basics/deploying-a-nextjs-app. But use the "Deploying to Your Own Environment" steps

2. Test it on development mode yarn dev and visit the links and refresh each page. It will not redirect to / page.

3. Build it next build

4. Export it next export

5. Upload it into your own server in my case I use nginx local server or use this package https://www.npmjs.com/package/serve

6. Visit the links and refresh each page. It will always redirect to / page.

Expected behavior

It should not go back to the / page when user refresh the page eg. pressing F5 on the browser rather stays on the current page and load the current data of the page.

System information

• OS: Debian 9 Linux
• Browser: Goog Chrome
• Version of Next.js: "next": "^9.2.1",

[wulei7528]

I found the same problem like you！I tried to modify next.config.js by add exportPathMap,but generate ***.html instead of ***/index.html like the document！

[will0225]

I am facing the same issue now
Any help?

[nishaaanth2]

trailingSlash: true,

add it in next.config.js

[lojithv]

@nishaaanth2 Thanks a lot :)

[krishnajhapate]

In my case not working

[hermescortesm]

Thanks it works for me :D

[AmericanWebbery]

Are you trying to run this on something like Apache? If so, I believe you have to make a tweak in your .htaccess file.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

[will0225]

I tried with .htaccess
But No luck

[shashwat-kalpvaig]

@will0225 you can try my example I have tested it with cPanel, maybe that's the solution you are looking for.

[will0225]

where can I try with your sample?

[will0225]

I mean, where is your example?

[cervmi]

You have to setup eportPathMap. Then it works: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap

[yvescoinpass]

In my case I use nginx local server or use this package https://www.npmjs.com/package/serve

[AmericanWebbery]

In my case I use nginx local server or use this package https://www.npmjs.com/package/serve

Hmm, are you hosting the 'out' folder that contains the exported site?

[MannanAnxari]

yes

[alfanzain]

In my case I use nginx local server or use this package https://www.npmjs.com/package/serve

Hmm, are you hosting the 'out' folder that contains the exported site?

I think, yes. I've found this problem since November 2019 and there is no cure for this yet!

[yvescoinpass]

This is sad. I am currently implementing server side rendering using this package and upload it to the server specifically Aws Amplify.

[yvescoinpass]

Does this mean we really need to use now setup and Zeit hosting to use Next JS?

[xessam]

hmm

[timneutkens]

Sounds like a wrong AWS Amplify configuration. You can put next export output on any static file server really.

[OmarZeidan]

I don't completely agree unless I am doing something wrong @timneutkens

I ran next export, deployed to S3 bucket .. but whenever you refresh on a page it gives a 404.
I fixed the 404 error by falling back to index.html but still that is not helping.

Any thoughts?

btw, just for the records
its working perfectly find on my local out folder running ❯ python -m SimpleHTTPServer but not the crazy S3 bucket :(

[jonasgroendahl]

Did you solve this problem for s3?

[shorn]

I am currently investigating hosting a Next.js site on S3 served via Cloudfront.
This answer here might help: https://stackoverflow.com/a/63609112/924597

Please note that I am very new to Next.js - the linked answer might be the wrong way to do things.

[alfanzain]

@timneutkens I put next export output on apache server and I can't access [deleted url]
I must go to the homepage then click the card to open it.

[alfanzain]

Sorry, already kicked from company and the project was abandoned.
And still no solution for that.
I am avoiding NextJS since that.
Disclaimer: NextJS is amazing. But gave me trauma on the past. So, maybe next time.

[icyJoseph]

You know, Apache must be told how to see the files. Normally people fix this with trailing slashes. Otherwise you gotta tell Apache to resolve /mypath to /mypath.html.

If you use trailing slashes, then next.js creates actual folders with /mypath/index.html. Trailing slashes also means that your app links must use trailing slashes, even the next/link ones.

[daniel-tarsoly]

You know, Apache must be told how to see the files. Normally people fix this with trailing slashes. Otherwise you gotta tell Apache to resolve /mypath to /mypath.html.

If you use trailing slashes, then next.js creates actual folders with /mypath/index.html. Trailing slashes also means that your app links must use trailing slashes, even the next/link ones.

That was indeed the problem in my case!
This one-liner fixed the issue for me: https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

[MannanAnxari]

Sorry, already kicked from company and the project was abandoned. And still no solution for that. I am avoiding NextJS since that. Disclaimer: NextJS is amazing. But gave me trauma on the past. So, maybe next time.

bro create a .htaccess file and put this code :

[MannanAnxari]

Sorry, already kicked from company and the project was abandoned. And still no solution for that. I am avoiding NextJS since that. Disclaimer: NextJS is amazing. But gave me trauma on the past. So, maybe next time.

bro create a .htaccess file and put this code :

RewriteEngine On
RewriteRule ^([^/]+)/$ $1.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.html
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

i have a same issue and at the end i solved this and after creating .htaccess made some changes in next.config

my next.config look like that:

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
trailingSlash: true,
images: {
unoptimized: true
},

exportPathMap: async function (
defaultPathMap,
{ dev, dir, outDir, distDir, buildId }
) {
return {
'/': { page: '/' },
'/about': { page: '/about' },
}
},
}

module.exports = nextConfig

[timneutkens]

@alfanzain sounds like a wrong apache config where .html files are not served?

[yvescoinpass]

@timneutkens Did you try to reproduce it? Even if you followed the deployment documentation this issue will come up.

[AmericanWebbery]

You are not tied to Now to host. I am running Next JS on Netlify.

[muhammadsoleh77]

because netlify deploy using npm run build, not export. But if I deploying with npm run export. this issue still work always redirect to home page.

I have same problem with this... anyone can help?

[yvescoinpass]

@AmericanWebbery How did you deploy? Are you using the static html deployment? Can you give us some steps?

[AmericanWebbery]

Using Netlify I have it do auto deploys from a private Github repo (it's one of the default options). I just had to set the build script for it to use and anytime I do a push to the repo, Netlify will deploy as well. I'm pretty sure it is still just hosting the "out" folder that nextjs produces when you npm run build or yarn build. I'm going to try running a Nextjs site on a static host soon and see if I get similar results to what you see.

[alfanzain]

@timneutkens I don't know.

[cervmi]

You have to first setup ExportPathMap
https://nextjs.org/docs/api-reference/next.config.js/exportPathMap

And setup apache server to serve path e.g. /abc/xxx as /abc/xxx.html

[micheledisalvatore]

The problem is in the nginx implementation, I had this solution

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

and changed with

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

As the export command generates html pages, you need to set nginx to check for them adding $uri.html as the page /foo will be point to /foo.html

[phucnd81]

worked for me. Thanks so much

[ghost]

I owe you a beer :-)

[rburchDev]

Life saver!

[rahilk82]

This also worked out for me. But I have used the Caddy Web Server instead of Nginx. I will add the Caddyfile config here.

:8080 {

handle * {
    root * /var/www/home
    try_files {path}.html {path}
    file_server
}

}

By default, the try_files will be set as below but if you face this refresh issue, then implement the above change.:

:8080 {

handle * {
    root * /var/www/home
    try_files {path} /index.html
    file_server
}

}

[luochyi]

thx

[aXlireza]

I got simple solution but might not be very found of the source of the problem
Since my app redirect to index.js in every refresh, with the URL staying the same as before refresh but the route is actually being changed
I implemented this redirect if the route and address bar don't match

import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function Home() {
  const router = useRouter();
  useEffect(() => {
    if (window.location.pathname != router.pathname) {
      router.push(`/${window.location.pathname}`)
    }
  }, [])
.
.
.

my htaccess:

<IfModule mod_rewrite.c>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
</IfModule>

[icyJoseph]

Hi,

This can't be right. Could you please activate preserve logs on Chrome Dev Tools Console, and refresh the page? What do you see?

If I understand correctly, when your app is at /a/b/c, a refresh takes you back to /, but the url remains at /a/b/c?

[aXlireza]

yup that's exactly what's going on

[NoahGrayDL]

This solution is working well for me.
I'm using next export and AWS S3, CloudFront, and all the pages are wrapped with a DefaultLayout.
and this useEffect part on the DefaultLayout.
But this line router.push(`/${window.location.pathname}`) no needs slash at the first on my case because window.location.pathname already has it.

[PoyrazTahan]

"""
If I understand correctly, when your app is at /a/b/c, a refresh takes you back to /, but the url remains at /a/b/c?
"""

I have this problem on next js export serving from an s3 bucket staticly

[icyJoseph]

The reason why an SPA pointing at /a/b/c would go back to / on reload/refresh has to with how the server is handling requests to that page.

I have for example next export countless apps to one.com and surge.sh without any config what so ever...

A simple app with client side routing needs to handle 404's as 200's and let the client side router handle the not found case.

From reading most of the questions above, I think it is fair to say that this ought to be a server configuration issue.

Alternatively, it might be that some other party is messing with the history object? race conditions, or bad business logic?

Could anyone having this issue share a site that has it? or repo? logs from the server receiving the request?

next export is sort of headless, as in, there's no server, it's just a bunch of html and javascript files that you could put anywhere, and it should just work.

[deej919]

I have deployed my application of nextjs on apache and facing this same issue? What to do? Please suggest

[jroitgrund]

I don't understand how to serve the static export when using dynamic pages. For example, pages/users/[user].js will generate out/users/[user].html (or out/users/[user]/index.html) if you've configured trailingSlash: true).

Given this folder structure, are there any web servers which will serve the right HTML file for requests to URLs like "/users/1/"? I guess it's not an easy problem to solve but it's not clear from the docs that this use case requires custom config on the server.

[aXlireza]

The users/[user].js will work as (users/steven.html, users/john.html) based on the getStaticPaths which declare all the possible usernames to replace as the [user] placeholder

I have working with something a bit more complex to have two dynamic parts on the same url

[jroitgrund]

I want the routes to stay dynamic in the static export. I only just realized that this isn't supported - it's not listed under unsupported features, although the supported features section does specify that dynamic routes only work when defining getStaticPaths.

I'll raise a separate feature request.

[icyJoseph]

In the absence of a server and with critical secrets, possible usage of NodeJS API's incompatible with the browser, then such a thing under export becomes rather non-trivial. You may have to hack something on 404 or something like that...

[nikenvy]

just switch from dynamic routes like [id] to query params

[phegman]

This is my solution when using nginx to support static export with dynamic routes.

server {
    server_name your-domain.com;
    root /var/www/your-domain.com/out;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html;

    error_page 404 /404/index.html;

    charset utf-8;

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

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

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

This will support CRUD style routes for resources. resource/1/ and resource/1/edit/

[vahidalvandi]

it not work

[madbonez]

My workable solution for apache. May be it would help someone. Settings for .htaccess:

<IfModule mod_rewrite.c>
    Options +FollowSymLinks -MultiViews

    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^(.*)/$ $1.html

    RewriteCond %{REQUEST_FILENAME}.html -f
    RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.html -f
    RewriteRule ^(.*)$ $1.html [NC,L]

    # Protect some contents
    RewriteRule ^.*/?\.git+ - [F,L]

    RewriteCond %{ENV:HTTPS} !on
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>

App built with static export command next build && next export. Next config without exportTrailingSlash (exportTrailing) option

[dalmasonto]

Since the problem comes with dynamic routes and after you have exported your Next app ie if you have a dynamic page in your pages pages/blogs/[blog_id].tsx if you navigated to this page using the Link like you clicked on a link on a page and it opened it, it could work well. But if you refresh the dynamic route, it will show the homepage file, that is index.html.
This is problematic since if you share a blog link, it could not show the blog itself but rather the homepage.
Navigation to the homepage is caused by .htaccess settings that are like this:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-l
    RewriteRule . /index.html [L]
</IfModule>

This settings are critical in your cPanel domain folder to avoid encountering 500 Error if you reload a certain page for you SPA like React js export and next js exported.

So working around this one was a bit messy since .htaccess ended up having a lot of redirects. I took a simple path to solve this error but it is not worth it as it may kill the whole idea of next js being SEO friendly.

The resolve I used was to redirect to the right page on page load(that is refresh) from the home page. As shown below:

function HomePage(props: any) {
  const router = useRouter()

  useEffect(() => {
    console.log("path: ", router.asPath)
    if(router.asPath !== "/"){
      router.push(router.asPath, router.asPath)
    }
  }, [])
  return (
    <>
      <FeaturedListingsSection />
      <Welcome />
    </>
  );
}

HomePage.PageLayout = AppWrapper

The above component is the component for my index page in my Next Js project. So I pushed the right path if the path does not match the home path /. So if the router path is not the home path, just push to the home path.
My approach is for a quick solve since I have not tested the SEO implication of the same but definitely its going to affect bots crawling my page.

I used this approach since my account activation link which was on a dynamic link could not load, so router.push('component/path') to the component solved it.

[joaodfmota]

This is what I have done for dynamic urls work on nginx without trailing slash:

/post/slug

        location ~ ^/((?!_next).*)/(.+?)(?:/)?$ {
            try_files /$1/[...id].html $uri $uri.html $uri/ =404;
        }
        
        location / {
          try_files $uri $uri.html $uri/ =404;
          add_header Cache-Control "no-cache";
        }

[ikedam]

Same issue here.
#10522 (comment) worked for me.

The title of this thread is misleading. The browser url is not "/" but home page for "/" is rendered. I believe you don't mean redirect (which means browser url is changed to "/").
Please consider updating the title if you could.

[nishaaanth2]

If your gonna build static website, i would suggest to use VITE JS.
NEXT JS is build mainly for Dynamic Website

[jmonster]

Random anecdote, but I'm building a static app, and I ported it from Next to Vite, and my payload went from 400kB to 1.6MB. So. I'm with you in spirit... but sticking with the tool that properly prunes the dependency graph

[hadiswaleh]

Use trailing slashes to true in nextjs config (Nextjs version 13)

[nicholaschun]

To use static pages for nextjs using s3/cloudfront, you need enable website hosting on the s3 bucket. Copy the Bucket website endpoint and paste that as the cloudfront origin. NOTE: you will have to make the s3 bucket public for this to work. Optionally, you can use a header referrer to restrict access to the s3 bucket.
Follow this documentation to see how you can host a static website with bucket endpoints. I hope this helps someone.. It took me a couple of hours to figure out

https://stackoverflow.com/questions/63591544/next-js-how-to-make-links-work-with-exported-sites-when-hosted-on-aws-cloudfron/63609112#63609112

https://repost.aws/knowledge-center/cloudfront-serve-static-website

[adhsafal]

Facing the same issue when deploying in aws amplify... Any idea how to resolve?