> Canonical URL: https://codingcat.dev/podcast/1-4-next-js-10-with-guillermo-rauch

# Next.js 10

🎧 Podcast Episode · S1E4January 1, 2021

# Next.js 10

![](https://cdn.sanity.io/images/hfh83o0w/production/5febb50ae39284c22bdb43dc525ae5fdaedbaa9a-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)[![Guillermo Rauch](https://cdn.sanity.io/images/hfh83o0w/production/fad34d9f5f6d2d81c0b07f7f9d0e20638290e712-800x800.jpg?w=96&h=96&q=82&fit=max&auto=format)Guillermo Rauch](/guest/guillermo-rauch)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/5mrXe0wPHc84li5d1ZvVYd)[Apple](https://podcasts.apple.com/us/podcast/1-4-next-js-10-with-guillermo-rauch/id1491655542?i=1000504662171)[YouTube](https://www.youtube.com/watch?v=Xr4wqU5FyMI)[Pocket Casts](https://pca.st/episode/747ac5b0-7e7f-4bec-b501-ce0bc2185aa1)[Castbox](https://castbox.fm/episode/id2508485-id343028233)[Castro](https://castro.fm/episode/rxzqap)[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: Next.js 10✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Next.js 10: start with Guillermo Rauch, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**Next.js 10 ** is a CodingCat.dev podcast episode featuring Guillermo Rauch alongside Alex Patterson and Brittney Postma focused on Next.js, Vercel, React. Talking with Guillermo Rauch about Next.js 10 and Vercel. Including plans for 2021. 1.4 - Next js 10 with Guillermo Rauch: https://codingcat.dev/podcast/1-4-next-js-10-with-guillermo-rauch 00:00 - Intro
00:40 - Welcome Brittney
01:30 - Vercel 02:30 - Jamstack
03:14 - Series B Funding
05:00 - Static Regeneration
06:10 - What is driving the more from Gatsby to NextJS
09:00 - Frontend dev is in a great place
11:00 - Verc Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=Xr4wqU5FyMI) or explore the architectural notes, chapters, and official documentation links below.

## Since we last talked a year ago

- Zeit became Vercel and gained $21M in funding.
- Vercel’s $40M Series B happened in December.
- Next.js 9 added (to name a few)
- Preview Mode
- Environment Variables
- Fast Refresh

- Static Regeneration

- Next.js Analytics / Commerce
- Next.js 10 released
- next/image
- @next/mdx

## Vercel

- We are now using Vercel and Next.js in our next version of codingcat.dev. It has taken me a little bit of getting used to the CI/CD flow coming from Amplify and Google Cloud Build for Firebase hosting. Can you tell me more about Deploy Preview?
- https://rauchg.com/2020/vercel#preview

## NextJS

- I have seen a lot of movement to NextJS in the Jamstack community in the last year. What do you think is driving this move from Gatsby to Next? – Brittney
- What is in store for NextJS in 2021? – Brittney
- In browser navigation not working in Firefox and editing in dev tools requires the server to be restarted.
- Images must be in the public folder.

## CodingCat.dev on Next.js

Currently we are running on Firebase as a backend with two separate Next.js sites

- Admin – Next.js, React, MaterialUI, backed by Firebase
- Main – Next.js, React, Tailwindcss, backed by Firebase

How can we statically build only our important pages, and then rely on regeneration for the rest? Is it as simple as saying build latest 50 pages and let page props do the rest?

Lighthouse vs. Vercel Analytics how to get 100?

I have read what I will call “way” too much about the Next.js chunks and that Lighthouse complaining about them is basically a non-issue, but is this true?

So in looking at the P99 on Vercel we actually get 100, so what gives, what is this actually showing?

## Guillermo Rauch

“Impossible just takes longer”

## Video Chapters & Timestamps

