Next.js by Example

on YouTube ↗36m

" summary

Builds a real app with Next React ReactDOM and a pages directory, demonstrates hot module reloading, automatic routing and scoped CSS via Style JSX, and shows server rendering plus client-side navigation using getInitialProps and isomorphic-fetch to fetch data from an API (he pulls 5,000 photos and the demo strains the laptop). Shows automatic code splitting, prefetching and dynamic imports, and exports static output with next export and deploys with Now — the features work end to end.

AI-written summary · about

" chapters (9)

1. 0:00Intro
2. 4:30Hotcode
3. 5:10Setup
4. 10:40Automatic Routing
5. 12:55Style GSX
6. 19:45Server Rendering
7. 21:00Fetch
8. 25:52Props
9. 29:50Automatic code splitting

" related talks

• 15mGetting Started with Next.jsDelba de Oliveira · Next.js Conf 2021
• 22mUniversal React Apps Using Next.jsSia Karamalegos · ReactNext 2017
• 40mStatic and Dynamic Next.jsGuillermo Rauch · JSHeroes 2017
• 35mNext.js "Universal React Made Easy and Simple"Guillermo Rauch · React Conf 2017
• 34mWhat's Next? Exploring the future of ReactGuillermo Rauch · ReactiveConf 2016
• 15mBuilding Isomorphic JavaScript Apps Faster with Next.jsCS Madhav · JSFoo 2019
• 33mUniversal React Apps Using Next.jsSia Karamalegos · React Finland 2018
• 15mGetting Started with ReactDelba de Oliveira · Next.js Conf 2021