Let's see how to use URQL and set it up to handle SSR and SSG inside of Next.js. URQL is a lightweight replacement for Apollo Client that handles most of what you typically use Apollo for, in a very similar fashion.

---------- Course

Want to go deeper with Next.js? Join me in my Next Level Next.js course where over 29 videos and 8 hours of content we'll build a full application from start to finish. We use TypeScript, GraphQL, Prisma, Apollo, Mapbox, Firebase and lots more. https://courses.leighhalliday.com/next-level-next-js

---------- Links

URQL - https://formidable.com/open-source/urql/
Source Code - https://github.com/leighhalliday/urql-demo
Starting Code - https://github.com/leighhalliday/urql-demo/tree/363fc18db7ee8774ec61f369ca07f0fff97d9a53

---------- Connect

Join this channel - https://www.youtube.com/channel/UCWPY8W-FAZ2HdDiJp2RC_sQ/join
Join me on Discord - https://discord.gg/wcSNwfu

---------- Timeline

00:00 - Introduction
01:50 - Setting up URQL client
05:00 - Adding URQL Provider
05:45 - URQL's useQuery hook
09:30 - SSR with URQL in Next.js
15:45 - SSG with URQL in Next.js
19:45 - Conclusion

Can URQL replace Apollo Client? URQL tutorial with SSR and SSG in under 20 minutes using Next.js

Learn how to add passwordless email authentication using NextAuth.js to your Next.js app

Passwordless email authentication with Next.js using NextAuth.js

Our co-founder Charles and CEO François explore Next.js with our good friend Colby Fayock.

On the menu:
0:00 Ramblings and a way too long intro
7:31 What is Next.js?
20:59 How does it compare to Gatsby?
20:19 How does it work?
29:03 Q&A

SPA SEO: https://snipcart.com/spa-seo

Subscribe to our Youtube channel to get video content updates and more Snipcart tutorials!

You can also subscribe to our newsletter to be notified about our next event: http://bit.ly/2R0SXJg

Or follow us on: 

Twitter: https://twitter.com/snipcart
Facebook: https://facebook.com/Snipcart/

Thoughts, questions? Drop a comment below!
---
Follow Colby Fayock on Twitter: https://twitter.com/colbyfayock
His course on egghead.io: https://egghead.io/courses/create-an-ecommerce-store-with-next-js-and-stripe-checkout-562c

Snipcart & Friends Present: WTF is Next.js

Want to learn how to easily add authentication to your Next.js applications? In this video, we will use the new Auth0 Nextjs library for adding authentication, protecting routes and pages, adding authorization, and more. 

This will be a continuation of part 1 where we built a snippets app with Nextjs, Fauna, Tailwind CSS, React Hook Form, and SWR!

Watch Part 1 - https://youtu.be/1GpbdX8aJCU
Source Code - http://bit.ly/nextjscrashcourse
Sign up for Fauna for Free - https://bit.ly/jqqfauna
Sign up for Auth0 for Free - https://bit.ly/jqqauth0

00:00 - Intro
00:26 - What We'll Cover
01:30 - Getting Started
03:25 - Setup Auth0 In Nextjs
10:25 - Add Login/Logout
24:00 - Authentication for Creating Snippets
29:00 - Authentication for Updating/Deleting Snippets
33:30 - Authorization for Updating/Deleting Snippets
44:30 - Add My Snippets Page
_____________________________________________

STAY IN TOUCH 👋
Newsletter 🗞 - https://www.jamesqquick.com/newsletter
Live streams on Twitch 🖥️ - https://twitch.tv/jamesqquick
Follow me on Twitter 🐦 - https://www.twitter.com/jamesqquick

QUESTIONS...?
Join the Discord Server 💬 - https://discord.gg/vM2bagU

Want to know what hardware and software I use? https://www.jamesqquick.com/uses

Learn Web Development 📖  - https://www.jamesqquick.com/courses

Authentication with Nextjs, Fauna, and Auth0 - Nextjs Crash Course Part 2

