Learn how to add a custom favicon in Next.js. We'll walk through generating a new set of icons to update not only favicon but app icons as well as how you can use React to dynamically update it on page change and interaction.

🧐 What's Inside
00:00 - Intro to custom favicons in Next.js
00:10 - Tools we'll use like Next.js and what favicons are
00:54 - Creating a new Next.js app with Create Next App
02:03 - Generating a favicon from Real Favicon Generator and adding it to Next.js
06:43 - Configuring a favicon globally in a custom App file
09:23 - Adding a different favicons for different pages
13:16 - Dynamically updating a favicon on button click
18:04 - Outro

🗒️ Read More
https://spacejelly.dev/posts/how-to-add-custom-dynamic-favicons-in-react-next-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!
GitHub: https://github.com/sponsors/colbyfayock
Other: hello@colbyfayock.com

👨‍🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com

🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses

🧰 More Resources

Real Favicon Generator
https://realfavicongenerator.net/

🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/walz/golden-age
License code: JVVIDNTQ8EZI9BTD

#colbyfayock #nextjs #favicon #reactjs #webdevelopment

Add Custom Favicons in Next.js & Dynamically Update with React

Thinking of creating your own product by tying together a number of SaaS products like Auth0, Stripe, and Supabase? That's what Jon Meyers wanted to do too, so Auth0 Developer Advocate Ben Dechrai caught up with him for a fireside chat to discuss his journey.

From platform and tool selection, to data handling and deployment options, this session also delves into a couple of alternatives to see why certain decisions were made.

Want to read Jon's blog post?
https://jonmeyers.io/series/build-a-saas-platform-with-next-js-prisma-auth0-and-stripe
Follow Jon on Twitter - https://twitter.com/_dijonmusters

00:00 - Welcome
00:20 - Intro for Jon Musters
02:30 - SaaS and Tech Stack Overview (Next.js, Stripe, Prisma, and Auth0)
04:30 - Why Build the Project
07:00 - How Did You Choose the Tech Stack?
10:00 - Gatsby vs Next.js
13:15 - Why Prisma
16:00 - Why Not GraphQL?
18:45 - Using Supabase to Host a PostgreSQL Database
19:30 - Why Auth0?
21:00 - Why Stripe?
23:10 - What Issues Did You Have?
28:00 - Stripe Data Integrations
34:45 - Using Tailwind CSS for the First Time
39:45 - What's Next?
42:00 - Climate Change Project with Ben
45:00 - What Mistakes Did You Make?
52:50 - Potential Future Enhancements
 57:30 - Wrap Up

___________________________________________
Learn with Auth0

Try Auth0 for free - https://a0.to/auth0
The Auth0 blog - https://a0.to/blog
Watch Live Streams on Twitch - https://a0.to/twitch
Ask questions on the Community Forum - https://a0.to/community

___________________________________________
Follow Us on Social

Follow us on Twitter - https://a0.to/twitter
Follow us on LinkedIn - https://a0.to/linkedin

Building a SaaS with Next.js, Prisma, Stripe and Auth0 - A Fireside Chat With Jon Meyers

Hello, my friends and fellow developers, this video took longer than usual to edit because I did some more research on video editing and added some more effects. Thanks a lot for 1000 subscribers! 

In this video, we cover how you can make your Next.js app a PWA with offline support very easily!

Let me know in the comments below if you want more Next.js videos or any other videos.

🔴 Subscribe here: https://bit.ly/2K5Ydaf

Links in the video:
    Next PWA: http://npmjs.org/package/next-pwa 
    Icon generator: https://cthedot.de/icongen/
    Manifest JSON file: https://easypastes.tk/pastes/manifest.json
    GitHub repo: https://github.com/max-programming/next-pwa-tut/

🔥 Timestamps Start 🔥

0:00 - Introduction
1:56 - Generating the icons
3:08 - Creating manifest.json file
7:47 - Making it a PWA
9:22 - Building & Testing the PWA
11:53 - Offline support
13:05 - Conclusion 

🔥 Timestamps End 🔥


Other Tutorials: 
    ⚛️ React and Material UI Todo App: https://bit.ly/reactmattodo
    🟨 Other JavaScript videos: https://bit.ly/jstutorials
    📘 Visual Studio Code videos: https://bit.ly/vscodevids
    🔋 Build a Battery App in JS: https://youtu.be/J8_hwKSeffY

Connect 🔗 :
    Twitter: https://twitter.com/MaxProgramming1
    Facebook: https://www.facebook.com/Max-Programming-103081931147293    
    Github: https://github.com/max-programming/

VS Code Theme used: 👨‍🚀 Martian NIght Theme

Suggest, ask doubts in the comments and share these videos to help!
Thanks for Watching!

How to make a Next.js app a PWA with offline support | Progressive Web App

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