Program With Abu
Program With Abu
  • 29
  • 71 590
PART 1 - Introduction to Next.js | Build a Blog Website with Sanity Backend
🚀 Welcome to the part 1 my Next.js tutorial series! In this exciting tutorial, I'll introduce you to the world of Next.js by building a powerful blog website with Sanity as the backend. Whether you're a beginner or an experienced developer, this step-by-step guide will help you kickstart your journey into Next.js and gain hands-on experience with a headless CMS like Sanity.
📚 What's Covered in This Tutorial:
- Setting up your development environment
- Understanding the basics of Next.js
- Creating a Next.js project from scratch
- Installing and configuring Sanity as our content management system
- Fetching and displaying blog content from Sanity in our Next.js application
- Creating dynamic routes for blog posts
- Building a stunning and responsive user interface with React components
🔥 By the end of this tutorial, you'll have a fully functional blog website with a clean and efficient Next.js frontend powered by Sanity's flexible backend. Whether you're looking to build your blog or enhance your web development skills, this tutorial will equip you with the knowledge and confidence to get started.
📦 Resources:
Check out part 2 👉 ua-cam.com/video/RYEBtwt_VbU/v-deo.html
Complete project: myawesomeblog.vercel.app/
Get started with Next.js: nextjs.org/
Sign up for a free Sanity account: www.sanity.io/docs
Code and project files: github.com/iAthman83/youtube-next-blog-sanity.git
👍 If you find this tutorial helpful, please give it a thumbs up, subscribe to our channel for more web development tutorials, and click the notification bell to stay updated with our latest content.
💬 If you have any questions or need assistance along the way, feel free to leave a comment below, and I'll do our best to help you out.
🌐 Stay connected with me:
Website: programwithabu.com/
Twitter: iathman83
LinkedIn: www.linkedin.com/in/abubakar-athman/
If you also feel like supporting this channel, use the link below
☕️Buy me coffee 👉 www.buymeacoffee.com/iathman83
📌 Don't forget to share this tutorial with your fellow developers and friends who might find it valuable. Let's embark on this exciting Next.js and Sanity journey together! 🔗 #NextJS #SanityCMS #WebDevelopment #Tutorial
Chapters:
00:00:00 - Introduction
00:03:02 - Setup git repository
00:04:02 - Install NextJS
00:05:45 - NextJS folder structure walkthrough
00:10:20 - Clean up initial installed project
00:21:50 - Nav bar and footer
00:35:40 - Hero section design
00:45:49 - Blog section design
Переглядів: 695

Відео

