The Ultimate NEXT.JS 13 Crash Course for Beginners - Build 6 Apps in 18 Hours! (2023)

🚨 JOIN the world’s BEST developer Course & Community Zero to Full Stack Hero: www.papareact.com/course
🔴 Looking for the Code? 🛠️
links.papareact.com/github
🖥️ Join me as I build 6 Apps using Next.js 13, ReactJS, Tailwind CSS & TypeScript & More:
1️⃣ TRELLO
2️⃣ BLOG
3️⃣ LIVE NEWS
4️⃣ META MESSENGER
5️⃣ AMAZON WEB SCRAPER
6️⃣ GOOGLE SHOPPING
🕐 TABLE OF CONTENTS:
➡️ Introduction
0:00 Build Showcases & Tech Stack
6:29 Next.js 12 to Next.js 13 Tutorial
1:01:26 Intermission 1
1:01:54 Next.js 13 Server Actions Lesson
1:26:10 Intermission 2
1️⃣ Trello Clone
1:27:38 Build Showcase
1:47:57 Building the Header Component (1/2)
1:57:16 Implementing the React Avatar Library
2:02:17 Building the Chat GPT-4 Suggestion Box in the Header Component
2:05:44 Building the Header Component (2/2)
2:10:59 Implementing React Beautiful DnD Library
2:16:31 Implementing Appwrite Cloud
2:28:34 Implementing Zustand
2:41:51 Building the Board Component (1/2)
2:42:46 Implementing To-Do Data
2:56:16 Sorting Columns by Column Types
2:59:26 Building the Board Component (2/2)
3:05:48 Building the Column Component
3:18:48 Building the To-Do Card Component
3:23:22 Implementing the DnD and Search Functionality
3:50:51 Implementing ChatGPT 4 Functionality with OpenAI API
4:13:26 Implementing Headless UI Components
4:34:00 Implementing the Image Upload Functionality
5:02:45 Deploying to Vercel & Final Build Demo
5:07:35 Intermission 3
2️⃣ Blog App
5:09:18 Build Showcase & Tech
5:23:19 Setting up Sanity & Sanity Embedded Studio
6:00:49 Building the Header Component
6:05:45 Building the Banner Component
6:09:00 Implementing Preview Mode
6:25:28 Building the Blog List Component
6:52:16 Upgrading the Preview Mode
6:58:08 Building the Blog Article Content Page
7:11:21 Implementing React Portable Text Plugin
7:12:01 Building the Rich Text Components Component
7:19:37 Final Build Demo
7:20:25 Making the Blog Site Faster with Next.js 13
7:33:28 Deploying to Vercel & Final Build Demo
7:42:08 Intermission 4
3️⃣ Live News App
7:44:03 Build Showcase & Tech
7:58:58 Building the Header Component
8:09:00 Building the Nav Links and Nav Link Components
8:17:46 Building the Search Box Component
8:28:07 Building the Home Page
8:34:00 Implementing GraphQL Request Library
8:35:02 Implementing Mediastack API
8:38:56 Implementing StepZen
9:12:52 Building the News List Component
9:15:53 Building the Article Component
9:22:56 Implementing Line Clamp for Tailwind CSS
9:24:56 Adding Dark Mode
9:34:51 Implementing the Read More Button
9:37:49 Building the Article Page
9:44:59 Implementing the Search Functionality
9:54:47 Implementing Live Timestamp Functionality
9:57:13 Deploying to Vercel & Final Build Demo
10:10:03 Intermission 5
4️⃣ Meta Messenger App
10:12:36 Build Showcase & Tech
10:30:17 Building the Header Component
10:46:51 Building the Chat Input Component (1/4)
10:54:46 Setting up Upstash
11:02:13 Implementing UUID Library
11:07:24 Building the Chat Input Component (3/4)
11:08:58 Building the Add Message API Endpoint using Redis
11:16:10 Explaining & Implementing SWR
11:34:05 Building the Message List & Message Component
11:52:07 Implementing Pusher
12:18:48 Implementing the Loading Functionality
12:23:27 Implementing NextAuth Authentication with Facebook
13:00:59 Implementing Timestamp Functionality & Final Build Demo
13:05:36 Intermission 6
5️⃣ Amazon Web Scraper
13:07:48 Build Showcase & Tech
13:24:25 Building the Home Page (1/2)
13:27:50 Building the Sidebar Component (1/2)
13:37:13 Building the Header Component
13:55:05 Setting Up Bright Data
14:04:54 Explaining the Complete Build Flow
14:10:49 Setting up Firebase and Cloud Functions
14:17:22 Implementing the onScrapperComplete Webhook
14:21:12 Explaining & Implementing ngrok
14:31:45 Setting up Firebase Admin and Cloud Firestore Database
14:36:47 Implementing Bright Data
15:33:44 Building the Sidebar and Sidebar Row Components
15:50:19 Implementing Loading Animations
15:52:19 Implementing React Hot Toast Notifications
16:00:07 Deploying to Vercel & Final Build Demo
16:14:25 Intermission 7
6️⃣ Google Shopping Clone
16:17:31 Build Showcase & Tech
16:31:39 Building the Header Component
17:11:32 Building the Search Page
17:16:08 Implementing Oxylabs E-Commerce Scraper API
17:40:12 Building the Results List Component
18:03:48 Implementing the React Loading Skeleton Library
18:08:38 Building the Product & Home Page
18:47:12 Deploying to Vercel & Final Build Demo
19:03:40 Outro
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Trello, OpenAI, Amazon, Google or any of their subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.

