Learn how to add authentication with Next.js. The guide covers custom React Hooks, protecting routes and redirecting on the server, and includes a variety of examples.

Authentication Patterns for Next.js

In part two we will build out the frontend of our GraphQL Resume. First we set up the Apollo Client, then fetch and display the data that comes back from our GraphQL API. Lastly we add Prism Code Highlighter to show display the GraphQL query which retrieved the data we are displaying.

Special thanks to AppSignal for partnering with me on this content! Please check them out at https://www.appsignal.com/nodejs and use the coupon code "leigh" for 10% off your first year. It's free to try out for a month!

Join me on Discord! https://discord.gg/wcSNwfu
Source code: https://github.com/leighhalliday/graphql-resume
Deployed version: https://graphql-resume.vercel.app/
Part One: https://youtu.be/_HOp7hBEjp8

00:00 Introduction
01:00 AppSignal
01:55 Apollo Client setup
12:05 useQuery Hook
17:48 Displaying content
34:00 Prism Code Highlighter

Build your own GraphQL Resume with Next.js, Apollo Client, and Prism Code Highlighter. Part 2 / 2.

In this video, we'll take a look at how to easily add TypeScript to our NextJS application. This method will work for both a brand new as well as an existing NextJS application. If you're not familiar with TypeScript, I'd highly encourage you to learn about it at typescriptlang.org.

How to Add TypeScript to your Next.js Application

Incremental Static Regeneration brings the best of Static Site Generation (SSG) and Server Side Rendering (SSR) to NextJS. The feature allows you to update static content after you have already built your site, meaning your users get a blazing fast experience and the latest data. In this video, you'll learn how to enable and work with incremental static regeneration.

NextJS Incremental Static Generation and Regeneration Explained

In this video we will use a code-first approach to building a GraphQL API. This means that the code we write will generate the GraphQL schema as an artifact rather than something we have to maintain ourselves. We'll be building our own GraphQL resume API in Next.js, Apollo Server, Nexus Schema, and TypeScript. Follow along and try making changes by adding your own data.

Special thanks to AppSignal for partnering with me on this content! Please check them out at https://www.appsignal.com/nodejs and use the coupon code "leigh" for 10% off your first year. It's free to try out for a month!

Join me on Discord! https://discord.gg/wcSNwfu
Source code: https://github.com/leighhalliday/graphql-resume
Deployed version: https://graphql-resume.vercel.app/
Part Two: https://youtu.be/ZFTRyuLwqdQ

00:00 Introduction
02:40 AppSignal
03:40 Creating Apollo Server
09:00 Creating Schema with Nexus
12:00 Defining Query Type
18:00 Creating Bio Type
22:30 Custom Scalars
24:00 Generating Schema and Types
34:40 Creating Position Type
47:20 Review

Build your own GraphQL Resume with Next.js, Apollo Server, and Nexus Schema. Part 1 / 2.

Detailed instructions on how to use Tailwind in a Next.js app

Use Tailwind with Next.js – Andreas Keller

In this video we'll learn how to add TailwindCSS to a NextJS Application, we'll cover installing Tailwind, setting up PostCSS, enabling purging and more.

Thanks for watching!

How to Add TailwindCSS to a NextJS Application

Learn how to use the YouTube API in a React app and request all videos from a playlist and display them on a page with Next.js. We'll walk through setting up an API key and getting the YouTube API set up in the Google Developer Console then use Next.js to spin up a new app and render the video thumbnails with links on the page.

🗒️ Original Post
Coming soon!

🔔 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

Next.js
https://nextjs.org/

YouTube API
https://developers.google.com/youtube

🎼 Music
X Ray Vision by Slynk
youtube.com/audiolibrary

How to Use the YouTube API in React to Add a Playlist to a Next.js App

Next.js Tutorials

New month new course! Let's start with Next.js - a SSR rendering framework for React applications. It is THE hot thing right now. Want to learn it quickly? Sign up at https://codedamn.com and I'll notify you :D

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

[NEW Course] - Next.js Mastery - Kickstart

In this tutorial, we'll understand the course structure and what we'll be doing throughout this web course.
Full path: https://codedamn.com/learning-paths/nextjs-mastery
YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Next.js Introduction: Master Next.js Tutorial #1

Learn why Next.js as a technology is a great choice. Next js is a Server Side Rendering framework for React and Node. and it makes sites perform super well!

Full path: https://codedamn.com/learning-paths/nextjs-mastery
YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Why learn Next.js: Master Next.js Tutorial #2

Learn how to install Next.js and setup Next.js development environment on your systems.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Installing Next.js - Master Next.js Tutorial #3

