javascript - Exporting static html with next.js not working properly - Stack Overflow

admin管理员组

文章数量:1388234

I created a project and want to export it to the static html. I used this mand in package.json build" : "next build && next export

After that I run this mand to the terminal npm run build. And finally It's give me an out folder.

The problem is, When I try to access html files from out folder, it's showing only html content, without any CSS and js files. I tried many times but It's not working. If anyone help me to get rid of this problem I'll be very very thankful to him.

React errors 418 and 423 are:

Hydration failed because the initial UI does not match what was rendered on the server.

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

I'm using these codes in next.config.js file

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

// module.exports = nextConfig

module.exports = {
 assetPrefix: './',
 images: {
   unoptimized: true
 }
}

I created a project and want to export it to the static html. I used this mand in package.json build" : "next build && next export

After that I run this mand to the terminal npm run build. And finally It's give me an out folder.

The problem is, When I try to access html files from out folder, it's showing only html content, without any CSS and js files. I tried many times but It's not working. If anyone help me to get rid of this problem I'll be very very thankful to him.

React errors 418 and 423 are:

Hydration failed because the initial UI does not match what was rendered on the server.

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

I'm using these codes in next.config.js file

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

// module.exports = nextConfig

module.exports = {
 assetPrefix: './',
 images: {
   unoptimized: true
 }
}

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Sep 21, 2022 at 23:23 juliomalves 50.6k2323 gold badges178178 silver badges169169 bronze badges asked Sep 21, 2022 at 18:31 Mahabub HossainMahabub Hossain 17111 gold badge22 silver badges1212 bronze badges 4

• 1 I think this will help NextJS - export is broken (no CSS, no JS) – Sikriti Dakua Commented Sep 21, 2022 at 18:49
• Many many thanks for your help. It's working nicely. But it's Also showing two more issues in browser console. Can you please help me about this. I updated the question. Please, take a look at the last image. Thanks in advance – Mahabub Hossain Commented Sep 21, 2022 at 19:44
• Did you visit the link in the console? – k.tten Commented Sep 21, 2022 at 19:50
• Yes. I was visited. But can't figure out what they're saying. Here is the link. Please, take a look. reactjs/docs/error-decoder.html/?invariant=418 – Mahabub Hossain Commented Sep 21, 2022 at 19:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You need to navigate to the exported folder and open the cmd and run the http server use https://www.npmjs./package/http-server and run below mand npx http-server this will run the application in port 8080

Checked it & it looks like something related to how you have written the HTML check here

For me, assetPrefix: './' didn't work, so I added manually a dot for both links with css and js extension and this solved the problems of the broken css and js and naturally for the errors in the console. Hope this is helpful.

本文标签： javascriptExporting static html with nextjs not working properlyStack Overflow