Next js SSG index.html build
Answered
Donskoy posted this in #help-forum
DonskoyOP
I have next js ssg build in out directory , but when i open index.html in browser from build directory, it calls the XHR request to build/api directory and render the data, can't we have build index.html which has data also in it, like simple HTML file similar to static html file
Answered by joulev
just tell them that they go to https://google.com to access google, not file://google.com
28 Replies
@Donskoy I have next js ssg build in out directory , but when i open index.html in browser from build directory, it calls the XHR request to build/api directory and render the data, can't we have build index.html which has data also in it, like simple HTML file similar to static html file
yes, you can do that. Take a look here: https://nextjs.org/docs/app/building-your-application/deploying/static-exports
However: keep in mind, that there are than some features, that are unsupported: https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features
TL;DR:
Add
To your nextConfig and it will be statically exported
However: keep in mind, that there are than some features, that are unsupported: https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features
TL;DR:
Add
const nextConfig = {
output: 'export',To your nextConfig and it will be statically exported
DonskoyOP
Okay Thanks,
I have some lottie animation file in my build. but When I open index.html the lottie files are not opening and showing the CORS error. and due to that it is not opening the lottie file
I have some lottie animation file in my build. but When I open index.html the lottie files are not opening and showing the CORS error. and due to that it is not opening the lottie file
@Donskoy Okay Thanks,
I have some lottie animation file in my build. but When I open index.html the lottie files are not opening and showing the CORS error. and due to that it is not opening the lottie file
you might want to fix the CORS error, to be able to load the file and after loading the file it should be displayed correctly
DonskoyOP
Actully everything is in my local machine only. and the path is also from local. but still CORS error is coming
is there any way i can fix this cors error?
DonskoyOP
I have this CDN and using that I am loading the lottie. it is working fine while running in local
@Donskoy I have this CDN and using that I am loading the lottie. it is working fine while running in local
it looks like the CORS errors are from there. It seems like they only allow access, when there is a server. So put the files on any machine and try again
DonskoyOP
So while using Server it is working, but I want it like we use in static HTML file
@Donskoy So while using Server it is working, but I want it like we use in static HTML file
yea, upload the file on a machine that is publically available. For example s3. [AWS S3](https://aws.amazon.com/en/s3/) is just storage and also allowes static file hosting (no server is running). However: it's publically available. And like that all the content is loaded correctly
DonskoyOP
okay. so there is no other way ?
@Donskoy So while using Server it is working, but I want it like we use in static HTML file
nextjs is not built for the file:// protocol. you need to serve the html and all assets using the http:// or https:// protocol.
a simple way to serve it is by using
a simple way to serve it is by using
serve: https://github.com/vercel/serve or by using static file hosting services beefbone specified above.DonskoyOP
but images are working properly, only lottie files are not working
by the way, when you will host the app, you will do it in the https:// protocol anyway, so there is no reason to develop with the file:// protocol. it's for file sharing not for hosting websites.
@Donskoy but images are working properly, only lottie files are not working
so something is not working, is it? you need to use http:// so that everything is working.
@joulev nextjs is not built for the file:// protocol. you need to serve the html and all assets using the http:// or https:// protocol.
a simple way to serve it is by using `serve`: <https://github.com/vercel/serve> or by using static file hosting services beefbone specified above.
serve: https://github.com/vercel/serveuhhh interesting 👀
you can't transfer data between file:// and http://. that's why it's not working for you.
@B33fb0n3 > serve: https://github.com/vercel/serve
uhhh interesting 👀
i used to use
SimpleHTTPServer from python, glad that now we have a good one in js landDonskoyOP
I also used it via node server, it worked well. but not with file://
@joulev i used to use `SimpleHTTPServer` from python, glad that now we have a good one in js land
using python as http middleware is crazy
@Donskoy I also used it via node server, it worked well. but not with file://
that what we are saying to you
@Donskoy I also used it via node server, it worked well. but not with file://
yes because as i told you you are not supposed to use file://, it's not for serving websites
just tell them that they go to https://google.com to access google, not file://google.com
Answer
when you host the thing in a hosting platform with https://, it will work.
DonskoyOP
agree
Thank you guys for Help 🙂
if your client want to preview the website then tell them to use
serve above, pretty easy to install, just need a very bare knowledge of the command prompt