Prisma is an open source, next-generation ORM and database toolkit for JavaScript and TypeScript. It’s the easiest way to work with a database in Next.js.

Find out more at https://www.prisma.io

Prisma - The Easiest Way to Work with a Database in Next.js

Learn how to use GitHub Actions to host and deploy a static Next.js React web app to AWS S3. We'll walk through:
- Creating a new Next.js app from scratch
- Configuring a Next.js app for static export
- Creating a bucket in S3 and configure Access Keys
- Using a GitHub action to automatically deploy changes from our main branch

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-use-github-actions-to-deploy-a-next-js-website-to-aws-s3/

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

GitHub Actions
https://github.com/features/actions

Configure AWS Credentials GitHub Action
https://github.com/marketplace/actions/configure-aws-credentials-action-for-github-actions

AWS Docs: How do I configure an S3 bucket for static website hosting?
https://docs.aws.amazon.com/AmazonS3/latest/user-guide/static-website-hosting.html

How to Host a Static Website on AWS S3 and CloudFront
https://www.youtube.com/watch?v=1lDGDzmbQWg

How to Use Github Actions to Automate Tests and Slack Notifications
https://www.youtube.com/watch?v=1n-jHHNSoTw

Create a New Github Action to Automate Code Tasks with Javascript
https://egghead.io/playlists/create-a-new-github-action-to-automate-code-tasks-with-javascript-f1e9?af=atzgap

🎼 Music
Staycation by Corbyn Kites
YouTube Audio Library

Use Github Actions to Automatically Deploy a Static Site  - Next.js & AWS S3

Vercel just released version Next.js 10, which features a brand new image component and automatic image optimization, which we cover in this video!

📱 Discord server:
https://devascend.com/d/discord

💡 Have a video request?
Suggest it in the Dev Ascend Discord community server or leave it in the comments below!

🕐 Timestamps:
00:00 Introduction

#nextjs #react #devascend

What's New in Next.js 10 - Image Component & Automatic Image Optimization

Next.js 10 introduces Built-in Image Optimization, Internationalized Routing, Next.js Analytics, React 17 Support, and more!

Next.js 10

Tutorial on how to connect Next.js with Google Sheets

Use Google Sheets as a CMS for your Next.js blog

Next.js is a React framework that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel.

Getting Started With Next.js — Smashing Magazine

Learn how to use Chakra UI in a Next.js React app. We'll walk through installing chakra UI in a new Next.js app, configuring the application with the Chakra ThemeProvider, and importing components to use throughout the app. We'll also see how we can take advantage of style props to customize components and make components responsive.

🗒️ Original Post
https://www.freecodecamp.org/news/how-to-use-chakra-ui-with-next-js-and-react/

🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?sub_confirmation=1

🐦 Get updates straight to your Twitter @colbyfayock
https://twitter.com/colbyfayock

✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/

💝 Sponsor me for more free content like this!
https://github.com/sponsors/colbyfayock

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/what-i-use

🧰 More Resources

Chakra UI
https://chakra-ui.com/

Next.js
https://nextjs.org/

🎼 Music
Above Planets by Patrick Patrikios
YouTube Audio Library

How to Use Chakra UI with Next.js and React

In less than one hour you are going to learn how to integrate Firebase Auth with NextJS. 

00:00 - Introduction
00:25 - Setup Firebase Client
03:39 - Setup Firebase Admin
04:37 - Adding our dependencies 
06:49 - Creating firebaseClient
08:03 - Creating our firebase Admin
10:30 - Creating AuthContext Provider
16:00 - Creating a custom _app.js
17:44 - A Custom Container using Flex.
19:05 - Fleshing out our index.js
25:31 - Testing our conditional rendering works
25:44 - Creating a login page.
36:05 - Testing our login page.
37:04 - Creating an authenticated route
44:13 - Testing the entire flow.
45:46 - Outro

Make sure to subscribe!
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--
Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr

NextJS Firebase Auth Crash Course

In this video we'll start from scratch to build out authentication in a brand new Next.js project to implement client, server, and API route authentication using AWS Amplify and Amazon Cognito.

Client & SSR Authentication with Next.js in Less than 7 Minutes from Scratch

Want to learn how to use Fauna with NextJS? This crash course covers:

1. Creating a Database.
2. Reading on the data from the database.
3. Creating a form and updating our database.

Complete example here:https://github.com/perkinsjr/fauna-with-next

00:00 - Intro 
00:38 - What is Fauna and the history
03:30 - Creating our first Database
04:50 - Our NextJS app and installing Fauna client
06:30 - Creating our secret for Fauna
07:40 - Creating our first serverless function 
12:19 - Adding the state, useEffect to our application
15:25 - Testing our serverless function.
16:05 - Adding Chakra-UI
17:35 - Creating our heading
20:44 - Creating a CustomerData Component
24:05 -  Using our CustomerData Component
26:48 - Testing our data is shown.
27:40 - Creating our AddCustomer serverless function
33:22 - Creating our New Customer Form.
35:47 - Using Object Freeze to create initial form data.
36:40 - Adding more state handling.
46:26 - Creating our addCustomer function.
48:10 - Final testing
48:50 - Outro

--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--
Follow me on:
📃 Website/Blog: https://jamesperkins.io
👉 Twitter: https://twitter.com/james_r_perkins
👉 Linkedin: https://www.linkedin.com/in/james-perkins-268992a4
👉 Github: https://github.com/perkinsjr

Prisma - The Easiest Way to Work with a Database in Next.js

Use Github Actions to Automatically Deploy a Static Site - Next.js & AWS S3

What's New in Next.js 10 - Image Component & Automatic Image Optimization

Next.js 10 (nextjs.org)

Use Google Sheets as a CMS for your Next.js blog (andreaskeller.name)

Getting Started With Next.js — Smashing Magazine (www.smashingmagazine.com)

How to Use Chakra UI with Next.js and React

NextJS Firebase Auth Crash Course

Client & SSR Authentication with Next.js in Less than 7 Minutes from Scratch

NEXTJS + FAUNA CRASH COURSE - Learn the basics in under 1 hour.