Jump directly to any segment of [**Next.js 10**](https://www.youtube.com/watch?v=Xr4wqU5FyMI) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Welcome Brittney
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Vercel
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Jamstack
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Series B Funding
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Static Regeneration
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): What is driving the more from Gatsby to NextJS
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Frontend dev is in a great place
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Vercel deploy previews
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Testing in Vercel
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): NextJS browser support and mobile browsers
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): React Server Components
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Great Developer Experience
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Dynamic Component
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Analytics in Vercel
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Demo of web.dev
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Prefetching
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Where are we headed with MDX?
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): JIT rendering
- [**00:00**](https://www.youtube.com/watch?v=Xr4wqU5FyMI&t=0s): Purrfect Picks

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Next.js 10 Full Video](https://www.youtube.com/watch?v=Xr4wqU5FyMI) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **Show Pick: ** [Next.js Discussions (picked by Alex Patterson)](https://github.com/vercel/next.js/discussions)
- **Show Pick: ** [Lightest - Visualize web performance against competitors. (picked by Alex Patterson)](https://lightest.app/)
- **Show Pick: ** [Bridgerton (tv series) (picked by Brittney Postma)](https://www.netflix.com/title/80232398)
- **Show Pick: ** [The Console Logs (my digital garden/notes site) (picked by Brittney Postma)](https://www.theconsolelogs.com/)
- **Show Pick: ** [What is Next for Vercel (picked by Guillermo Rauch)](https://rauchg.com/2020/next-for-vercel)
- **Show Pick: ** [Virtual Event Starter Kit (picked by Guillermo Rauch)](https://vercel.com/virtual-event-starter-kit)
- **Show Pick: ** [Demo Store (picked by Guillermo Rauch)](https://demo.vercel.store/)
- **Show Pick: ** [Vercel Commerce (picked by Guillermo Rauch)](https://nextjs.org/commerce)
- **Show Pick: ** [Cleanshot (picked by Guillermo Rauch)](https://cleanshot.com)
- **Show Pick: ** [Lighthouse Metrics (picked by Guillermo Rauch)](https://lighthouse-metrics.com/)
- [**Guillermo Rauch Guest Profile & Episodes on CodingCat.dev**](/guest/guillermo-rauch)
- [**Guillermo Rauch on GitHub**](https://github.com/rauchg)
- [**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
- [**React Official Reference:**](https://react.dev/reference/react) Hooks, Server Components, and UI state patterns

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Next.js with Guillermo Rauch**](/podcast/0-6-nextjs-with-guillermo-rauch): Talking about Next.js with CEO of Vercel (Zeit). Everything from why Next.js was started to comparing where to host it.
- [**Revealing all of Next.js 12's Features**](/podcast/1-46-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.
- [**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.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Next.js 10?

Talking with Guillermo Rauch about Next.js 10 and Vercel. Including plans for 2021. 1.4 - Next js 10 with Guillermo Rauch: https://codingcat.dev/podcast/1-4-next-js-10-with-guillermo-rauch 00:00 - Intro
00:40 - Welcome Brittney
01:30 - Vercel 02:30 - Jamstack
03:14 - Series B Funding
05:00 - Static Regeneration
06:10 - What is driving the more from Gatsby to NextJS
09:00 - Frontend dev is in a great place
11:00 - Verc Throughout this podcast, Guillermo Rauch breaks down real-world implementation details for Next.js, Vercel, React 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 Next.js 10 walkthrough and find related code resources?

You can watch the complete video session for [**Next.js 10**](https://www.youtube.com/watch?v=Xr4wqU5FyMI) 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: [**Next.js with Guillermo Rauch**](/podcast/0-6-nextjs-with-guillermo-rauch).

## ✏️ Episode Summary

1.4 - Next js 10 with Guillermo Rauch: https://codingcat.dev/podcast/1-4-next-js-10-with-guillermo-rauch

00:00 - Intro
00:40 - Welcome Brittney
01:30 - Vercel
02:30 - Jamstack
03:14 - Series B Funding
05:00 - Static Regeneration
06:10 - What is driving the more from Gatsby to NextJS
09:00 - Frontend dev is in a great place
11:00 - Verc

## episode picks.

### 🐾 Alex Patterson

- [Next.js Discussions](https://github.com/vercel/next.js/discussions)
- [Lightest - Visualize web performance against competitors.](https://lightest.app/)

### 🐾 Brittney Postma

- [Bridgerton (tv series)](https://www.netflix.com/title/80232398)
- [The Console Logs (my digital garden/notes site)](https://www.theconsolelogs.com/)

### 🐾 Guillermo Rauch

- [What is Next for Vercel](https://rauchg.com/2020/next-for-vercel)
- [Virtual Event Starter Kit](https://vercel.com/virtual-event-starter-kit)
- [Demo Store](https://demo.vercel.store/)
- [Vercel Commerce](https://nextjs.org/commerce)
- [Cleanshot](https://cleanshot.com)
- [Lighthouse Metrics](https://lighthouse-metrics.com/)

## 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)