PART 2 - Introduction to Next.js | Build a Blog Website with Sanity Backend
Переглядів 1,2 тис.Рік тому
🚀 Welcome to the part 2 of my Next.js tutorial series! In this exciting tutorial, I'll introduce you to the world of Next.js by building a powerful blog website with Sanity as the backend. Whether you're a beginner or an experienced developer, this step-by-step guide will help you kickstart your journey into Next.js and gain hands-on experience with a headless CMS like Sanity. 📚 What's Covered ...
React Firebase Tutorial: Securing Protected Routes in Your App
Переглядів 3,1 тис.Рік тому
In this tutorial, I will walk you through how to secure protected routes in your React app using Firebase Authentication. We will cover how to create and manage users using Firebase, and how to use React Router to create a private route that users must be authenticated to access. You will learn how to use Firebase's security rules to control access to data and resources, and how to authenticate...
ReactJS Redux Crash Course: Build a Simple Todo List
Переглядів 1,8 тис.Рік тому
In this ReactJS Redux CRUD Crash Course, you'll learn how to create a simple todo list application using ReactJS and Redux. You'll start by learning the basics of Redux, and then move on to building a simple todo list app that allows you to add, delete, update and edit items. Throughout the course, you'll learn how to use Redux to manage the state of your application, including how to create re...
React Pass forwardRef Hook Between Multiple Components
Переглядів 964Рік тому
Learn how to pass a forward ref hook between components in React! This technique allows you to access DOM elements directly. Watch this video to see a step-by-step example of how to use forward refs in your own code. Get ready to take your React skills to the next level! Props 👉 ua-cam.com/video/2HSBhv4qJRs/v-deo.html Subscribe to my channel 👉 www.youtube.com/@programwithabu Follow me on: Twitt...
Free Websites - Feels Illegal to Know and Use
Переглядів 2152 роки тому
Hey everyone! In this video, I'm sharing my favorite websites that not many people know about. These sites are hidden gems that offer unique and useful content, and I think you'll love them as much as I do. Whether you're looking for obscure information, cool tools, or just something different, these websites have got you covered. Be sure to check them out and let me know what you think in the ...
React Native Integration with Tailwind CSS
Переглядів 3122 роки тому
In this video, we'll be talking about React Native and Tailwind CSS. Together, React Native and Tailwind CSS make it easy to build beautiful, functional apps with a clean and modern design. Nativewind 👉 www.nativewind.dev/ Subscribe to my channel 👉 www.youtube.com/@UCPVAawyAdFtxPFwWS1hCjMQ Follow me on: Twitter 👉 iathman83 LinkedIn 👉 www.linkedin.com/in/abubakar-athman/ Buy me coffe...
Tailwind CSS - How To Work With Data Attributes
Переглядів 2,6 тис.2 роки тому
In this video I show you how to work with data attribute in tailwind CSS to change the style of a component before rendering it to the user. Other tutorials on Tailwind CSS coming up soon. GitHub repo 👉 github.com/iAthman83/youtube-tailwind-data-attribute-variants Subscribe to my channel 👉 www.youtube.com/@programwithabu Follow me on: Twitter 👉 iathman83 LinkedIn 👉 www.linkedin.com/...
Mobile Bottom Navigation with WordPress
Переглядів 8642 роки тому
This this video I show you how to use WordPress and Elementor to create a bottom navigation menu that only displays when the user in browsing your website only on their mobile or tablet to give it a feel of a mobile app. Subscribe to my channel 👉 ua-cam.com/channels/PVAawyAdFtxPFwWS1hCjMQ.html Related videos Introduction to WordPress 👉 ua-cam.com/video/gPc2e_WP5kE/v-deo.html Mega Menu in WordPr...
Context API to Add Night Mode Feature
Переглядів 3982 роки тому
Context API to Add Night Mode Feature
React Responsive Navigation Menu [2022]
Переглядів 9372 роки тому
React Responsive Navigation Menu [2022]
Flexbox Demystified
Переглядів 1092 роки тому
Flexbox Demystified
JavaScript for Absolute Beginners [2022]
Переглядів 4022 роки тому
JavaScript for Absolute Beginners [2022]
Use React to Scroll to Specific Section on Your Website
Переглядів 53 тис.2 роки тому
Use React to Scroll to Specific Section on Your Website
How to use Free Tools to Create a Modern Mega Menu on WordPress Using Elementor and Elementskit
Переглядів 2412 роки тому
How to use Free Tools to Create a Modern Mega Menu on WordPress Using Elementor and Elementskit
Introduction To WordPress Complete Beginner Tutorial 2022
Переглядів 1562 роки тому
Introduction To WordPress Complete Beginner Tutorial 2022
Icon List Icon Not Sticking to First Line in Elementor - WordPress
Переглядів 1,9 тис.3 роки тому
Icon List Icon Not Sticking to First Line in Elementor - WordPress
React Context API - Introduction to Modern REACTJS - Part 7 (2021)
Переглядів 1173 роки тому
React Context API - Introduction to Modern REACTJS - Part 7 (2021)
React Router - Introduction to Modern REACTJS - Part 6 (2021)
Переглядів 1273 роки тому
React Router - Introduction to Modern REACTJS - Part 6 (2021)
React State - Introduction to Modern REACTJS - Part 5 (2021)
Переглядів 823 роки тому
React State - Introduction to Modern REACTJS - Part 5 (2021)
REACTJS Props - Introduction to Modern REACTJS - Part 4 (2021)
Переглядів 1353 роки тому
REACTJS Props - Introduction to Modern REACTJS - Part 4 (2021)
Design with React-Bootstrap - Introduction to Modern ReactJS - Part 3 (2021)
Переглядів 1473 роки тому
Design with React-Bootstrap - Introduction to Modern ReactJS - Part 3 (2021)
Project Refactoring - Introduction to Modern ReactJS - Part 2 (2021)
Переглядів 1073 роки тому
Project Refactoring - Introduction to Modern ReactJS - Part 2 (2021)
Introduction to Modern ReactJS - Part 1 (2021)
Переглядів 3093 роки тому
Introduction to Modern ReactJS - Part 1 (2021)

