Next.js Static Site Generation | Next.js Zero to Hero #3

Опубликовано: 29 Октябрь 2024
на канале: Igor Silveira

4,438

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...

Check out the full playlist here:    • NextJS Zero to Hero

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/igora...

JOIN OUR NEWLY CREATED DISCORD CHANNEL
📘 Discord:   / discord

MY SOCIAL MEDIA
🎥 Twitch:   / igorsilveira
📷 Instagram:   / igorasilveira
🐦 Twitter:   / 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