Next.js 10

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

▶ Watch on YouTube & Subscribe to CodingCat.dev

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

Since we last talked a year ago

1. Zeit became Vercel and gained $21M in funding.
2. Vercel’s $40M Series B happened in December.
3. Next.js 9 added (to name a few)
4. Preview Mode
5. Environment Variables
6. Fast Refresh
7. Static Regeneration
8. Next.js Analytics / Commerce
9. Next.js 10 released
10. next/image
11. @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

1. 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
2. What is in store for NextJS in 2021? – Brittney
3. In browser navigation not working in Firefox and editing in dev tools requires the server to be restarted.
4. 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

1. Admin – Next.js, React, MaterialUI, backed by Firebase
2. 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 on YouTube using the timestamped chapters below:

• 00:00: Intro
• 00:00: Welcome Brittney
• 00:00: Vercel
• 00:00: Jamstack
• 00:00: Series B Funding
• 00:00: Static Regeneration
• 00:00: What is driving the more from Gatsby to NextJS
• 00:00: Frontend dev is in a great place
• 00:00: Vercel deploy previews
• 00:00: Testing in Vercel
• 00:00: NextJS browser support and mobile browsers
• 00:00: React Server Components
• 00:00: Great Developer Experience
• 00:00: Dynamic Component
• 00:00: Analytics in Vercel
• 00:00: Demo of web.dev
• 00:00: Prefetching
• 00:00: Where are we headed with MDX?
• 00:00: JIT rendering
• 00:00: Purrfect Picks

Resources, Links & Official Documentation

• *Watch on YouTube: *Next.js 10 Full Video (plus Subscribe to CodingCat.dev)
• *Show Pick: *Next.js Discussions (picked by Alex Patterson)
• *Show Pick: *Lightest - Visualize web performance against competitors. (picked by Alex Patterson)
• *Show Pick: *Bridgerton (tv series) (picked by Brittney Postma)
• *Show Pick: *The Console Logs (my digital garden/notes site) (picked by Brittney Postma)
• *Show Pick: *What is Next for Vercel (picked by Guillermo Rauch)
• *Show Pick: *Virtual Event Starter Kit (picked by Guillermo Rauch)
• *Show Pick: *Demo Store (picked by Guillermo Rauch)
• *Show Pick: *Vercel Commerce (picked by Guillermo Rauch)
• *Show Pick: *Cleanshot (picked by Guillermo Rauch)
• *Show Pick: *Lighthouse Metrics (picked by Guillermo Rauch)
• Guillermo Rauch Guest Profile & Episodes on CodingCat.dev
• Guillermo Rauch on GitHub
• Next.js Official Documentation: App Router, Server Actions, and rendering architecture guides
• Vercel Documentation: Edge network deployments, serverless functions, and frontend cloud
• React Official Reference: Hooks, Server Components, and UI state patterns

Related CodingCat.dev Tutorials & Podcast Episodes

• Next.js 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: 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: 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 (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 on the CodingCat.dev YouTube channel. For a deeper dive into Next.js, check out our related guide: Next.js with Guillermo Rauch.