Пікірлер: 210

  • @JohnVandivier
    @JohnVandivier9 ай бұрын

    Kudos Sonny! You're raising the level of education available to all. The community appreciates you.

  • @omarezeldin4620
    @omarezeldin46209 ай бұрын

    ​I was just going to watch the old NextJS course, and check the new NextJS 13 while creating projects. Now *this* actually saved me.

  • @mrrishiraj88

    @mrrishiraj88

    9 ай бұрын

    Enjoy!!

  • @kylebaker8548
    @kylebaker85489 ай бұрын

    SONNY THANK YOU SO MUCH! I HAVE BEEN WAITING FOR A PLAYLIST LIKE THIS WITH NEXT 13!

  • @jasper5016
    @jasper50169 ай бұрын

    You made learning so awesome. Thanks Sonny!

  • @nsikakakpan4251
    @nsikakakpan42519 ай бұрын

    Thanks Sonny. Because of you I have a lot of projects on my portfolio website 🎉

  • @kiumarsnouri1136
    @kiumarsnouri11366 ай бұрын

    The quality of content is amazing mate, I really appreciate your time and effort for making such an amazing video!

  • @Simple_OG
    @Simple_OG9 ай бұрын

    Super excited 🎉

  • @adhdmusicrecords
    @adhdmusicrecords9 ай бұрын

    great content love when you do these

  • @joshuakithyoma9575
    @joshuakithyoma95759 ай бұрын

    I subbed yesterday , Im all in with PAPA !

  • @vaibhavwadhavane874
    @vaibhavwadhavane8748 ай бұрын

    thank you brother...I love the way you explain every topic.

  • @jamesbotwina8744
    @jamesbotwina87449 ай бұрын

    Killing it as always

  • @shamim12314
    @shamim123148 ай бұрын

    Awesome. Apprised your hard work.

  • @alvinrumbaoa
    @alvinrumbaoa9 ай бұрын

    Thank you for doing this to everyone 🎉

  • @nitinkumar-zo4dp
    @nitinkumar-zo4dp9 ай бұрын

    Awesome, I'm waiting, it's helpful for beginning and advance developer

  • @swoodc
    @swoodc5 ай бұрын

    Thanks bro! I’m trying to learn next js since I’m trying to make an app with the t4 stack so this is helpful

  • @thekontuli2828
    @thekontuli28289 ай бұрын

    When you said that helping those guys achieve their dreams was probably your best achievement in life 🔥🔥🔥 This brother has truly found his Purpose in Life! Onwards and Upwards bro

  • @abcpqr880
    @abcpqr8808 ай бұрын

    One of the best videos on KZread ❤

  • @itsamadalo9974
    @itsamadalo99749 ай бұрын

    Currently on a project with Next13 and have had issues with Next Auth, hopefully, this will help me out. In the meantime, I resorted to clerk.

  • @zoltanmolnar6956
    @zoltanmolnar69569 ай бұрын

    We are all waiting this release, thank you @Jay , thank you @Sonny

  • @SonNguyenLife
    @SonNguyenLife7 ай бұрын

    Amazing, I love you Bro for this free course

  • @Lafsha
    @Lafsha9 ай бұрын

    you saved me! thank you

  • @dhimannavjot1
    @dhimannavjot16 ай бұрын

    1 hour on it OMG really great :) thank you

  • @muhammadarslanrana942
    @muhammadarslanrana9428 ай бұрын

    Awesome course, can you also make a course on remotion library. Thanks for such a wonderful course.

  • @oktoniuszevanyasimanungkal9554
    @oktoniuszevanyasimanungkal95547 ай бұрын

    thank you so much!

  • @hubesh716
    @hubesh7169 ай бұрын

    Hey sir we are also waiting for React Native Projects so plz start as soon as possible

  • @niteshprajapat7918
    @niteshprajapat79189 ай бұрын

    I can see new energy in Sonny sir ❤️🔥

  • @satsatdown
    @satsatdown8 ай бұрын

    If I like this and your style of teaching, I will definatly get the course

  • @MasculinismTV
    @MasculinismTV9 ай бұрын

    unfortunately the music is extremely annoying and most videos the tech is outdated it's kinda painful to have to go through documentation to find the new standard, but I salute the effort to put a 19 hours video

  • @rasmuselm2512
    @rasmuselm25129 ай бұрын

    wooooooooooooooooooooooooooooooooooh!!!!!!! Sonny is back and dropping science like the big prof he is. Daniel from Nigeria!!!

  • @walderfranco
    @walderfranco9 ай бұрын

    Pure gold, incredible value for freee

  • @user-de4ie8ij9h
    @user-de4ie8ij9h7 ай бұрын

    Hi sonny great work shared fo free thanks.. i would ask if it it is necessary for a beginner to watch your project with next js 12 before take this new next js 13 projects?

  • @thedeveloperadam
    @thedeveloperadam9 ай бұрын

    Sonny bro insane. You helped me land my first role nearly two years ago - I'll be picking up one or two of these just to get to grips with some nextjs! Thanks brother!

  • @tamimjabr1648
    @tamimjabr16488 ай бұрын

    You are just awesome my friend . I have one question in 1:14:00 you are posting the form but not emptying the fields after. how can we do it? because we can't relay on pending, it maybe will be some error there

  • @afaqahmad8918
    @afaqahmad89188 ай бұрын

    I'm starting this course, Inshallah this course will be extremely beneficial for me.

  • @codetonic_arush
    @codetonic_arush8 ай бұрын

    Really osm !! Video Sunny ! But I would like to suggest something, Lower the background music little bit more so that we more focus on coding part. It's actually distract very much and doesn't allow us to watching video for long time.

  • @dng6095
    @dng60959 ай бұрын

    please cover react native with backend.

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt8 ай бұрын

    Wow thanks 😮

  • @user-rk1df4ef2d
    @user-rk1df4ef2d5 ай бұрын

    i missed you at cleverprogramming, and since then i have been looking for your channel, thank God i found you

  • @SonnySangha

    @SonnySangha

    5 ай бұрын

    Glad you found your way!

  • @user-rk1df4ef2d

    @user-rk1df4ef2d

    5 ай бұрын

    when are going to run a program like profit with javascript am new to software programming@@SonnySangha

  • @truongkhanguyen6241
    @truongkhanguyen62418 ай бұрын

    I've never worked with Next, I have a little experience with react, is this course for me? Anyway thanks bro, this is cool ❤

  • @carmechanic5497
    @carmechanic54978 ай бұрын

    Amazing

  • @huzaifaansari8085
    @huzaifaansari80859 ай бұрын

    Wow sounds Good

  • @ofekashkenazi6643
    @ofekashkenazi66438 ай бұрын

    hi there sonny awsome video im very like your work :) , in your trello clone on the openaiapi config there is problem : Module '"openai"' has no exported member 'Configuration'. if you can tell us quick fix it will be great .

  • @AhmadFauzi-ek8ke
    @AhmadFauzi-ek8ke9 ай бұрын

    is possible to using server component in same page when searching using query params?

  • @scott_itall8638
    @scott_itall86388 ай бұрын

    Would love to see a Sveltekit version of this.

  • @mnawebprogrammingbd
    @mnawebprogrammingbd3 ай бұрын

    wow! totally awesomw

  • @mobinakhter7081
    @mobinakhter70819 ай бұрын

    React native project with backend please, I'm on my knees! Been a long time. Topic wishlist: Push notifications, multi factor authentication, admin panel, chatbot

  • @KARIAP
    @KARIAP8 ай бұрын

    The day after tomorrow is gonna be a busy day, i already have other prjects to work on, this will take me a loooot of time.

  • @YAMINIFAVARKAR
    @YAMINIFAVARKAR8 ай бұрын

    Thanks sir....

  • @trailers8224
    @trailers82249 ай бұрын

    Great job!! How come there is no grammarly Clone on KZread you should do it!!

  • @tolaseadegbite1027
    @tolaseadegbite10278 ай бұрын

    This guy is fiireeeeee!!!!

  • @abdulsalam_wariz
    @abdulsalam_wariz7 ай бұрын

    Do you need to have a solid understanding all the other technologies before starting this course or the course will teach it along the way through practice?

  • @m.bashar4309
    @m.bashar43099 ай бұрын

    Waiting waiting

  • @shaykhmirzaban
    @shaykhmirzaban6 ай бұрын

    Awesome Sir ❤❤😊😊

  • @parkerrex
    @parkerrex8 ай бұрын

    bro this slaps

  • @ulvinasibli
    @ulvinasibli9 ай бұрын

    master in the house:)

  • @deividcuello3623
    @deividcuello36238 ай бұрын

    Hey Sonny, I have seen how you make so many clones of sites like google docs, youtube, tiktok, etc... to do everything you do, you see some tutorials or you rely on the documentation and make your projects based on everything you know without help from any video?

  • @user-ms5vs5on7b
    @user-ms5vs5on7b8 ай бұрын

    Hey Sonny please make a full stack social media web project with next js and monhodb express, and node ❤❤

  • @ahsanjawed9543
    @ahsanjawed95438 ай бұрын

    what are the prerequisites for this course?

  • @neilmerchant2796
    @neilmerchant27968 ай бұрын

    Fire music selection, what's the track at the beginning??

  • @thebugcoder3391
    @thebugcoder33918 ай бұрын

    If the newest chats are in the bottom, how would you make it so that it automatically scrolls to the bottom when a message got sent?

  • @buggycoder7900
    @buggycoder79008 ай бұрын

    I like the part when Sonny said zero interruption kinda reminds me of Kazi when he used to disturb when Sonny explains something 😅.

  • @khattasallaman337
    @khattasallaman3379 ай бұрын

    Papa React is Playing. Let's Go.

  • @bigjupiter3814
    @bigjupiter38148 ай бұрын

    Can yo do an app that can handle Background Task even if the app is closed?

  • @fullstackryan
    @fullstackryan7 ай бұрын

    How does the editor predict what you are about to code? For example, it knew you were going to do a Todo card before you even built the Todo card

  • @itsamadalo9974
    @itsamadalo99749 ай бұрын

    Early init 👏

  • @benched1320
    @benched13209 ай бұрын

    Pls which videos shoul i start watching if i wanna be as good as you..... i just discover your channel

  • @govardhanyadav7378
    @govardhanyadav73788 ай бұрын

    I gotta question for you man(who ever completed this course)......do i have to have any prior knowledge of typescript and tailwind css to begin this journey or does sonny teach them along the way in this massive 18 hrs course....PLEASE LET ME KNOW

  • @cryptod6976
    @cryptod69768 ай бұрын

    hey sonny thanks for this beautiful and valuable course! I'm wondering how I can find the repos that include this projects? Should I enroll to course to reach there? Thanks for the info

  • @SonnySangha

    @SonnySangha

    8 ай бұрын

    It’s all available, join the course to get access! Links in description

  • @danblock8002
    @danblock80029 ай бұрын

    If I move a column, I get TypeError: Cannot read properties of undefined (reading '0') on this line const startCol: Column = { id: startColIndex[0], todos: startColIndex[1].todos, }; Also if I move a card into a column with an existing card, the card that was there before, doesn't display

  • @sudhanshugautam425
    @sudhanshugautam4256 ай бұрын

    Will you teach all tech stack used? Like graph Ql , redis etc

  • @ElohimCode
    @ElohimCode9 ай бұрын

    Thanks for this invaluable and transformative tutorial. I want to request for a tutorial that the system FE is built using NextJs and comsume the data through APIs. And how to manage auth leveraging on cookies.

  • @Godavari322
    @Godavari3229 ай бұрын

    Yessir

  • @codingvidyalaya8370
    @codingvidyalaya83709 ай бұрын

    Sonny please in detail❤❤❤❤

  • @sushei6303
    @sushei63037 ай бұрын

    Thank you for creating this video. I'm quite a newbie and just wondering, is it better to use server actions in a server component than in client component? 1:25:40

  • @sushei6303

    @sushei6303

    7 ай бұрын

    Can I achieve the button UI change ("Adding...") when using server components?

  • @solarspear27
    @solarspear279 ай бұрын

    I don't think server action revalidateTag is working in production. I built but the UI never updated.

  • @kewalkandpal
    @kewalkandpal9 ай бұрын

    🔥

  • @Skalexsong
    @Skalexsong9 ай бұрын

    Lets gooo

  • @chrisbarklem2627
    @chrisbarklem26277 күн бұрын

    I was wondering which of the many Visual Studio 'React Functional Component' snippet extensions you are using in this video?

  • @petrpospisil4484
    @petrpospisil44845 ай бұрын

    Amazing content as always! Does anybody know where to get his playlist ? :)

  • @TomNook.
    @TomNook.9 ай бұрын

    Good grief, you're giving away insane value and expertise in these projects!

  • @SonnySangha

    @SonnySangha

    9 ай бұрын

    🙏🏽❤️

  • @satsatdown
    @satsatdown8 ай бұрын

    is there a github repo for these?

  • @joshuaelsonhonu4634
    @joshuaelsonhonu46349 ай бұрын

    You are doing so well, sir. Thank you. How do I reach ?

  • @SonnySangha

    @SonnySangha

    9 ай бұрын

    Thanks! Hit us up at team@papareact.com

  • @joshuaelsonhonu4634

    @joshuaelsonhonu4634

    9 ай бұрын

    Okay. Thanks

  • @kahinrisan
    @kahinrisan8 ай бұрын

    Hey bro hope you are well, bro i have a request for you.. Can you make a full stack real estate website video using mern stack or next js. I am trying to find something like this on youtube. But most of the videos are very basic real estate website they made, If you have time please make a advance real estate website with all advance features. Thank you i will be waiting for the video. Have a good day.

  • @GeoPulseNetwork

    @GeoPulseNetwork

    8 ай бұрын

    💯

  • @KazimNasri
    @KazimNasriАй бұрын

    Please Make more projects on NEXT.js

  • @asit_dixit
    @asit_dixit9 ай бұрын

    please make a video of clerk authentication. You will love it.

  • @SonnySangha

    @SonnySangha

    9 ай бұрын

    Good idea!

  • @asit_dixit

    @asit_dixit

    9 ай бұрын

    @@SonnySangha also shadcn ui. Are you Indian?

  • @koustavmaity-fh3gx
    @koustavmaity-fh3gx9 ай бұрын

    There are types at 'c:/Users/Koustav/Desktop/portfolio-project/trello-clone/node_modules/appwrite/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'appwrite' library may need to update its package.json or typings. how to fix this

  • @arthycho_4320

    @arthycho_4320

    9 ай бұрын

    in your tsconfig.json, put "moduleResolution": "node" instead of "bundle" ;) got the same too

  • @vigneshnayak7194

    @vigneshnayak7194

    9 ай бұрын

    ​@@arthycho_4320 thank you bro it worked

  • @hxntw
    @hxntw9 ай бұрын

    hello npx create-next-app -e with-tailwindcss youtube-nextjs-demo this command is not installing a nextjs-app. Please can someone help

  • @ericklatin81
    @ericklatin819 ай бұрын

  • @toheebalawode1634
    @toheebalawode16349 ай бұрын

    Sonny will you later release the video on KZread, I mean the full video

  • @SonnySangha

    @SonnySangha

    9 ай бұрын

    Yes & timestamped!

  • @geniusstudent8804
    @geniusstudent88048 ай бұрын

    Hey there! I can't express how grateful I am for your incredible tutorials. Thanks to your guidance, I've transformed into a skilled front-end developer. Your step-by-step instructions and insightful explanations have been my compass on this learning journey. It's astonishing to think that all of your hard work has led me to land an amazing job in this field. Your dedication to teaching has made a profound impact on my life, and I'm truly indebted to you. Keep shining your light and inspiring budding developers like me. Thank you from the bottom of my heart!

  • @SonnySangha

    @SonnySangha

    8 ай бұрын

    Thank you so much for the support I’m so so glad I could help you, keep crushing & growing!! #PAPAFAM

  • @VskiDevs
    @VskiDevs7 ай бұрын

    hohoho... here we goooooo

  • @_034_divyanshusrivastava6
    @_034_divyanshusrivastava68 ай бұрын

    man! such hard british( i assume ) accent, having hard time understanding...🤣 NEVERTHELESS course is amazing🔥

  • @codingvidyalaya8370
    @codingvidyalaya83709 ай бұрын

    Waiting sonny

  • @shaiadul
    @shaiadul8 ай бұрын

    In Appwrite my collection attributes show just processing !! please give me any solution . when I want to create a new attributes again show processing .

  • @akumaw752
    @akumaw7528 ай бұрын

    Hello, do we have to pay to get Sanity ?

  • @moszaa010274
    @moszaa0102748 ай бұрын

    hello brother, could you add timestamp in video? thanks so much!

  • @ahmednoureldin6659
    @ahmednoureldin66597 ай бұрын

    is it for beginners who just write simple reactjs code ?

  • @ImranShaikh-el3ls
    @ImranShaikh-el3ls9 ай бұрын

    One person who always teach new things that we even never thought about it and that person who never disappoint us and that person is non another Sonny 🤩🤗. Apperciate you man 👏. You always taught me things from my starting career to till now. I loved it ❣

  • @SonnySangha

    @SonnySangha

    9 ай бұрын

    So nice of you to say I’m glad I could help!!! Keep crushing #PAPAFAM

  • @jamararrington4426

    @jamararrington4426

    8 ай бұрын

    @@SonnySangha Should I start with this even if I have no previous experience?

  • @adarsh_endeavour

    @adarsh_endeavour

    6 ай бұрын

    @@jamararrington4426 no bro u need to have clear the basics of node and express atleast after this you can good to go.

  • @judevector
    @judevector9 ай бұрын

    What the fuck did i just see now , am amazed to what am watching now 😮❤

  • @akashkumar-dp5lb
    @akashkumar-dp5lb9 ай бұрын

    umm i was expecting new projects btw lots of love

Келесі