In this video I’m going to show you how to setup Passwordless Sign In with NextAuth.js and SendGrid in a Next.js application.
➥ Repo: https://gitlab.com/pragmaticreviews/next.js-jobs-app/-/tree/nextauth-passwordless
➥ Buy Me a Coffee: https://buymeacoff.ee/pragmatic

➥➥ Learn even more! ➥➥
Learn Next.js ➥ https://bit.ly/PragmaticNext
Learn Contentful ➥ https://bit.ly/PragmaticContentful
Learn Strapi ➥ http://bit.ly/PragmaticStrapi
Learn Gatsby ➥ https://bit.ly/PragmaticGatsby
Learn Deno ➥ https://bit.ly/LearnDeno
Learn GraphQL ➥ https://bit.ly/LearnGraphQL
Golang in the Cloud ➥ https://bit.ly/LearnGolangCloud
Gin Crash Course ➥ http://bit.ly/2SXdJu2
Golang Crash Course ➥ http://bit.ly/39ZH8dy
Zapier Crash Course ➥ http://bit.ly/37q1BGt

Timestamps:

Intro - 0:00
NextAuth.js Passwordless Provider setup - 1:29
SendGrid SMTP server setup - 7:38
MongoDB setup to store session tokens and users - 9:16
Setting up Sign In and Sign Out sections (useSession React Hook) - 11:25
Testing the NextAuth.js Passwordless Sign In functionality - 17:28
Verifying NextAuth session tokens in cookies and MongoDB - 19:20
Outro - 19:54

#Next #NextAuth #SendGrid

Next.js | Passwordless Sign In with NextAuth.js and SendGrid

In this video, I show you how to create a Quiz Application that allows you to:

- Authenticate Users, Create Private Routes.
- Create Postgres tables , and SQL functions, which you can expose to GraphQL.
- Take the quiz (but only the ones you didn't create)
- Create new questions

-----
Looking to use Nhost? Check them out at 

https://nhost.io/ 
https://docs.nhost.io/
https://nhost.io/pricing
-----
Need the ChakraUI Install command?

https://chakra-ui.com/docs/getting-started 

------
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
👉  Discord : https://discord.gg/dqYP9Mc
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--

00:00 - Introduction
00:53 - Nhost setup 
02:02 - Nhost Auth Setup
06:15 - NextJs Setup.
08:23 - Setting up Auth and Storage
11:59 - Adding Nhost to _app.js
16:36 - Creating our Signup Page.
37:36 - Testing our Signup Page.
39:34 - Creating a Login Page. 
42:13 - Testing the Login Page.
43:13 - Using Hasura.
44:26 - Creating out questions table.
47:59 - Creating our questions answers table.
50:38 - Create users answers tables. 
54:10 - Creating a function using SQL.
57:49 - Create our PrivateRoute Component.
1:00:39 - Creating our create page.
1:18:02 - Creating our first mutation 
1:21:52 - Adding our mutation to our code.
1:27:14 - Testing our first insert
1:28:37 - Resetting the form 
1:30:10 - Creating the Quiz 
1:34:46 - Using our unanswered questions
1:43:23 - Creating a Question Component
1:53:17 - Creating our answer question mutation
1:54:55 - Using the mutation in our code.
1:59:00 - Creating Results Component
2:03:50 - Creating our Restart Quiz mutation
2:07:12 - Create our No questions component.
2:10:42 - Testing the quiz
2:12:00 - Adding Logout
2:13:38 - Creating our Home Page.
2:18:57 - Outro

Quiz Crash Course with NextJS and Nhost.io

Join me as I explain the source code behind leerob.io and answer any questions about Next.js / React / MDX / Tailwind along the way.

Code Walkthrough for Next.js / React / MDX / Tailwind Application

In this video we will look at the fundamentals of Next.js such as SSR & SSG, routing, data fetching, apis and more

Code:
https://github.com/bradtraversy/next-crash-course

Find a list of my latest Udemy courses at:
https://traversymedia.com

💖  Support The Channel!
http://www.patreon.com/traversymedia

Next.js Website: 
https://nextjs.org/

Timestamps:
0:00 - Intro & Slides
6:52 - Getting Setup with create-next-app
8:23 - Files & Folders
11:37 - Pages & Routing
13:14 - Head
16:05 - Layouts & CSS Modules
20:56 - Nav Component & Link
23:34 - Create a Header
25:05 - Styled JSX
27:46 - Custom Document
31:16 - Data Fetching
32:02 - getStaticProps()
33:58 - Showing Data
40:15 - Nested Routing
42:46 - getServerSideProps()
46:00 - getStaticPaths()
49:47 - Export a Static Website
53:18 - API Routes
59:24 - Using the API Data
1:03:48 - Custom Meta Component

Next.js Crash Course 2021

https://courses.leighhalliday.com/next-level-next-js

I promise this will be my one and only promo video for my course. Sorry for the shameless self promotion. Back to tutorials later on this week!

Cost? $50 but refer to Purchase Price Parity below if this is prohibitive.

What technologies do we cover?
- Apollo Client & Apollo Server
- Mutations/Queries with TypeGraphQL
- Databases with Prisma and Postgres
- Styling with Tailwind
- Authentication with Firebase Auth
- Images in React using Cloudinary
- Maps with Mapbox
- Integrating Google Places
- Building forms with validation using react hook form
- Deploying an app to Vercel
- How environment variables work
- Next.js... in depth! Head, Link, server side hooks, serverless functions, etc...

How long is the course? 29 videos, 8+ hours of content

What do we build? This app! https://house-course.leighhalliday.vercel.app/

Who is this for?
- Anyone with a little bit of React experience. If you've used state and props, you're good to go
- Frontend pros who want to learn about the backend
- Backend pros who want to learn about the frontend
- Developers looking to build a complete app

Purchase Power Parity? 
Is the cost prohibitive? Send me a message on the course page or on Twitter (https://twitter.com/leighchalliday), let me know where you're from, and I'll give you a coupon code. Sorry this isn't built in to the platform... I'm on Podia and they don't seem to have it.

More questions? Ask me on Discord: https://discord.gg/wcSNwfu

https://courses.leighhalliday.com/next-level-next-js

Shameless Self Promotion: Next Level Next.js, My New Course!

Hey gang, in this Next.js tutorial you'll learn Next from the ground up to create a website & deploy it to Vercel.

Next.js Tutorial for Beginners

Hey gang, in this Next.js tutorial series you'll learn how to create a website with Next (& React) - including pages, routes, layouts, fetching data & deployment.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/

Next docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #1 - Introduction & Setup

Hey gang, in this Next.js tutorial we'll take a look at how pages & routes are created using React components.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #2 - Pages & Routes

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #3 - Adding Other Components

Hey gang, in this Next js tutorial we'll see how we can link between pages using the Link component.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #4 - Linking Between Pages

Hey gang, in this Next.js tutorial we'll see how to reate a layout component (navbar and footer) which can wrap our page content. 

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #5 - Creating a Layout Component

Hey gang, in this Next.js tutorial we'll see how to add global styles & also CSS modules to our Next project.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #6 - Adding Styles

Next.js Tutorial #7 - Custom 404 Page

Hey gang, in this Next.js tutorial we'll learn how to use the useRoutr hook to redirect users from one page to another.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #8 - Redirecting Users

In this Next.js tutorial I'll show you how to use the Image component in Next & also how to use the Head component to add titles and metadata to your pages.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #9 - Images & Metadata

Hey gang, in this Next.js tutorial we'll use the getStaticProps function to reach out and fetch some data which we can then inject into our page components.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #10 - Fetching Data (getStaticProps)

Hey gang, in this Next.js tutorial we'll see how to use route parameters.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #11 - Dynamic Routes (part 1)

Hey gang, in this Next.js tutorial we'll see how to use the getStaticPaths function to generate pages for each of our dynamic routes.

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #12 - Dynamic Routes (part 2 - getStaticPaths)

Next.js Tutorial #13 - Fetching a Single Item

Hey gang, in this Next.js tutorial we'll see how we can deploy the Next.js application the web using vercel - https://vercel.com/

🐱‍💻 🐱‍💻 Course Files:
+ https://github.com/iamshaunjp/nextjs-tutorial

🐱‍👤🐱‍👤 JOIN THE GANG - 
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join

🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS  & Firebase - https://www.thenetninja.co.uk/udemy/vue-and-firebase
+ D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase

🐱‍💻 🐱‍💻 Helpful Links:
+ Full React Course - https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
+ HTML & CSS Course - https://www.youtube.com/watch?v=hu-q2zYwEYs&list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6G
+ Modern JavaScript course - https://www.youtube.com/watch?v=iWOYAxlnaww&list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc
+ Get VS Code - https://code.visualstudio.com/
+ Next.js docs - https://nextjs.org/docs/getting-started

🐱‍💻 🐱‍💻 Social Links:
Facebook - https://www.facebook.com/thenetninjauk
Twitter - https://twitter.com/thenetninjauk
Instagram - https://www.instagram.com/thenetninja/

Next.js Tutorial #14 - Deploying to Vercel

In this short video I show how to deploy a Next.js app to AWS using a custom domain name, leveraging the Serverless Next.js component.

Code:
https://gist.github.com/dabit3/b235ca80671f3841a6fa4286dc418e15

Component
https://github.com/serverless-nextjs/serverless-next.js

Supported features:
https://github.com/serverless-nextjs/serverless-next.js#features

Deploying Next.js to AWS Using a Custom Domain Name

We'll start from scratch, creating a new Next.js app. We'll then, step by step, use the Amplify CLI to build out and configure our cloud infrastructure and then use the Amplify JS Libraries to connect the Next.js app to the APIs we create using the CLI.

The app will be a multi-user blogging platform with a markdown editor. When you think of many types of applications like Instagram, Twitter, or Facebook, they consist of a list of items and often the ability to drill down into a single item view. The app we will be building will be very similar to this, displaying a list of posts with data like the title, content, and author of the post.

Workshop material: https://github.com/dabit3/next.js-amplify-workshop

0:00 – Introduction
1:50 – Project setup
11:00 - Testing the API (AWS AppSync)
12:30 - Rendering posts in Next.js
17:50 - Adding authentication (Amazon Cognito)
18:43 - Adding a profile view
26:28 - Enabling API authorization
31:00 - Adding a form for creating posts
44:43 - Querying for signed in user's post
52:13 - Editing and deleting posts
1:02:00 - Adding a cover image (Amazon S3)
1:16:00 - Conclusion

Hands on Workshop - Building a Multi-user Blogging Platform with Next.js, Tailwind, and AWS

In this video we tackle how to create a custom login page for Next-auth. 

You can find all the other pages you can customize here: 

https://next-auth.js.org/configuration/pages

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
👉  Discord : https://discord.gg/dqYP9Mc
--- 
Need 1:1 mentoring? 
Want to Donate?
Want to do business?
https://snugg.me/snuggery/?id=AGZ8lAig7uf1zXobyhw0jfuXA6Q2 
--

Create your own next-auth Login Pages

Building a basic Linktree clone seems rather simple which is perfect for showcasing a bunch of technologies and how they work together. Strapi, GraphQL and Next.js are the main building blocks for this project while Tailwind and GraphQL Codegen help with efficiency and developer experience.

Check out my blog post about this project: https://codingcastle.dev/blog/linktree-clone

Code: https://github.com/patrickgoeler/linktree-clone

Timeline:
00:00 Introduction
00:59 Setup & Strapi Installation
04:16 Button Entity Setup
07:12 Next.js Installation
08:33 Apollo Client Setup
13:39 GraphQL Code Generator
20:00 Tailwindcss
23:05 Adding The Username Page
25:07 GetStaticPaths & GetStaticProps
34:59 Building the UI
51:09 Outro

Twitter: https://twitter.com/coding_castle
Instagram: https://www.instagram.com/codingcastle/