КОМЕНТАРІ

  • @RHAAnalytics
    @RHAAnalytics Місяць тому

    thanks Abu, it was so useful for me🙏

  • @JustinSmith1287
    @JustinSmith1287 2 місяці тому

    What a perfect video. I just needed a quick rundown on the data attribute to gap-fill. I was concerned I was going to have to watch a 1 hour video to extract 5 minutes of info. Thanks!

  • @sohailshaikh7264
    @sohailshaikh7264 7 місяців тому

    sir pls give your repo

  • @Rando327
    @Rando327 8 місяців тому

    thank you for this tutorial, wonderfully explained. But what if each section is a component on its own? For example the Nav is a component, the About section is another component. and all of them gathered in the App.js! I'm having problems understanding how can I do it when each section is a component on its own, HELP :(.

  • @mansichugh8129
    @mansichugh8129 8 місяців тому

    what is the use of usereef?

  • @tangophenomena
    @tangophenomena 8 місяців тому

    Thank you for your help!

  • @imie_trends
    @imie_trends 8 місяців тому

    🎉thank you So much for the knowledge

  • @PanlasangMotour
    @PanlasangMotour 9 місяців тому

    You save me man haha from the trouble on protection routes ... i cant even imagine it shows me on my local infinite loop and parsing error haha u earn my subs

    • @programwithabu
      @programwithabu 9 місяців тому

      I’m glad I could be of help to you! And thanks for the subscription 😎

  • @frield92
    @frield92 9 місяців тому

    Best redux tutorial ever! You're very good. Please add the link to your github in the description.

  • @maskman4821
    @maskman4821 9 місяців тому

    Thank you for this tutorual,it is very helpful,I will give it a try ❤

  • @KidAthBeats
    @KidAthBeats 9 місяців тому

    CCS animations 👍

  • @MeshackOdunowe
    @MeshackOdunowe 11 місяців тому

    thank you so much for this. I have a little question>>>> i don't want the id of the post to be the url. i want the slug generated to be the url . any idea on how i can make that happen?. i'll be glad to get a reply

    • @programwithabu
      @programwithabu 9 місяців тому

      The idea here is to use the useSearchParams hook to target the URL and change it according to the query Find more informations on the link below nextjs.org/docs/app/api-reference/functions/use-search-params

  • @dii9025
    @dii9025 11 місяців тому

    💃 Promo-SM

  • @nicolasmorin9539
    @nicolasmorin9539 11 місяців тому

    Abu, assalamou alaikoum. You are my man Abu, thank you very much. you tutorial is far more better than all these jerks that have hundreds of thousands of subscriber. keep doing you nice work. maachaallah

  • @ahmedabdelmeguid1131
    @ahmedabdelmeguid1131 11 місяців тому

    thanks alot for this video

  • @infomania_by_ayush7901
    @infomania_by_ayush7901 11 місяців тому

    Hey But what if I am trying to interrupt the scroll when user is scrolling up? How can I do that?

    • @programwithabu
      @programwithabu 11 місяців тому

      Interrupting the scroll? The way this one is setup is that the scroll goes up to the top of the page. You can setup yours with the mouse listener event, if I understand your question correctly

  • @okotelnicholad9204
    @okotelnicholad9204 11 місяців тому

    Since TCA i knew you were smart

  • @GregPeters1
    @GregPeters1 11 місяців тому

    Sir, great Sanity/Next Js project! Question for you - when i update my posts in the deployed Sanity studio, the changes do not show in on my local:3000 frontend. Can I preview my changes? Thanks!

    • @programwithabu
      @programwithabu 11 місяців тому

      Great question. Can you get these posts in production? I ask because the way the sanity client (createClient) is setup is in away that it does not specify development or production. So I would advice you to check your client on nextjs if everything is setup ok, and also check the function that gets all the posts if that is also setup. If all these are ok, then also check the component that’s calling the function returning all the posts. Lemme know if it works.

    • @GregPeters1
      @GregPeters1 9 місяців тому

      @@programwithabu Sorry for getting back so late. Turns out - i just needed to use 'revalidate'. Everything's fine now!

    • @rahichauhan4655
      @rahichauhan4655 9 місяців тому

      @GregPeters1 Can you please share your repo for the reference and explain how this problem has resolved

    • @rahichauhan4655
      @rahichauhan4655 9 місяців тому

      @@GregPeters1 .

    • @GregPeters1
      @GregPeters1 9 місяців тому

      @@rahichauhan4655 I didn't create a repository. But, the issue is dynamic, and regardless of which CMS you're using, a thorough understanding of how Next JS/Vercel's tag works is needed. I say this because i spent half a day reading issues on github regarding this subject. As it turns out, chances are that you'll get unreliable results if you're using revalidating on multiple pages. The best advice i can give you is to visit Vercel's yt channel, look for the 25min vid posted on Jan 15, '24 titled: Next.js App Router Caching: Explained!

  • @aymanhaque
    @aymanhaque 11 місяців тому

    How would I implement this if I have multiple components in my react page? For example, my page has a navbar.js file which is exported to app.js(and this also imports all the sections from other files/components). How could I implement this in that case?

    • @programwithabu
      @programwithabu 11 місяців тому

      Hi, I created another video to solve this issue, you can find it on the link below ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=l75gYCqlR9_103TV How this helps out

  • @GregPeters1
    @GregPeters1 Рік тому

    My friend, you have the BEST delivery.

    • @programwithabu
      @programwithabu 11 місяців тому

      Thank you so much for your comments. It’s comments like this that give me the energy to create more content

  • @avcodeversee
    @avcodeversee Рік тому

    Thank you so much Abu for explaining this, this will help me to apply in my portfolio website.

    • @programwithabu
      @programwithabu Рік тому

      We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=KCDBupMYFgbvxEwO

  • @faugofficial4891
    @faugofficial4891 Рік тому

    Thanks man you explained it so easily

  • @Joel-nz1gd
    @Joel-nz1gd Рік тому

    Thank you for the step by step explanation

    • @programwithabu
      @programwithabu Рік тому

      The video below might also help, where I show how to forward ref from one component to another ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=KCDBupMYFgbvxEwO

  • @NaradaUtoroDewo
    @NaradaUtoroDewo Рік тому

    Thank you brother!

  • @benjamichinedu6818
    @benjamichinedu6818 Рік тому

    i just fell in love with your method of teaching. you are too good!!.

  • @DnsMenjivar
    @DnsMenjivar Рік тому

    10/10

  • @jemitigo
    @jemitigo Рік тому

    I have really enjoy this course with you

  • @MidWinter747
    @MidWinter747 Рік тому

    This is just what I needed. Thank you!

    • @programwithabu
      @programwithabu Рік тому

      Response coming really late haha But I’m glad I could help

  • @luanjfs
    @luanjfs Рік тому

    nice one man! thank you!

  • @huntervargo4237
    @huntervargo4237 Рік тому

    console.log("subscribed, great video!")

  • @Breezeisgood
    @Breezeisgood Рік тому

    Amazing work mashallah, I’m learning a lot.

  • @huntx...8573
    @huntx...8573 Рік тому

    your git repo has nothing !!!

    • @programwithabu
      @programwithabu Рік тому

      This was my mistake Huntx But here is the updated repo with the code github.com/iAthman83/youtube-react-authentication-with-firebase

  • @faazatiali
    @faazatiali Рік тому

    Hehe nice bro 😁

  • @raiji5238
    @raiji5238 Рік тому

    Since somedays ago, I search how to work this feature and i finally found it today ! thanks to you ! you the best ! i follow you right now !

    • @programwithabu
      @programwithabu Рік тому

      Thank you for your kind words Raiji, I’m glad I could help you out, makes me so happy that you figured out how this works 💪🏽

  • @zeke2269
    @zeke2269 Рік тому

    Second one is not that easy bruh💀

  • @zeke2269
    @zeke2269 Рік тому

    How to solve that white gap im a beginner

    • @programwithabu
      @programwithabu 11 місяців тому

      Sorry for responding to your comment late, Which white gap? But I hope you figured it out by now (:

  • @JulioMeza
    @JulioMeza Рік тому

    Just finish the whole video. It took me several hours to finish. On the last part of the code, you created a handleSignOut constant instead of a handleSignOut. Because you used the same name on the form onSubmit, the app worked fine, but the name confuses a little bit. THANK YOU SO MUCH!!!!!

    • @programwithabu
      @programwithabu Рік тому

      Thanks for pointing that out, I appreciate it Also awesome that your code worked just fine,

  • @JulioMeza
    @JulioMeza Рік тому

    Thank You!!! This is exactly what I was looking for!!

  • @shrikarthikholebagil7459
    @shrikarthikholebagil7459 Рік тому

    Bro where is the repo link?

  • @girijeshthodupunuri1300
    @girijeshthodupunuri1300 Рік тому

    What do I do if the different sections are housed deep in custom components? How can i pass the ref from parent to deep nested child component?

    • @programwithabu
      @programwithabu Рік тому

      We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another ua-cam.com/video/_G5RxzxJz4A/v-deo.htmlsi=KCDBupMYFgbvxEwO

  • @haroldpepete
    @haroldpepete Рік тому

    nice tutorial, i'm more of angular but i know react too, i think both are amazing technologies, redux toolking has so many features that one video is impossible to check them all

  • @aaaliii4u
    @aaaliii4u Рік тому

    its a great a easy to follow tutorial, but you did not remove the event in the useEffect. you should remove that event so when the component is closed that event is also closed. Thank you for such a good lecture :)

  • @crn05
    @crn05 Рік тому

    thank you so much for the tutorial, everything worked out!

  • @acemalicaytv4894
    @acemalicaytv4894 Рік тому

    Very detailed 🎉

  • @vinimaciel
    @vinimaciel Рік тому

    thanks, you made it very easy to undestand

  • @PhoneyPatjordan
    @PhoneyPatjordan Рік тому

    Thank you! This was very helpful!

  • @mitch1668
    @mitch1668 Рік тому

    Great at explaining and very thorough, hope you continue your journey in teaching! Thanks for the video.

    • @programwithabu
      @programwithabu Рік тому

      Thanks Mitch. I’m glad the video helped out!

  • @purusharma8192
    @purusharma8192 Рік тому

    Wow

  • @laalaaala
    @laalaaala Рік тому

    thanks mate for the amazing tutorial, i was searching so long for a up to date tutorial. Amazing work and easy to understand. can u do an update video with googleSignIn as a template how to integrate the other signin methods?

    • @programwithabu
      @programwithabu Рік тому

      Thank for you’re kinds words. I will put your request into consideration for my upcoming videos. That’s a great idea though!

  • @asselyembergenovasdu6970
    @asselyembergenovasdu6970 Рік тому

    Really cool👍👍👍👍