Improving developer and user experience with nested layouts in Next.js
summary
Next.js 13 implements nested layouts that render the full document and slot children so persistent nav and per-route sidebars stay stable while only inner segments rerender; server components are default while interactive bits use use client components and the navigation hook to mark active links; data fetching uses React’s experimental use with Suspense and per-segment fetches, plus generateStaticParams to prebuild pages (build shows six static movie pages), and the demo works end to end.
AI-written summary · about
chapters (10)
- 0:00Nested layouts in Next.js
- 2:28Pages and navigation with Link
- 4:12Server vs client components
- 6:45Interactive components with use client
- 8:32Data fetching with use
- 11:42Loading states with loading.js
- 13:29Nested layouts for dynamic routes
- 16:22Dynamic data in nested layouts
- 19:29Static generation in Next.js
- 22:44Summary and future
related talks
21mHow Next.js is delivering React’s vision for the future
36mNext.js by Example
15mGetting Started with Next.js
30mComposition, Caching, and Architecture in modern
22mUniversal React Apps Using Next.js
31mReact Server Components Elevating Speed, Interactivity, and User Experience
27mAn introduction to Next.js and what's to come in 2021
34mWhat's Next? Exploring the future of React