Revealing all of Next.js 12's Features

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 or explore the architectural notes, chapters, and official documentation links below.

Questions

1. Can you tell us about your background and how you landed at Vercel?
2. New Feature highlights
   • Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds
   • Middleware (beta): Enabling full flexibility in Next.js with code over configuration
   • React 18 Support: Native Next.js APIs are now supported, as well as Suspense
   • <Image /> AVIF Support: Opt-in for 20% smaller images
   • Bot-aware ISR Fallback: Optimized SEO for web crawlers
   • Native ES Modules Support: Aligning with the standardized module system
   • URL Imports (alpha): Import packages from any URL, no installs required
   • React Server Components (alpha): Try it today, including SSR streaming
3. Will I notice much speed difference with the Rust Compiler on a smaller site 100 pages?
4. 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
5. 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

Additional Links

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 (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 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) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Resources, Links & Official Documentation

• Watch on YouTube: Revealing all of Next.js 12's Features Full Video (plus Subscribe to CodingCat.dev)
• Show Pick: Lottie Files Lightweight, scalable animations for your website and apps (picked by Alex Patterson)
• Show Pick: Complete Next.js Developer (picked by Brittney Postma)
• Show Pick: Jamstack TV (picked by Brittney Postma)
• Show Pick: Lee's new M1 Macbook Pro (picked by Lee Robinson)
• Lee Robinson Guest Profile & Episodes on CodingCat.dev
• Lee Robinson on GitHub
• Next.js Official Documentation: App Router, Server Actions, and rendering architecture guides
• Vercel Documentation: Edge network deployments, serverless functions, and frontend cloud
• MDN JavaScript Reference: ECMAScript specifications, Web APIs, and runtime fundamentals

Related CodingCat.dev Tutorials & Podcast Episodes

• 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: 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): 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 (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 on the CodingCat.dev YouTube channel. For a deeper dive into Next.js, check out our related guide: How to add Sentry to Next.js the right way!.