> Canonical URL: https://codingcat.dev/podcast/1-22-hosting-nextjs-on-netlify

# Hosting Next.js on Netlify

🎧 Podcast Episode · S1E22May 26, 2021

# Hosting Next.js on Netlify

![](https://cdn.sanity.io/images/hfh83o0w/production/3933e331d455eb073f0105de1faf0588ff478a3f-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)[![Cassidy Williams](https://cdn.sanity.io/images/hfh83o0w/production/a41356f038e003b81b8b60a14c1a01f5331ef112-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Cassidy Williams](/guest/cassidoo)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/6B4r7ksTX2YM1Q6Y2qiY0v)[Apple](https://podcasts.apple.com/us/podcast/1-22-hosting-next-js-on-netlify/id1491655542?i=1000523188924)[YouTube](https://www.youtube.com/watch?v=QvYlf0rpJT4)[Pocket Casts](https://pca.st/episode/54c59203-f03a-4243-b361-8d65dd6c3855)[Castbox](https://castbox.fm/episode/id2508485-id385867028)[Castro](https://castro.fm/episode/Tj68p1)[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: Hosting Next.js on Netlify✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Hosting Next.js on Netlify: start with Cassidy Williams, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**Hosting Next.js on Netlify ** is a CodingCat.dev podcast episode featuring Cassidy Williams alongside Alex Patterson and Brittney Postma focused on Netlify, Next.js, JavaScript. We sat down with Cassidy Williams to talk about her background as a developer. Then we talked about the cool new Next.js on Netlify hosting feature. 1.22 - Hosting Next js on Netlify: https://codingcat.dev/podcast/1-22-hosting-nextjs-on-netlify 00:00 - Intro
00:01 - Meet Cassidy Williams
05:58 - Public speaking for introverts
08:10 - Netlify and Next.js
11:05 - Hosting static sites out of Next.js
11:23 - Gatsby vs. Next.js
13:26 - Opportunities for improvement for Next.js
16:21 Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=QvYlf0rpJT4) or explore the architectural notes, chapters, and official documentation links below.

### Questions

- Can you tell us a little bit about your journey in technology?
- You talked recently about how you are an introvert and that you just started speaking and writing to break out of some of this.
- What makes Next.js different than hosting something like Gatsby?
- What are the new changes Netlify has made to improve hosting for Next.js?
- Are there any drawbacks to hosting on Netlify over Vercel?
- Are Netlify Functions actually AWS Lambdas?

## Additional Links

