An introduction to Next.js and what's to come in 2021

on YouTube ↗27m

" summary

Next.js presents concrete claims and tools: file-system routing with automatic code-splitting, data APIs like getStaticProps and getServerSideProps, and incremental static regeneration that revalidates pages without full rebuilds. It ships image optimization via Next Image to cut LCP and prevent layout shift, and promises upcoming zero bundle size React Server Components to keep server-rendered UI off the client. Metrics cited: ~350,000 React sites and case results like a 23% app-size drop and 70% cut in the largest bundle.

AI-written summary · about

" chapters (14)

1. 0:00Intro
2. 2:29"Web Framework": opinionated systern with default tooling
3. 4:43Routing Web applications can consist of many pages
4. 5:38Routing - Codebase
5. 6:27Routing - Code Splitting
6. 7:57Pre-rendering HTML
7. 10:32Static Generation - Dynamic Routes
8. 10:55Static Generation - Preview Mode Show the updated content to editors
9. 13:28Static Generation - Incremental Generation
10. 15:56Server-Side Rendering On-demand
11. 16:34Data fetching - Eliminated from browser bundles
12. 19:11Core Web Vitals
13. 22:49Granular Chunking • Automatic optimization . 20% or more reduction in application size
14. 23:56React Fast Refresh

" related talks

• 34mWhat's Next? Exploring the future of ReactGuillermo Rauch · ReactiveConf 2016
• 18mNext.js - The Hybrid Architecture for Web DeveloperLee Robinson · React Summit Remote Edition 2021
• 27mIntro to NextJSAllison Kunz · NationJS Frontrunners React 2019
• 40mStatic and Dynamic Next.jsGuillermo Rauch · JSHeroes 2017
• 10mExploring the New Features of Next.js 13Alicia Rodriguez · TheJam.dev 2023
• 33mUniversal React Apps Using Next.jsSia Karamalegos · React Finland 2018
• 35mNext.js "Universal React Made Easy and Simple"Guillermo Rauch · React Conf 2017
• 22mUniversal React Apps Using Next.jsSia Karamalegos · ReactNext 2017