5 things you need to know to take your next app to the next level

on YouTube ↗20m

" summary

Five concrete takeaways: set meta tags with the Next.js Head so Twitter card previews work (card validator shows the meow emoji), use the Script component to control before/after interactive loading, and apply incremental static regeneration via getStaticProps/getStaticPaths with revalidate (example uses one hour / 3600s) as done by Meow Props; use the Next.js image component or srcSet and CDN caching to avoid heavy downloads; and send proper cache-control headers with stale-while-revalidate (example uses 59s) for fast server-rendered pages.

AI-written summary · about

" chapters (13)

1. 0:00Start
2. 0:57Performance Optimizations
3. 1:18Seo
4. 1:38What Exactly Is Seo
5. 2:59Demo
6. 5:55Meta Tags
7. 6:34Script Optimization
8. 7:49Loading and Redirects
9. 12:20Incremental Static Regeneration
10. 14:55Image Optimization
11. 15:39Cache Images on Cdn
12. 15:59Using Source Set Next Js Image Component
13. 16:37Caching

" related talks

• 22mTaking Next Apps to the Next LevelAnuradha Kumari · React Conference Live 2022
• 07mElevating brands with Next.jsSophia Andren · Next.js Conf 2023
• 36mNext.js by ExampleGuillermo Rauch · Nordic.js 2017
• 10mExploring the New Features of Next.js 13Alicia Rodriguez · TheJam.dev 2023
• 27mOptimizing the Critical Rendering Path in ReactAlex Moldovan · React Day Berlin 2018
• 40mStatic and Dynamic Next.jsGuillermo Rauch · JSHeroes 2017
• 27mAn introduction to Next.js and what's to come in 2021Tim Neutkens · JSWorld Conference 2021
• 26mNext level CodingTim Neutkens · React Live 2019