AWS Amplify + Next JS Tutorial ⭐ (SSR, Authentication, GraphQL, Storage... and MORE!)

The ULTIMATE AWS Amplify Next JS Tutorial! Learn How To Implement AWS Amplify Authentication, GraphQL API, Storage, and MORE With Next JS! Using The Latest Next JS Features Like SSR (Server-Side Rendering, SSG (Static Site Regeneration), and ISR (Incremental Site Regeneration).

👇 Grab the source code here! (Please consider starring the repo!) 👇
https://github.com/jarrodwatts/reddit-clone

Throughout this video, we'll build a fully functional Reddit clone project, using AWS Amplify and Next.JS. We will implement AWS Amplify Authentication, GraphQL API, and Storage to host images.

To Build The AWS Amplify Next JS Project, we will use the following technologies:
- Next JS : https://nextjs.org/
- AWS Amplify: https://aws.amazon.com/amplify/
- Material UI: https://material-ui.com/
- TypeScript: https://www.typescriptlang.org/

We’ll Create A Reddit Clone, including features like:
- Authentication using Amazon Cognito
- Database using DynamoDB
- GraphQL API using Amazon AppSync
- Storage for images using S3 Buckets
- AWS Amplify SSR using withSSRContext
- Next JS version 10+
- Static Site Generation,
- Incremental Static Regeneration
- Server-side Rendering
- Next JS Image Component
Check Out My Other Social Channels!:
TWITTER: https://twitter.com/JarrodWattsDev
WEBSITE: https://jarrodwatts.com
GITHUB: https://github.com/jarrodwatts
BLOG: https://blog.jarrodwatts.com

SUPPORT ME:
Buy Me A Coffee: https://www.buymeacoffee.com/jarrodwatts
Sponsor My Blog: https://blog.jarrodwatts.com/sponsor

Chapters:
0:00 - Introduction
1:59 - Next.JS Get Started
3:50 - TypeScript Setup
5:02 - Project Cleanup
5:47 - ESLint & Prettier
15:07 - Material UI Setup
22:41 - AWS Amplify CLI Setup
26:48 - Setting Up The Theme
30:00 - How To Copy Other Sites Design
34:14 - Git
36:24 - AWS Amplify GraphQL API
52:20 - AWS Amplify Authentication
1:18:30 - AWS Amplify Authentication Context
1:28:31 - Authentication Forms Continued
1:45:37 - AWS Amplify GraphQL Playground
1:51:08 - Get Data On The Frontend
1:53:29 - Next JS Data Fetching Explained
2:00:57 - Fetching Data Client Side
2:09:13 - Creating Posts UI
2:31:13 - Update GraphQL Schema
2:37:54 - Displaying Post Upvotes
2:43:04 - How To Create Helper Functions
2:47:13 - Formatting Date Values
2:49:00 - Updating Posts UI
2:53:09 - Next JS Image Component
3:01:00 - Small Styling Adjustments
3:02:04 - Individual Post Pages
3:03:45 - Next JS Dynamic Routes
3:05:25 - Static Site Generation (SSG)
3:08:35 - Server-Side GraphQL Requests
3:19:50 - Next JS Fallback Explained
3:24:09 - Individual Post UI
3:35:50 - Header Component
3:48:54 - Creating New Posts
3:57:55 - Upload Images Via Form
4:18:00 - AWS Amplify Storage (images)
4:49:23 - Creating Comments
5:03:10 - Creating Votes (And Bugs)
5:46:26 - AWS Amplify Codegen
5:50:10 - Deployment
5:56:30 - Incremental Static Regeneration (ISR)
6:04:40 - Outro - Subscribe!

Видео AWS Amplify + Next JS Tutorial ⭐ (SSR, Authentication, GraphQL, Storage... and MORE!) канала Jarrod Watts