- [Netlify's Next.js Plugin](https://github.com/netlify/netlify-plugin-nextjs)
- [Cassidy's Netlify Blog posts (cass.run/nb)](https://www.netlify.com/authors/cassidoo/)
- [Enterprise Next.js 10 on Netlify](https://www.netlify.com/press/netlify-announces-next-js-integration-enabling-next-js-10-for-enterprise-teams/)

## Technical Overview: Hosting Next.js on Netlify

1.22 - Hosting Next js on Netlify: https://codingcat.dev/podcast/1-22-hosting-nextjs-on-netlify 00:00 - Intro
00:01 - Meet Cassidy Williams
05:58 - Public speaking for introverts
08:10 - Netlify and Next.js
11:05 - Hosting static sites out of Next.js
11:23 - Gatsby vs. Next.js
13:26 - Opportunities for improvement for Next.js
16:21

When applying the concepts from **Hosting Next.js on Netlify**  in a production codebase, teams working with Netlify, Next.js, JavaScript, React Native should align their implementation with the [**Netlify Documentation**](https://docs.netlify.com/) (Jamstack deployments, edge functions, and build automation). 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 Netlify, Next.js, JavaScript, React Native covered in "Hosting Next.js on Netlify" (We sat down with Cassidy Williams to talk about her background as a developer. Then we talked about the cool new Next.js on Netlify hosting feature.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [Netlify Documentation](https://docs.netlify.com/) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Hosting Next.js on Netlify)](https://www.youtube.com/watch?v=QvYlf0rpJT4) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

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

- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Meet Cassidy Williams
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Public speaking for introverts
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Netlify and Next.js
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Hosting static sites out of Next.js
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Gatsby vs. Next.js
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Opportunities for improvement for Next.js
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): How do I move to Netlify?
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Leveraging CI and Netlify
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Keeping secrets in multiple places
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Redwood and Raindrop
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): What am I missing on Next.js?
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): What's the difference between Gatsby Image and Next.js Image?
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Extending into eCommerce
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): How does Netlify handle Next.js sites?
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Let's talk about Lambda
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Can you price yourself out of Netlify?
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Purrfect Picks
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Cassidy: 1) Obsidian; 2) Itaewon Class
- [**00:00**](https://www.youtube.com/watch?v=QvYlf0rpJT4&t=0s): Brittney: 1) Next.js from the Ground Up; 2) The Next.js Handbook

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Hosting Next.js on Netlify Full Video](https://www.youtube.com/watch?v=QvYlf0rpJT4) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **Show Pick: ** [Write Once for all your Apps (picked by Alex Patterson)](https://expo.io)
- **Show Pick: ** [Next.js from the Ground Up (picked by Brittney Postma)](https://explorers.netlify.com/learn/nextjs)
- **Show Pick: ** [The Next.js Handbook (picked by Brittney Postma)](https://www.freecodecamp.org/news/the-next-js-handbook/)
- **Show Pick: ** [Obsidian (picked by Cassidy Williams)](https://obsidian.md/)
- **Show Pick: ** [Itaewon Class → K-drama on Netflix (picked by Cassidy Williams)](https://www.netflix.com/title/81193309)
- [**Cassidy Williams Guest Profile & Episodes on CodingCat.dev**](/guest/cassidoo)
- [**Cassidy Williams on GitHub**](https://github.com/cassidoo)
- [**Netlify Documentation:**](https://docs.netlify.com/) Jamstack deployments, edge functions, and build automation
- [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides
- [**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.
- [**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.
- [**Next.js Deployment Adapters: A bright future for Next.js on Google Cloud in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2026-03-nextjs-adapters): Hands-on web engineering breakdown of "Next.js Deployment Adapters: A bright future for Next.js on Google Cloud" (2026-03-26). Learn how to integrate Firebase, ...

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Hosting Next.js on Netlify?

We sat down with Cassidy Williams to talk about her background as a developer. Then we talked about the cool new Next.js on Netlify hosting feature. 1.22 - Hosting Next js on Netlify: https://codingcat.dev/podcast/1-22-hosting-nextjs-on-netlify 00:00 - Intro
00:01 - Meet Cassidy Williams
05:58 - Public speaking for introverts
08:10 - Netlify and Next.js
11:05 - Hosting static sites out of Next.js
11:23 - Gatsby vs. Next.js
13:26 - Opportunities for improvement for Next.js
16:21 Throughout this podcast, Cassidy Williams breaks down real-world implementation details for Netlify, Next.js, JavaScript so developers can apply these patterns directly in production.

### How do you implement Netlify best practices in production?

When adopting Netlify and Next.js in a production stack, start by validating your configuration against the [**Netlify Documentation**](https://docs.netlify.com/) (Jamstack deployments, edge functions, and build automation). 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 Hosting Next.js on Netlify walkthrough and find related code resources?

You can watch the complete video session for [**Hosting Next.js on Netlify**](https://www.youtube.com/watch?v=QvYlf0rpJT4) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Netlify, 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.22 - Hosting Next js on Netlify: https://codingcat.dev/podcast/1-22-hosting-nextjs-on-netlify

00:00 - Intro
00:01 - Meet Cassidy Williams
05:58 - Public speaking for introverts
08:10 - Netlify and Next.js
11:05 - Hosting static sites out of Next.js
11:23 - Gatsby vs. Next.js
13:26 - Opportunities for improvement for Next.js
16:21

## episode picks.

### 🐾 Alex Patterson

- [Write Once for all your Apps](https://expo.io)

### 🐾 Brittney Postma

- [Next.js from the Ground Up](https://explorers.netlify.com/learn/nextjs)
- [The Next.js Handbook](https://www.freecodecamp.org/news/the-next-js-handbook/)

### 🐾 Cassidy Williams

- [Obsidian](https://obsidian.md/)
- [Itaewon Class → K-drama on Netflix](https://www.netflix.com/title/81193309)

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