> Canonical URL: https://codingcat.dev/podcast/1-46-revealing-all-of-next-js-12-s-features # Revealing all of Next.js 12's Features 🎧 Podcast Episode · S1E46November 17, 2021 # Revealing all of Next.js 12's Features ![](https://cdn.sanity.io/images/hfh83o0w/production/7cab5a5a4b0795f6ab935e9b41d8f0d31d093535-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/images/hfh83o0w/production/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Lee Robinson](https://cdn.sanity.io/images/hfh83o0w/production/d2131d51fab0c178751ee53662fd91308f0b4cef-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Lee Robinson](/guest/lee-robinson)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/1PBe5x63tPw4lXnPLAFSfx)[Apple](https://podcasts.apple.com/us/podcast/1-46-revealing-all-of-next-js-12s-features/id1491655542?i=1000542237673)[YouTube](https://www.youtube.com/watch?v=_iGE7lVfeaI)[Pocket Casts](https://pca.st/episode/4321da93-621c-49f2-a78b-a7154103ef0f)[Castbox](https://castbox.fm/episode/id2508485-id442934639)[Castro](https://castro.fm/episode/WOyRSs)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)✏️ Visual Architecture Diagram ## how this episode connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Revealing all of Next.js 12's Features✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Revealing all of Next.js 12's Features: start with Lee Robinson, implement Architecture & Patterns, and ship to production.AAA Contrast Verified **Revealing all of Next.js 12's Features ** is a CodingCat.dev podcast episode featuring Lee Robinson alongside Alex Patterson and Brittney Postma focused on Next.js, Vercel, JavaScript. We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=_iGE7lVfeaI) or explore the architectural notes, chapters, and official documentation links below. ## Questions - Can you tell us about your background and how you landed at Vercel? - New Feature highlights [**Rust Compiler**](https://nextjs.org/blog/next-12#faster-builds-and-fast-refresh-with-rust-compiler): ~3x faster Fast Refresh and ~5x faster builds - [**Middleware (beta)**](https://nextjs.org/blog/next-12#introducing-middleware): Enabling full flexibility in Next.js with code over configuration - [**React 18 Support**](https://nextjs.org/blog/next-12#preparing-for-react-18): Native Next.js APIs are now supported, as well as Suspense - [**`` AVIF Support**](https://nextjs.org/blog/next-12#smaller-images-using-avif): Opt-in for 20% smaller images - [**Bot-aware ISR Fallback**](https://nextjs.org/blog/next-12#bot-aware-isr-fallback): Optimized SEO for web crawlers - [**Native ES Modules Support**](https://nextjs.org/blog/next-12#es-modules-support-and-url-imports): Aligning with the standardized module system - [**URL Imports (alpha)**](https://nextjs.org/blog/next-12#url-imports): Import packages from any URL, no installs required - [**React Server Components (alpha)**](https://nextjs.org/blog/next-12#react-server-components): Try it today, including SSR streaming - Will I notice much speed difference with the Rust Compiler on a smaller site `100 pages`? - Lets talk a lot about Serverless functions vs. Edge Functions running on V8. It seems like this might have some pretty specific use cases. [https://vercel.com/docs/concepts/functions/edge-functions#middleware-use-cases](https://vercel.com/docs/concepts/functions/edge-functions#middleware-use-cases) - To keep memory low you will probably want to do a lot of streaming of data correct [https://vercel.com/docs/concepts/functions/edge-functions#streams](https://vercel.com/docs/concepts/functions/edge-functions#streams) ## Additional Links [https://nextjs.org/blog/next-12](https://nextjs.org/blog/next-12) ## Technical Overview: Revealing all of Next.js 12's Features 1.46 - Next.js with Lee Robinson: We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12. https://codingcat.dev/podcast/1-46-revealing-all-of-next-js-12-s-features When applying the concepts from **Revealing all of Next.js 12's Features** in a production codebase, teams working with Next.js, Vercel, JavaScript, React should align their implementation with the [**Next.js Official Documentation**](https://nextjs.org/docs) (App Router, Server Actions, and rendering architecture guides). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales. ### Key Engineering Takeaways - **Core Topic Focus: ** Practical strategies for Next.js, Vercel, JavaScript, React covered in "Revealing all of Next.js 12's Features" (We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12.). - **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [Next.js Official Documentation](https://nextjs.org/docs) for type safety, performance, and long-term maintainability. - **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Revealing all of Next.js 12's Features)](https://www.youtube.com/watch?v=_iGE7lVfeaI) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives. ## Resources, Links & Official Documentation - **Watch on YouTube: ** [Revealing all of Next.js 12's Features Full Video](https://www.youtube.com/watch?v=_iGE7lVfeaI) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - **Show Pick: ** [Lottie Files Lightweight, scalable animations for your website and apps (picked by Alex Patterson)](https://lottiefiles.com/) - **Show Pick: ** [Complete Next.js Developer (picked by Brittney Postma)](https://academy.zerotomastery.io/p/learn-next-js?affcode=441520_gjue7n-1) - **Show Pick: ** [Jamstack TV (picked by Brittney Postma)](https://www.youtube.com/channel/UC8bRyfU7ycLXnEBfvdorpUg) - **Show Pick: ** [Lee's new M1 Macbook Pro (picked by Lee Robinson)](https://www.apple.com/shop/buy-mac/macbook-pro/14-inch) - [**Lee Robinson Guest Profile & Episodes on CodingCat.dev**](/guest/lee-robinson) - [**Lee Robinson on GitHub**](https://github.com/leerob) - [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides - [**Vercel Documentation:**](https://vercel.com/docs) Edge network deployments, serverless functions, and frontend cloud - [**MDN JavaScript Reference:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ECMAScript specifications, Web APIs, and runtime fundamentals ## Related CodingCat.dev Tutorials & Podcast Episodes - [**How to add Sentry to Next.js the right way!**](/podcast/how-to-add-sentry-to-next-js-the-right-way): Discover how to set up Sentry with Next.js for seamless error monitoring and performance tracking. - [**Reviewing Next.js 11 features with Tim Neutkens**](/podcast/1-36-reviewing-nextjs-features-with-tim-neutkens): We sit down with Tim to talk about how he got started with Next.js and what things are upcoming in Next.js 11. - [**How to Secure Vercel Cron Job routes in Next.js 14 (app router)**](/post/how-to-secure-vercel-cron-job-routes-in-next-js-14-app-router): Learn how to manage Cron Jobs effectively in Vercel. How to stay in the Hobby plan while executing multiple API requests. Learn how to manage Cron Jobs effectiv... ## Frequently Asked Questions (FAQ) ### What are the main takeaways from Revealing all of Next.js 12's Features? We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12. 1.46 - Next.js with Lee Robinson: We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12. https://codingcat.dev/podcast/1-46-revealing-all-of-next-js-12-s-features Throughout this podcast, Lee Robinson breaks down real-world implementation details for Next.js, Vercel, JavaScript so developers can apply these patterns directly in production. ### How do you implement Next.js best practices in production? When adopting Next.js and Vercel in a production stack, start by validating your configuration against the [**Next.js Official Documentation**](https://nextjs.org/docs) (App Router, Server Actions, and rendering architecture guides). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full Revealing all of Next.js 12's Features walkthrough and find related code resources? You can watch the complete video session for [**Revealing all of Next.js 12's Features**](https://www.youtube.com/watch?v=_iGE7lVfeaI) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Next.js, check out our related guide: [**How to add Sentry to Next.js the right way!**](/podcast/how-to-add-sentry-to-next-js-the-right-way). ## ✏️ Episode Summary 1.46 - Next.js with Lee Robinson: We sit down with Lee Robinson, Head of Developer relations at Vercel, to talk all about Next.js 12. https://codingcat.dev/podcast/1-46-revealing-all-of-next-js-12-s-features ## episode picks. ### 🐾 Alex Patterson - [Lottie Files Lightweight, scalable animations for your website and apps](https://lottiefiles.com/) ### 🐾 Brittney Postma - [Complete Next.js Developer](https://academy.zerotomastery.io/p/learn-next-js?affcode=441520_gjue7n-1) - [Jamstack TV](https://www.youtube.com/channel/UC8bRyfU7ycLXnEBfvdorpUg) ### 🐾 Lee Robinson - [Lee's new M1 Macbook Pro](https://www.apple.com/shop/buy-mac/macbook-pro/14-inch) ## recent episodes. [All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai) ### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming) Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI. [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai) ### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences) Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together! [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)