Learn about public and pages folder in Next.js and how to work with them.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE
------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Next.js File Structure Explained: Master Next.js Tutorial #4

Learn about pages folder in next.js and how they help to create individual pages on your website with Next js

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Pages in Next.js explained: Master Next.js Tutorial #5

Learn about _document.js / _document.tsx file in Next.js, what it can do and how you can work with it.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE
------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

_document.js in Next.js: Master Next.js Tutorial #6

Learn about _app.js / _app.tsx file in Next.js, what it can do and how you can work with it.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE
------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

_app.js file in Next.js: Master Next.js Tutorial #7

Learn about styles in Next.js in the upcoming section of videos

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE
------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Style Section Introduction: Master Next.js Tutorial #8

Learn about using styled JSX in Next.js to add CSS to your components. We'll also learn about global styles using styled JSX in this video.

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Styled JSX in Next.js: Master Next.js Tutorial #9

Learn about using global styles in Next.js using _app.tsx file.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE
------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Global styles in Next.js: Master Next.js Tutorial #10

Learn how you can make use of CSS modules in Next.js and work with them.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

CSS Modules in Next.js: Master Next.js Tutorial #11

Learn about using Sass modules with Next.js and how to implement them in your Next js application

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Sass Modules in Next.js: Master Next.js Tutorial #12

Learn about organizing pages in next.js and how to place styles with React logic in Next js app

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Organizing Pages: Master Next.js Tutorial #14

Learn about creating APIs in Next.js in the further videos. This is an introduction video to the section.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

API section introduction: Master Next.js Tutorial #14

Learn about creating APIs using Next.js without a custom server. We'll use Next js to create API functions and use them in our application.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

Creating APIs with Next.js: Master Next.js Tutorial #15

Learn more about Next.js API - req and res objects and how to make use of them with TypeScript types.

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

More on APIs in Next.js: Master Next.js Tutorial #16

Learn about implementing a simple JWT based authentication with Next.js and Next.js APIs using Node and React.

Full Next.js learning path: https://codedamn.com/learning-paths/nextjs-mastery
Next.js YouTube course: https://www.youtube.com/playlist?list=PLYxzS__5yYQmpzsVeR7-KnX2li19KZhxE

------------
Don't forget to subscribe and like the video if you enjoyed :)
Be a damner, join the coding community: https://codedamn.com

JWT + Next.js Authentication Demo: Master Next.js Tutorial #17

In this video we add Google's reCAPTCHA to our React User Registration Form and validate the token server side in Node (Next.js API Route).

Special thanks to AppSignal for partnering with me on this content! Please check them out at https://www.appsignal.com/nodejs and use the coupon code "leigh" for 10% off your first year. It's free to try out for a month!

00:00 Introduction to reCAPTCHA
03:25 AppSignal
04:40 reCAPTCHA in React
09:45 reCAPTCHA in Node

Join me on Discord! https://discord.gg/wcSNwfu
reCAPTCHA: https://www.google.com/recaptcha/about/
Source Code: https://github.com/leighhalliday/react-hook-form-demo

Authentication Patterns for Next.js (leerob.io)

Build your own GraphQL Resume with Next.js, Apollo Client, and Prism Code Highlighter. Part 2 / 2.

How to Add TypeScript to your Next.js Application

NextJS Incremental Static Generation and Regeneration Explained

Build your own GraphQL Resume with Next.js, Apollo Server, and Nexus Schema. Part 1 / 2.

Use Tailwind with Next.js – Andreas Keller (andreaskeller.name)

How to Add TailwindCSS to a NextJS Application

How to Use the YouTube API in React to Add a Playlist to a Next.js App

Next.js Tutorials August 3rd, 2020

[NEW Course] - Next.js Mastery - Kickstart

Next.js Introduction: Master Next.js Tutorial #1

Why learn Next.js: Master Next.js Tutorial #2

Installing Next.js - Master Next.js Tutorial #3

Next.js File Structure Explained: Master Next.js ...

Pages in Next.js explained: Master Next.js ...

_document.js in Next.js: Master Next.js Tutorial ...

_app.js file in Next.js: Master Next.js Tutorial ...

Style Section Introduction: Master Next.js ...

Styled JSX in Next.js: Master Next.js Tutorial #9

Global styles in Next.js: Master Next.js ...

CSS Modules in Next.js: Master Next.js Tutorial ...

Sass Modules in Next.js: Master Next.js Tutorial ...

Organizing Pages: Master Next.js Tutorial #14

API section introduction: Master Next.js ...

Creating APIs with Next.js: Master Next.js ...

More on APIs in Next.js: Master Next.js Tutorial ...

JWT + Next.js Authentication Demo: Master ...

Using reCAPTCHA in React and Node