Check out @Colby Fayock 's amazing 50 react projects found below: 

https://50reactprojects.com/

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.dev
👉 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 YouTube Gallery app with NextJS

Learn how to get started and get proficient with Next.js. Through building a full-stack recipe app with Next.js, Sanity.io, and Vercel, you'll learn how to set up dynamic routing, pre-render, pull content from external APIs, set up serverless functions, offer real-time content previews, and deploy your app on the web.

✏️ Your instructor for this course is Kapehe, devrel specialist at Sanity.io.
🔗 Kapehe's website: https://kapehe.io
🎥 On YouTube: https://www.youtube.com/c/BetterDevs

💻 Code: https://github.com/sanity-io/next-recipe-app

🔗  Sign up for Sanity.io here: https://www.sanity.io/

⭐ Resources ⭐
🔗  https://nextjs.org/docs
🔗  https://www.sanity.io/docs
🔗  https://www.vercel.com

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction 
⌨️ (0:02:52) What is Next.js
⌨️ (0:04:05) Tools: Node.js, VS Code, and the command line
⌨️ (0:05:15) Setting up Next.js
⌨️ (0:10:02) Setting the Sanity Studio CMS
⌨️ (0:53:12) Connecting Next.js with your content lake
⌨️ (1:04:54) Making a simple navigation bar in _app.js
⌨️ (1:10:45) Making your first page template in index.js
⌨️ (1:30:15) Setting up dynamic routes with [slug].js
⌨️ (1:36:14) Diving into data fetching and pre-rendering with getStaticPaths & getStaticProps 
⌨️ (2:01:36) Create a like button with API routes and serverless functions
⌨️ (2:16:46) Adding live real-time preview with Sanity.io's content lake
⌨️ (2:25:11) Set up automatic deployment with GitHub and Vercel
⌨️ (2:35:18) Summary: What you have learned and next steps

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Next.js for Beginners - Full Course

Wordpress, GraphQL, and Next.js....oh my!! Did you know you can use Wordpress as a Headless CMS for your Jamstack applications? Wordpress often gets a bad reputation in modern Web Development, but it still plays a major role in the Web ecosystem. With the WPGraphQL plugin, you can use your Wordpress instance as a Headless CMS and access your data in Next.js using GraphQL. 

Host Wordpress with Hostinger.
EXCLUSIVE COUPON (90% off) - https://www.hostinger.com/james

Wordpress + Nextjs Starter - https://github.com/colbyfayock/next-wordpress-starter

Colby Fayock YouTube (Community Shoutout) - https://youtube.com/channel/UC7Wpv0Aft4NPNhHWW_JC4GQ

_____________________________________________

Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
https://www.jamesqquick.com
_____________________________________________

Connect with me 😀
Live streams on Twitch - https://twitch.tv/jamesqquick
Follow me on Twitter - https://www.twitter.com/jamesqquick
Join the 💬 Discord Server 💬 - https://discord.gg/vM2bagU
_____________________________________________

COURSES  💻
Learn how to build Fullstack apps with React and Serverless Functions - https://www.jamesqquick.com/courses/react-and-serverless-fullstack-developmnent
Learn everything you need to know about Visual Studio Code - https://www.udemy.com/learn-visual-studio-code/
Build a Quiz App  - https://www.udemy.com/build-a-quiz-app-with-html-css-and-javascript/

Wordpress Headless CMS, GraphQL, and Nextjs - Let's Build a Blog

Learn how to add Twitter login authentication to a Next.js app with NextAuth.js.

🧐 What's Inside
0:00 - Intro to Next.js Authentication with Twitter & NextAuth.js
0:10 - Tools we'll use like Next.js, Twitter, and NextAuth.js
1:21 - Creating a new Next.js React app with Create React App
2:00 - Installing and configuring NextAuth.js auth API routes
6:10 - Registering a new App and getting API keys in the Twitter Developer Portal
10:13 - Setting up NextAuth integration with app Provider and client API
15:15 - Using getServerSideProps to serverside render authentication dynamically
18:14 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-authenticate-next-js-apps-with-twitter-nextauth-js/

🔔 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

📸 Catch the next stream live on Twitch @colbyfayock
https://twitch.tv/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

NextAuth.js
https://next-auth.js.org/

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/fugu-vibes/spatial
License code: WDZIXA4M35HKD1MZ

Next.js Authentication with Twitter & NextAuth.js

Watch as I build a Next.js application using the newly released Notion API live.

Links
–––––
Code: https://github.com/leerob/notion-api-nextjs
Demo: https://notion-api-nextjs.vercel.app/
API Docs: https://developers.notion.com/
No Code: https://super.so/
Blog Example: https://github.com/samuelkraft/notion-blog-nextjs
Unofficial API: https://github.com/ijjk/notion-blog

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/
Theme/Gear/Setup: https://leerob.io/uses

#nextjs #notion

Using the Notion API with Next.js

In this video we'll build our own feature flag management tool in Next.js, storing the flags in Redis with Upstash, creating a custom hook to check a flag's status in the view.

**Warning** I did not handle authentication... if you're going to use this approach, please add authentication checks where appropriate.

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

