Next.js Static Site Generation | A Comprehensive Next.js Guide #3

Next.js Static site generation is one of the ways Next.js enables high-performant websites by pre-rendering every page by default instead of having it all done by client-side JavaScript, like regular React apps usually do.

Up to this point, we have been talking about the concept of pages, how to represent them within our Next.js project, and how to make them either static or dynamic so that Next.js would know how to render and match specific URLs to their corresponding React components.

But one thing we have not done is dive deeper into how Next.js is assembling those pages and serving them back to us when we visit some URL. And better yet, how the production build of our app differs from the development environment we are running locally. And this is really where Next.js shines.

You can find the source code in the repo: https://github.com/igorasilveira/blog-examples

Check out the full playlist here: https://www.youtube.com/playlist?list=PLrx2ZMCemIwtNqvDa3C0fyKkZTIMFYmR-

Chapters 0:00 - Intro 1:04 - Quick Recap 1:28 - Diving Deeper into Next.js 1:48 - What is Pre-Rendering? 2:53 - How Next.js Handles Pre-Rendering 4:59 - Static Generation Without Data 9:08 - Static Generation With Data 15:52 - See it in action 23:34 - Next.js Build Process 24:40 - Outro

• IF you like this video, please make sure to click the like button and share this with all your friends! 👍

• ANY comments or ideas? Share them with me down below! ✍

SIGNUP FOR THE NEWSLETTER 📥 Newsletter: https://www.getrevue.co/profile/igorasilveira

JOIN OUR NEWLY CREATED DISCORD CHANNEL 📘 Discord: https://discord.gg/2bC34YRP

MY SOCIAL MEDIA 🎥 Twitch: https://www.twitch.tv/igorsilveira 📷 Instagram: https://www.instagram.com/igorasilveira 🐦 Twitter: https://twitter.com/igorasilveira

MY FILMING GEAR: 📷 My Camera - Sony Alpha 7 II - https://amzn.to/3ihZGvW 🎤 My Microphone - Trust Gaming GXT 258 Fyru - https://amzn.to/3yjrF3S 💡 My Lighting - Neewer 2-Pack LED - https://amzn.to/3A1XBKK

MY CODING GEAR: ⌨ My Keyboard - MX Keys by Logitech - https://amzn.to/3xj1glq 🖱 My Mouse - MX Master 3 by Logitech - https://amzn.to/3ijdN4g 🎧 My Headphones - Sony MX1000XM3 - https://amzn.to/3jcTYuG 📺 My Monitors - 1x Dell U2417H and 1x Lenovo G34w-10

COMPUTER SPECS: (MacBook Pro 16'' 2019) Intel i9 2,3 GHz 8-Core 16 GB 2667 MHz DDR4 Intel UHD Graphics 630 1536 MB

(Custom Built PC 2017) AMD Ryzen 3700X 3,6 GHz 8-Core Team Group DDR4 2400MHz 16 GB - https://amzn.to/2TQa1pB Radeon RX 560 Series 4 GB - https://amzn.to/3Ci7hTk ... https://www.youtube.com/watch?v=MCkEQIINJ3w