Static Generation with getStaticProps

Static Generate means that we Pre-generate a page during build time. This way, all HTML data that make up the content is already loaded into the page during the build time. By build, I mean that the app is pre-rendered during the app’s deployment.

After your app has been deployed, pages are prepared ahead of time. Allowing them to be cached by the server/ CDN(content delivery network) serving the app. Now when a client requests the server, the pages can be severed to the client if any incoming requests are being resolved.

Only inside the pages folder, we can use :

Can be added to any page file under the pages directory

NextJS will automatically pre-generate. But we want to tell NextJS which files we wish to be pre-rendered; we can do that like so:

NextJS first executes the getStaticProps and then renders the HomePage() component.

getStaticProps not only allows us to write server-side code but also allows us to import node modules such as fs node files system.

Other cool things we can do with NextJS.

SIDE NOTE: keep in mind that JSON, is a global object just on both browser-side and with node.

We can test our build by running

npm run build
npm start

This will allow us to see what is being built for our application…