Upstash - https://upstash.com/
Source Code - https://github.com/leighhalliday/nextjs-feature-flags
Starter Code - https://github.com/leighhalliday/nextjs-feature-flags/tree/3b387e7be0a4af303800ca388bf63c75642567e3

---------- Connect

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

Adding Feature Flags to Next.js (Redis / Upstash, SWR, Hooks)

Notion API has finally launched. Here we will integrate it into our Next.js app.

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

📚 Library(s) needed: npm i @notionhq/client

🖥️ Source code: https://devascend.com/github

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

🕐 Timestamps:
00:00 Introduction

#notion #nextjs #devascend

Notion API: with Next.js (NEW)

Learn all about Next.js, React's most popular Production Framework! Get Started with NextJS and make build amazing websites with ReactJS even more fun! Full Project included, 100% free 3 hours long course!

Join the full Next.js course: https://acad.link/nextjs
Exclusive discount also available for our bestselling React.js course: https://acad.link/reactjs
Join our Academind Community on Discord: https://academind.com/community

First Starting Project Code: https://github.com/mschwarzmueller/nextjs-course-code/tree/e099f80089b65e45f500b75fec1861fb36179f4f
Main Project Starting Code: https://github.com/mschwarzmueller/nextjs-course-code/tree/9c9e9f19b1bd27605fb4ccdca2d1a0ebb5c3a802

Check out all our other courses: https://academind.com/courses

----------

Timestamps:
Welcome 00:00
What is NextJS? 00:46
Key Feature: Server-side (Pre-) Rendering of Pages 05:31
Key Feature: File-based Routing 12:09
Key Feature: Build Fullstack Apps With Ease 15:22 
Creating a NextJS Project & IDE Setup 17:12
Analyzing the Created Project 22:52
Adding First Pages To The Project 25:44
Adding Nested Pages / Paths 31:50
Creating Dynamic Pages 35:37
Extracting Dynamic Route Data 39:13
Linking Between Pages 43:21
Onwards To A Bigger Project! 50:34
Preparing Our Project Pages 54:07
Rendering A List Of (Dummy) Meetups 57:49
Adding A Form For Adding Meetups 01:02:52
The "_app.js" File & Wrapper Components 01:06:47
Programmatic Navigation 01:13:04
Adding Custom Components & Styling With CSS 01:16:51
Modules
How NextJS Page Pre-Rendering Actually Works 01:26:51
Introducing Data Fetching For Page Generation 
(getStaticProps) 01:32:43
More Static Site Generation (SSG) With getStaticProps 01:41:39
Exploring getServerSideProps 01:47:23
Working With Dynamic Path Params In getStaticProps 01:53:50
Dynamic Pages & getStaticProps & getStaticPaths 01:59:04
Introducing API Routes 02:06:21
Connecting & Querying a MongoDB Database 02:12:41
Sending HTTP Requests To API Routes 02:22:13
Getting Data From The Database (For Page
Pre-Rendering) 02:29:02
Getting Meetup Detail Data & Paths 02:36:12
Adding "head" Metadata To Pages 02:45:53
Deploying NextJS Projects 02:55:12
Working With Fallback Pages & Re-Deploying 03:07:38
Summary 03:11:52

----------

• Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: https://www.instagram.com/academind_real
• Join our Facebook community on https://www.facebook.com/academindchannel/

See you in the videos!

----------

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Next.js Crash Course for Beginners 2021 - Learn NextJS from Scratch in this 100% Free Tutorial!

Get started with Next.js, an awesome platform for server-side rendering and static site generation with React. We'll talk through the differences between SSR and SSG, how to create a Next.js app, and how routing works within it.

👩🏼‍💻 Links Mentioned 👩🏼‍💻

React tutorial - https://www.youtube.com/watch?v=9DFjKFMdboc
Next.js documentation - https://nextjs.org/docs
SSR vs. SSG Blog post - https://welearncode.com/ssr-vs-ssg/
Blog Post - https://welearncode.com/beginners-guide-nextjs/
Deploy a Next.js App to AWS Amplify - https://welearncode.com/deploy-nextjs-amplify/

🌸 My Links 🌸

Blog - https://welearncode.com​​​
Twitter - https://twitter.com/aspittel​​​​
Twitch - https://www.twitch.tv/aspittel​​​​
Portfolio - http://alispit.tel​​​

A Beginner's Guide to Next.js | Build a SSG Site with React

Incremental Static Regeneration (ISR) allows content editors and developers to use static generation on a per-page basis and update content without having to rebuild the entire site.

0:00 — What is ISR?
0:14 — Issues with Static Generation
0:49 — What about Content Management Systems?
1:08 — Incremental Static Regeneration Overview
1:33 — How Does This Affect Build Times?
1:52 — Explanation of ISR Request
3:15 — Code Example for Next.js
5:04 — E-commerce Example
6:44 — Tradeoffs
7:38 — Reverts & Rollbacks
8:11 — Conclusion

Links
–––––
ISR Docs: https://vercel.com/docs/next.js/incremental-static-regeneration
E-commerce Demo: https://nextjs.org/commerce
GitHub Reactions Demo: https://reactions-demo.vercel.app/
Static Tweets Demo: https://static-tweet.vercel.app/

–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/
Theme/Gear/Setup: https://leerob.io/uses

#nextjs #isr