> Canonical URL: https://codingcat.dev/podcast/cwcc-1-2-aws-amplify

# Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2

🎧 Podcast Episode · S2E3February 14, 2024[![](/logos/tags/aws-symbol-light.svg)![](/logos/tags/aws-symbol-dark.svg)AWS](/topic/aws)[![](/logos/tags/nextjs-symbol-light.svg)![](/logos/tags/nextjs-symbol-dark.svg)Next.js](/topic/nextjs)[![](/logos/tags/typescript-symbol-light.svg)![](/logos/tags/typescript-symbol-dark.svg)TypeScript](/topic/typescript)[![](/logos/tags/github-symbol-light.svg)![](/logos/tags/github-symbol-dark.svg)GitHub](/topic/github)[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)[![](/logos/tags/angular-symbol-light.svg)![](/logos/tags/angular-symbol-dark.svg)Angular](/topic/angular)

# Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/be4ab3b7d1d31d0354fa6889511f4e172adcb40f-1920x1080.png?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=SAF2gP7U5CM&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Erik Hanchett](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a0343d7b1b3a9df7807a0affe5302caab16f0a28-352x352.jpg?w=96&h=96&q=82&fit=max&auto=format)Erik Hanchett](/guest/erik-hanchett)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/0J4oP1PfZhbaeoR9M8hHsU)[Apple](https://podcasts.apple.com/us/podcast/code-with-codingcat-dev-next-js-amplified-full-stack/id1491655542?i=1000660707409)[YouTube](https://youtube.com/live/SAF2gP7U5CM?feature=share)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/58dbed48-9479-49d8-a709-b1449712269b)[Castbox](https://castbox.fm/episode/id2508485-id715297536)[Castro](https://castro.fm/episode/WZGGws)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

**Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2 ** is a CodingCat.dev podcast episode featuring Erik Hanchett alongside Alex Patterson focused on AWS, Next.js, TypeScript. AWS Amplify using Gen2, a code first approach. Next.js Amplified: Full-Stack Web & Mobile Apps on AWSAmplify Gen2: Watch the full video breakdown on [**YouTube**](https://youtube.com/live/SAF2gP7U5CM?feature=share) or explore the architectural notes, chapters, and official documentation links below.

GitHub Repo: [https://github.com/CodingCatDev/amplify-gen2-nextjs-code-with-codingcatdev](https://github.com/CodingCatDev/amplify-gen2-nextjs-code-with-codingcatdev)

Welcome back to Code with CodingCat.dev, where we dive into the ever-evolving world of coding with a casual vibe and some purr-fectly thought-out code. Today, we're joined by Eric, a developer advocate from the AWS Amplify team, to unpack the game-changing AWS Amplify Gen2 for building full-stack web and mobile apps. If you're navigating the high seas of the coding cosmos, looking for ways to build more with less and streamline your workflows, get comfy, and let's unravel the mysteries of Amplify Gen2 together.

## Reconnecting at re:Invent

It's always a blast catching up at events like AWS re:Invent, where the community's passion for engineering and advocacy converges. It was especially thrilling for Eric, who, transitioning from UI engineering to developer advocacy, marched into re:Invent with a speaker badge and an eager heart. Post-re:Invent, the wind-down was a chance to deep dive into projects, create fresh content, and especially explore the new frontiers of Amplify Gen2.

## Hobbies, Football, and Taylor Swift

Speaking of depth, besides the tech realm, there's the unbeatable mashup of football and music that stirs our guest Eric's soul. As a devoted San Francisco 49ers fan, the postseason was a rollercoaster ride paired with cheer for global icon Taylor Swift. Every game is a story of triumph and heartbreak, much like our journey as developers, where resilience is the name of the game.

## What is AWS Amplify Gen2?

Amplify Gen2 is all about rethinking app creation. Those familiar with Amplify's CLI and Studio would appreciate the shift toward more code-centric workflows. It's about creating the right abstractions that spice up the developer experience. Take a leap into a .notation and TypeScript-first approach that straightforwardly ties your app to databases and more.

### The Power of TypeScript and Dot Notation

With Amplify Gen2, TypeScript takes center stage, offering streamlined syntax and the intelligence of auto-complete and error-checking to ensure your backend talks smoothly with AppSync and the managed GraphQL service.

Copied! 🐾

```
// Define a model in Amplify Gen2 with TypeScript and dot notationconst model
Name = amplifyModel.defineModel({
	fieldName: Types.String.required(),
	anotherField: Types.Enum(['option1', 'option2']).required()
});
```

Embrace the richness of TypeScript and craft your backend like a maestro orchestrating a symphony.

## Live Coding Session: Meal Planning App

Let’s roll up our virtual sleeves and jump into a live coding session. We’ll embark on crafting a meal planning app. The goal is to create a simple CRUD app with authenticated user access. We start from scratch, initializing a next app and methodically setting up our backend with Amplify Gen2.

### Setting Up the Schema

Our meal planning app will revolve around a schema with items like breakfast, lunch, and dinner alongside their calorie counts. With Gen2, typing out the schema is a breeze, with authenticity checks and comprehensive data modeling features integrated seamlessly.

Copied! 🐾

```
// Sample JSON schema for a simple meal planning app
{ "Meal": { "MealName": "string", "Calories": "number", "Date": "string" } }
```

### Hooks, States, and Server Actions

We delve into creating reactive components using hooks, managing states for meal entries, and carrying out server actions like submissions and deletions. Our components evolve with the interplay of client and server-side logic, leaving us with a fully functional, albeit basic, meal planner by the end of the session.

### Debugging on the Fly

We're all too familiar with the occasional hiccups that pop up when diving into code. Our session is no stranger to these, as we troubleshoot real-time, lending authenticity to the experience. We navigate through issues like unresponsive delete buttons and state retention on refresh, all part of the raw charm of live coding.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/604644967a2a64af57e7fba0b458fb96df02329f-1280x720.png?w=1280&q=82&fit=max&auto=format)

### The Might of Amplify

In our app, Amplify Gen2 flexes its muscles by streamlining DB actions, from data entry to deletions, all the while ensuring security with user authentication. As we rap up the meal planning app, its simplistic CRUD functionality stands testament to Amplify's prowess.

## Wrapping Up and Deployment

Our coding dance comes full circle as we discuss pushing our local wonders to the cloud. With AWS Amplify, deploying is as simple as linking your GitHub repo and letting Amplify's continuous deployment take the wheel.

### Console Wonders

Take a moment to appreciate the ephemeral environments Amplify conjures with each sandbox, a temporary realm where your project breathes before you decide its fate - to flourish in the production environment or vanish into the digital aether.

## What's Next for AWS Amplify Gen2?

As we bid goodbye, remember that this is just the beginning for Amplify Gen2. The horizon is ablaze with potential features like storage and functions, taking the tool's capabilities to new zeniths. Until Amplify sheds its preview cloak, keep experimenting, staying tuned for updates, and, most importantly, keep coding!

If you've been hooked by our coding adventure and are itching for more deep dives into the coding universe with a laid-back touch, check out our plethora of posts, tutorials, and nifty tips over at [CodingCat.dev](https://codingcat.dev). Until next time, stay curious and code on!

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2 Full Video](https://youtube.com/live/SAF2gP7U5CM?feature=share) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- [**Erik Hanchett Guest Profile & Episodes on CodingCat.dev**](/guest/erik-hanchett)
- [**Erik Hanchett on GitHub**](https://github.com/ErikCH)
- [**AWS Documentation & Builder Center:**](https://docs.aws.amazon.com/) Cloud architecture, serverless compute, IAM, and managed services
- [**Next.js Official Documentation:**](https://nextjs.org/docs) App Router, Server Actions, and rendering architecture guides
- [**TypeScript Handbook:**](https://www.typescriptlang.org/docs/) Static type systems, generics, and compiler configuration

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**AWS Amplify vs. AWS CDK What is the most powerful AWS IaC in 2020?**](/post/aws-amplify-vs-aws-cdk-2020): AWS Amplify vs. AWS CDK. So you are just getting started with your next project and can't figure out what IaC to start with, lets compare two of AWS's most popu...
- [**Deploy Angular & Next.js apps with App Hosting, now GA! in Firebase: Web Architecture & Implementation Guide**](/post/firebase-2025-04-apphosting-general-availability): Hands-on web engineering breakdown of "Deploy Angular & Next.js apps with App Hosting, now GA!" (2025-04-09). Learn how to integrate Firebase, Google Cloud, Web...
- [**What's new in Firebase at Cloud Next 2025: Web Architecture & Implementation Guide**](/post/firebase-2025-04-cloud-next-announcements): Hands-on web engineering breakdown of "What's new in Firebase at Cloud Next 2025" (2025-04-09). Learn how to integrate Firebase, Google Cloud, Web Dev, AI in pr...

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2?

AWS Amplify using Gen2, a code first approach. Next.js Amplified: Full-Stack Web & Mobile Apps on AWSAmplify Gen2: Throughout this podcast, Erik Hanchett breaks down real-world implementation details for AWS, Next.js, TypeScript so developers can apply these patterns directly in production.

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

When adopting AWS and Next.js in a production stack, start by validating your configuration against the [**AWS Documentation & Builder Center**](https://docs.aws.amazon.com/) (Cloud architecture, serverless compute, IAM, and managed services). 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 Amplified: Full-Stack Web Apps on AWS Amplify Gen2 walkthrough and find related code resources?

You can watch the complete video session for [**Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2**](https://youtube.com/live/SAF2gP7U5CM?feature=share) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into AWS, check out our related guide: [**AWS Amplify vs. AWS CDK What is the most powerful AWS IaC in 2020?**](/post/aws-amplify-vs-aws-cdk-2020).

## ✏️ Episode Summary

Next.js Amplified: Full-Stack Web & Mobile Apps on AWSAmplify Gen2: I live inside my own world of M believe kids screaming in the Cradle profanities I see the world through ice covered in in and GL cross up the ones this what up perfect PE peeps welcome back to code with Cod and Cat today on the show I have Eric with me what's up Eric hey how's it going how's it going uh I'm doing good I'm doing good happy Wednesday I guess I've been I've been like out of it my uh...

✏️ 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 Amplified: Full-Stack Web Apps on AWS Am…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Next.js Amplified: Full-Stack Web Apps on AWS Amplify Gen2: start with Erik Hanchett, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

## related episodes.

[All Episodes→](/podcasts)[![The Heads of AI wearing black company logo t-shirts and shaking hands in a circular web of cloud and GPU investments](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d1d83d596ce5899d797cd3aaf1bd0142038f282a-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)October 26, 2026[#AI & Agents](/topic/ai)[![](/logos/tags/anthropic-symbol-light.svg)![](/logos/tags/anthropic-symbol-dark.svg)Anthropic](/topic/anthropic)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud)[+4](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)

### [Anthropic's S-1, $518B in cloud commitments, and circular AI capex](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)

Anthropic just filed its Form S-1 for a Nasdaq IPO under ticker ANT, revealing $518B in take-or-pay cloud commitments to Google, AWS, and Microsoft. Here is how Mark Zuckerberg, Elon Musk, Jensen Huang, Sundar Pichai, Satya Nadella, Tim Cook, and Dario Amodei built a circular revenue machine, and what happens to your S&P 500 ETF if it stalls.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Sanity Knowledge Bases](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/38b0f021c51d97043c8a1ebf31d505a0ea877b7c-2752x1536.jpg?w=1920&q=82&fit=max&auto=format)](/post/sanity-knowledge-bases)October 17, 2026[![](/logos/tags/mcp-symbol-light.svg)![](/logos/tags/mcp-symbol-dark.svg)MCP](/topic/mcp)[#AI & Agents](/topic/ai)[![](/logos/sanity/Sanity-Symbol--black_on_transparent.svg)![](/logos/sanity/Sanity-Symbol--white_on_transparent.svg)Sanity](/topic/sanity)[+5](/post/sanity-knowledge-bases)

### [Sanity Knowledge Bases](/post/sanity-knowledge-bases)

Eliminate query-time guessing in your AI agents. Learn how Sanity Context Knowledge Bases compile structured datasets, crawled documentation websites, and uploaded files ahead of time, resolve conflicting facts, and serve a compact outline over Context MCP.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)