Next.js Tutorial - 60 - Static HTML Export

in this video let's take a look at exporting our next year's application to static html before we take a look at the code though let's learn a few things about building an xgs application earlier in the series we have learned about the next build command which builds the application for production in the dot next folder in order to run the application though we had to use the next start command the command starts a node.js server that supports hybrid pages serving both statically generated and server side rendered pages well let me tell you there is a third command related to the build process and that is the next export command which exports all your pages to static html files that you can serve without the need of a node.js server similar to what create react app does this allows you to host your app on any static hosting service or a cdn without having to maintain a server but it comes with its own limitations the important one being you cannot use isr or server side rendering what you have to keep in mind though is that statically generated pages using next export are still reactive so you can rely on client-side data fetching for dynamic content now what is a good example for using next export well landing pages blogs and any application where the content is generated pretty much at build time are all very good candidates for next export if your pages are rendered dynamically at runtime though you should use next start to run your application all right with these points in mind let's try to export the app we've built so far in this miscellaneous section the first step is to add a script for the next export command as the project generated using create next app doesn't provide it so in package.json under scripts export and this is going to be next build and next export so we run the export command after we build the application now that we have the script in the terminal run the command yarn export when we run the script you can see that we encounter an error image optimization using nextges default loader is not compatible with next export so as it stands we cannot use the image component for optimization we already see a limitation of course we can solve this by hosting the app on versailles and probably using one of these possible solutions but that is not what we want right now so to fix this in pets.js let's remove the image component and the same in index.js as well with that fixed let's rerun the yarn export command we once again come across an error this time error for page slash blog slash blog id pages with get server side props cannot be exported so it's telling us that we simply cannot use get server site props let's try to replace it with get static props not because it is the solution but simply because this is an example and i want you to understand what happens so get static props and now let's rerun the yarn export command unfortunately for us we again have an error thrown get static parts is required for dynamic ssd pages and is missing for blog id so nexus is basically asking us to specify the blog id so that the html can be generated only for those pages since we have already been through the get static paths function i'm going to copy paste the code so i'm informing that the html has to be generated only for blog id equal to one i have also set fallback to true let's save the file and rerun yarn export we have come across an error yet again found pages with fallback enabled pages with fallback enabled in get static parts cannot be exported so nexus is telling us hey you can't ask me to export html pages and tell me that blog id can be anything you want to please mark it as false let's change fallback to false and run the command one more time yarn export finally our command succeeded you can see that the files have been written to a folder called out in the project root if we inspect this folder we can see all the html and the public resources necessary to run the application of course with all the limitations we have just encountered so that is about the next export command to export the application into static html and run it without the need of a node server thank you all for watching please do leave a like if you are finding the videos helpful and i'll see you all in the next one

Channel: Codevolution

Views: 50,371

Keywords: Codevolution, Next, Next.js, Next JS, Codevolution Next.js, Codevolution Next JS, Next.js Tutorial, Next.js Tutorial for Beginners, Next JS Tutorial, Next JS Tutorial for Beginners, Next Tutorial, Next Tutorial for Beginners, Next.js 11, Static HTML Export, Static HTML Export in Next.js, Next.js Tutorial on Static HTML Export

Id: T2Z6JVzz854

Length: 6min 45sec (405 seconds)

Published: Tue Aug 10 2021