Next JS Export to static HTML always redirect to home page “/” if page refresh #10522
Replies: 47 comments 62 replies
-
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! |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
In my case I use nginx local server or use this package https://www.npmjs.com/package/serve |
Beta Was this translation helpful? Give feedback.
-
Hmm, are you hosting the 'out' folder that contains the exported site? |
Beta Was this translation helpful? Give feedback.
-
I think, yes. I've found this problem since November 2019 and there is no cure for this yet! |
Beta Was this translation helpful? Give feedback.
-
This is sad. I am currently implementing server side rendering using this package and upload it to the server specifically Aws Amplify. |
Beta Was this translation helpful? Give feedback.
-
Does this mean we really need to use |
Beta Was this translation helpful? Give feedback.
-
Sounds like a wrong AWS Amplify configuration. You can put |
Beta Was this translation helpful? Give feedback.
-
@timneutkens I put |
Beta Was this translation helpful? Give feedback.
-
@alfanzain sounds like a wrong apache config where |
Beta Was this translation helpful? Give feedback.
-
@timneutkens Did you try to reproduce it? Even if you followed the deployment documentation this issue will come up. |
Beta Was this translation helpful? Give feedback.
-
You are not tied to Now to host. I am running Next JS on Netlify. |
Beta Was this translation helpful? Give feedback.
-
@AmericanWebbery How did you deploy? Are you using the static html deployment? Can you give us some steps? |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
@timneutkens I don't know. |
Beta Was this translation helpful? Give feedback.
-
The problem is in the nginx implementation, I had this solution
and changed with
As the export command generates html pages, you need to set nginx to check for them adding |
Beta Was this translation helpful? Give feedback.
-
I got simple solution but might not be very found of the source of the problem
my htaccess:
|
Beta Was this translation helpful? Give feedback.
-
The reason why an SPA pointing at I have for example A simple app with client side routing needs to handle 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?
|
Beta Was this translation helpful? Give feedback.
-
I don't understand how to serve the static export when using dynamic pages. For example, 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. |
Beta Was this translation helpful? Give feedback.
-
This is my solution when using nginx to support static export with dynamic routes.
This will support CRUD style routes for resources. |
Beta Was this translation helpful? Give feedback.
-
it not work |
Beta Was this translation helpful? Give feedback.
-
My workable solution for apache. May be it would help someone. Settings for .htaccess:
App built with static export command next build && next export. Next config without exportTrailingSlash (exportTrailing) option |
Beta Was this translation helpful? Give feedback.
-
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
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:
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 I used this approach since my account activation link which was on a dynamic link could not load, so |
Beta Was this translation helpful? Give feedback.
-
This is what I have done for dynamic urls work on nginx without trailing slash:
|
Beta Was this translation helpful? Give feedback.
-
Same issue here. 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 "/"). |
Beta Was this translation helpful? Give feedback.
-
If your gonna build static website, i would suggest to use VITE JS. |
Beta Was this translation helpful? Give feedback.
-
Use trailing slashes to true in nextjs config (Nextjs version 13) |
Beta Was this translation helpful? Give feedback.
-
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. https://repost.aws/knowledge-center/cloudfront-serve-static-website |
Beta Was this translation helpful? Give feedback.
-
Facing the same issue when deploying in aws amplify... Any idea how to resolve? |
Beta Was this translation helpful? Give feedback.
-
nahi bhai nahi chahiye
…On Sat, Jun 8, 2024 at 1:37 AM pascalloria ***@***.***> wrote:
Thanks you help me a lot :)
—
Reply to this email directly, view it on GitHub
<#10522 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AUZTUX64RUJFD5QXGGN6VYLZGIKX7AVCNFSM4OJKQFRKU5DIOJSWCZC7NNSXTOKENFZWG5LTONUW63SDN5WW2ZLOOQ5TSNZQG4ZDKMI>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
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 ityarn build
and export into static HTMLyarn 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:
Follow this tutorial https://nextjs.org/learn/basics/deploying-a-nextjs-app. But use the "Deploying to Your Own Environment" steps
Test it on development mode
yarn dev
and visit the links and refresh each page. It will not redirect to/
page.Build it
next build
Export it
next export
Upload it into your own server in my case I use nginx local server or use this package https://www.npmjs.com/package/serve
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
Beta Was this translation helpful? Give feedback.
All reactions