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)

Merch Store Sales and Fulfillment with TypeScript + Next.js

In this video we look at a simple contact form with some validation using react-hook-form. We use the Next.js API route to submit the form via email using nodemailer.

Next.js (react) contact form using react-hook-form and /api route for submission

In this video I show you how to add Google Analytics to your NextJS application. I show how to add Google analytics to fresh Next JS application created with yarn create next-app.

Sign up for my newsletter: https://tuomokankaanpaa.com/newsletter
Check out my courses: https://tuomokankaanpaa.com/courses

with-google-analytics example repo: https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics
Learn more about _document.js: https://nextjs.org/docs/advanced-features/custom-document

00:00 What is this video about
00:26 with-google-analytics example
00:39 Create gtag.js
01:35 Create Google Analytics account
02:11 Create data stream
02:29 Copy your measurement ID
02:40 Create _document.js with GA code
04:16 Add GA code to _app.js
05:14 Test pageviews
06:12 Send custom event (add to cart)
08:30 Like & Subscribe!

Connect with me:
Website: https://tuomokankaanpaa.com
My newsletter: https://tuomokankaanpaa.com/newsletter
Twitter: https://twitter.com/tumee
Skillshare: https://www.skillshare.com/r/user/tume

#nextjs #googleanalytics #reactjs

How to add Google Analytics to your Next.js application (quick & easy)

In this video, you will learn how you can redirect your user from server side in nextjs


Blog Post: https://dev.to/thatanjan/redirect-in-next-js-from-server-side-4cbf
Data Fetching in NextJS: https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
Access cookies in Nextjs: https://www.youtube.com/watch?v=RECwLOZdiR4&feature=youtu.be

Source Code: https://gist.github.com/thatanjan/8bddc62b3866e2b226a28b03c1225fa1



Want to learn full stack web development to get your dream job? If so then you
are in the right place. Cules coding will help you to get that. You will find
tutorials about full stack web development, data structures & algorithms and
many more cool things. So hit the Subscribe button so you don't miss any of
those cool stuffs. 

About Me: My name is Anjan Shomodder. I am a full stack web developer. I can
create full stack applications social media, chat applications, blogging website
and many more. I also write blog posts about web development and cool
technologies on Medium and dev.to.

If you want to see my portfolio then visit: 
Portfolio: https://anjan.vercel.app/


My Personal projects:
Dev-book: https://dev-book.vercel.app/

My blog posts are:
Medium: https://medium.com/@thatanjan
Dev: https://dev.to/thatanjan/

If you want to reach out to me you can send me email or simply dm me on social
media.
Email: anjan.cules@gmail.com

I would really appreciate if you follow me on social media as @thatanjan.
You can follow me on: 
LinkedIn: https://www.linkedin.com/in/thatanjan/
Twitter: https://twitter.com/thatAnjan
GitHub: https://github.com/thatAnjan/
Instagram (personal): https://www.instagram.com/thatanjan/
Instagram (YouTube channel): https://www.instagram.com/cules_coding/
Facebook: https://www.facebook.com/thatanjan/

Thank You guyz. Hope you have a good day.
Stay safe.

Redirect in nextjs from server side | React | Authentication

In this video I’m going to show you how to setup Sign In with Slack using NextAuth.js.
➥ Repo: https://gitlab.com/pragmaticreviews/next.js-jobs-app/-/tree/nextauth-slack
➥ 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: Slack Provider setup - 0:39
Slack Application and Redirect URL setup - 1:55
Testing Slack Sign In using NextAuth.js - 3:24
Outro - 4:49

#Next #NextAuth #Slack

NextAuth.js | Sign In with Slack

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 1 which focuses on getting our blog set up with Next.js.

Part 2 will be all about TailwindCSS.

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

0:00 Intro
2:05 Why Next.js?
3:25 Install Next.js
5:22 Let's Code
7:26 Always Be Data first
9:29 Customize Next.js App
11:28 Let's make a Nav
13:35 Make Fixture Data
15:03 Make list of blog items
17:23 Link to individual blog page
18:20 Make Individual Blog page
19:15 getStaticProps 
20:26 getStaticPaths
22:37 Debugging getting it working
25:41 It's working!
26:13 Wrap-up

——

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 1

WordPress is used on over 1.3 billion websites across the world, and it works great as a Headless CMS...