Join the Discord:  https://discord.gg/dqYP9Mc

Join this channel to get access to perks:
https://www.youtube.com/channel/UC-zet8Eyyy-OUE_fmocp3Wg/join

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 
--

NextJS and WordPress Headless CMS Crash Course.

This post walks you through the creation of a realtime chat application with Next.js and deploying it to Vercel.

Building a realtime chat app with Next.js and Vercel 

Fetching data in React is more than just a useEffect hook. In this video you will learn how to use the useSWR library for remote data fetching and much more.

useSWR works with three steps: First, it returns the data from the cache, then sends the fetch request, and finally comes with the up-to-date data. All of this is handled for you automatically, and you can trust you components will get a stream of data updates constantly and automatically.

It supports great features like interval polling, focus on revalidation, scroll position recovery, request deduplication, and much more. Plus, useSWR helps with:

- Keeping the data consistent among all instances
- Avoiding multiple requests in every component that needs the same data
- Keeping state in sync and avoiding subsequent request that may override each other

⏰ TIMESTAMPS ⏰

What is useSWR: 0:00

Before useSWR 1:44

After useSWR: 5:01

🔗 HELPFUL RESOURCES 🔗

useSWR Documentation: https://swr.vercel.app/

An Introduction To SWR: React Hooks For Remote Data Fetching: https://www.smashingmagazine.com/2020/06/introduction-swr-react-hooks-remote-data-fetching/

Caching clash: useSWR() vs. react-query: https://blog.logrocket.com/caching-clash-useswr-vs-react-query/

Why You Should Use React Query or SWR: https://labs.thisdot.co/blog/why-you-should-use-react-query-or-swr

👋 FOLLOW US 👋

Instagram: https://instagram.com/skillthrive/

#React #WebDev #JavaScript

The Best Way to Fetch Data in React with useSWR

In this video I’m going to show you how to quickly setup a GitHub Sign-in button for our Next.js application using NextAuth.js.
➥ Repo: https://gitlab.com/pragmaticreviews/next.js-jobs-app/-/tree/nextauth-github
➥ 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: GitHub Provider setup - 0:36
GitHub Application setup - 1:50
Testing GitHub Sign In using NextAuth.js - 3:55
Allowing public access to GitHub user’s email - 5:20
Outro - 7:00

#Next #NextAuth #GitHub

NextAuth.js | Quick and easy GitHub Sign-in button for Next.js apps

Well, well, well, look what we have here! A 3 part series on how to build a blog with Next.js and TailwindCSS!

This is part 2 which is all about styling our blog with Tailwind!!

Part 3 is about how to make Next.js render Markdown with Tailwind's Typography plugin!

Repo: https://github.com/hswolff/blog-with-nextjs-and-tailwind

0:00 Intro
0:44 Install Tailwind
5:38 Layout and Header Styling
11:00 Styling all anchor tags
13:05 Title style tweaks
14:17 Extract BlogItem into component
15:32 Style BlogItem
17:57 Install date-fns
21:07 Hover effects
23:53 Style individual blog pages
27:12 So many classnames!

——

DISCORD: https://discord.gg/evSQXj2rxj

VOTE ON VIDEOS: https://votey-uppy.vercel.app/

NEWSLETTER: https://hswolff.com/newsletter/

PATREON: https://www.patreon.com/hswolff

TWITCH: https://twitch.tv/hswolff11

TWITTER: https://twitter.com/hswolff

SITE: https://hswolff.com/

How To Build A Blog With Next.js And Tailwind: Part 2 - Tailwind

Shirts: https://wesbos.com/merch 
Codebase: https://github.com/wesbos/chit-chats-snipcart-integration


Snipcart does work on client-rendered pages if you use their JSON API instead.


The mind mapping software is called Mind Node.
Printer: https://amzn.to/3ux5ENt (Affiliate Link)
Barcode Scanner: https://amzn.to/2ZMHKPV (Affiliate link)