2

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

After that I run this command 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.

1

2

3

4

5

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
 }
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Mahabub Hossain
  • 81
  • 1
  • 9
  • 1
    I think this will help [NextJS - export is broken (no CSS, no JS)](https://stackoverflow.com/a/68691247/10971131) – Sikriti Dakua Sep 21 '22 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 Sep 21 '22 at 19:44
  • Did you visit the link in the console? – kelsny Sep 21 '22 at 19:50
  • Yes. I was visited. But can't figure out what they're saying. Here is the link. Please, take a look. https://reactjs.org/docs/error-decoder.html/?invariant=418 – Mahabub Hossain Sep 21 '22 at 19:52

3 Answers3

1

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

Niroj
  • 52
  • 5
0

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

Sikriti Dakua
  • 26
  • 1
0

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.

Amira Chaabane
  • 1
  • 1