Next.js Full Tutorial for Beginners | Next.js 13 Full Stack App Using App Router

Ғылым және технология

Learn Next.js in 2023. The complete Next.js Course for beginners. Create a full stack app using Next.js 13 App Router, Auth.js, MongoDB, SSR, CSR components.
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code:
github.com/safak/nextjs-tutorial
Join Lama Dev groups
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
Twitter: / lamawebdev
0:00 Introduction
02:02 Next.js Crash Course (Why You Should Use Next?)
04:34 Next.js Installation
07:39 Next.js Folder Structure
08:50 Next.js Routing Tutorial (App Router)
15:35 Next.js Layouts and Components
23:50 Next.js Rendering Explained (Server side and Client side)
30:35 Next.js Styling (Global and Module CSS)
40:28 Next.js Image Explained
49:30 Next.js App UI Design
01:27:53 Next.js Dark/Light Mode Tutorial
01:33:02 Next.js Context API Tutorial (App Router)
01:38:55 Next.js Data Fetching Explained (Static, Dynamic)
01:45:50 Next.js How to Fetch Data on the Client Side? (SWR Tutorial)
01:51:04 Next.js How to Fetch Data from Local Json File?
01:54:15 Next.js MongoDB Full Stack App Tutorial
02:02:16 Next.js API Folder and CRUD Operations (App Router)
02:11:14 Next.js SEO Tutorial (Static and Dynamic SEO)
02:14:45 Next.js Auth Tutorial (New App Router)
02:16:50 Next.js Google Auth (Sign in with Google)
02:25:15 Next.js Credentials Auth (Sign in with Email and Password)
02:45:16 Next.js Protected Routes with Auth.js
02:49:31 Next.js Admin Dashboard Tutorial
03:01:30 Next.js SWR Mutation
03:05:20 Outro

Пікірлер: 626

  • @emanuelameh5722
    @emanuelameh5722 Жыл бұрын

    Words are not enough to express my feelings of gratitude towards you. You made me believe in myself when I thought I wasn't good enough. I built my first full-stack project following your tutorials. Now I've finally found a job in tech and it's all because of you. This too is definitely worthy of a watch. Thanks man!

  • @hojo3021

    @hojo3021

    11 ай бұрын

    You should donate a small amount of ur salary.

  • @adimardev1550

    @adimardev1550

    11 ай бұрын

    same here man. i'd been following lama dev for so long, and I can never pay him back

  • @emanuelameh5722

    @emanuelameh5722

    11 ай бұрын

    @@adimardev1550 I'd definitely recommend him to anyone who wants to take their dev skills to the next level.

  • @HrissW

    @HrissW

    11 ай бұрын

    @@emanuelameh5722 how long you've been studying? Which resource did you follow to crack coding interviews? I was stuck in tutorial hell for a year now

  • @emanuelameh5722

    @emanuelameh5722

    11 ай бұрын

    @@HrissW I started learning to code in 2020. I suggest you start using your skills to build something, like a full-stack project with authentication while you still create create time to watch some of those project-based tutorials like this one since it's how you stay up to date with the latest technologies. Also remember to constantly refresh your knowledge of the basics(JavaScript). Good luck.

  • @ubongeffiong7548
    @ubongeffiong754811 ай бұрын

    I'm grateful for this. I've watched a couple tutorials and they weren't beginner friendly, but this one is everything. Just finished it and followed step by step. You're good at this!

  • @mayarjaba6731
    @mayarjaba6731 Жыл бұрын

    Mr. Lama, you are my first teacher♥♥♥ Thank you for everything you do for us♥ I pray to God for success and guidance for you♥

  • @lanskaba3668

    @lanskaba3668

    Жыл бұрын

    Same

  • @deepakmane387

    @deepakmane387

    Жыл бұрын

    your teaching style of breaking down difficult things to easier way is great. Your sincere efforts are seen in each and every video Lama. God bless you

  • @vthevest9183
    @vthevest918310 ай бұрын

    I hardly ever comment on tutorials, but DAMN!! Your explanation is beautiful, on-point and so easy to follow and understand. It feels illegal to see this free. Thank you so much for being such a kind human being and sharing these projects, I'm only 30 minutes in and I can already see myself learning so much after finishing it. Thank You.

  • @milck_br7549
    @milck_br7549 Жыл бұрын

    Hi, I would like to thank you very much. I bought programming courses, watched several videos, but when your video was recommended to me and I watched it, I was impressed with the level of content offered for free. Your methodology is incredible, the way you create diagrams to facilitate understanding, your oratory... Very impressive. I'm from Brazil, and you're helping me a lot. Thank you.

  • @hamzabout7001
    @hamzabout7001 Жыл бұрын

    You have the utmost appreciation and respect

  • @picabo7008
    @picabo7008 Жыл бұрын

    Nothing can describe how I am grateful to your effort for doing my day to day learning struggle easier, thank you Mr. Lama.

  • @ahmedaq9018
    @ahmedaq901811 ай бұрын

    Hey folks, Lama Dev master is one of those rare developers who genuinely wants to share knowledge and teach people for free. He truly knows his stuff and has a knack for making complex concepts easy to understand. His skills are off the charts, and he's a master at what he does. Really thanks a lot Lama Dev for everything 🌹🌹🌹👏👏👏👏👏👏

  • @kashmirtechtv2948
    @kashmirtechtv2948 Жыл бұрын

    Guys he knows what to create and he's already doing it in a very Professional way with accurate sequence, so now focus on NEXT JS please ❤️

  • @max_livi
    @max_livi9 ай бұрын

    Thank you so much. I decided to find out the next 2 months ago. It's just fate that I came across your video. Everything just fell into place. Thank you for helping novice developers. The best math with a stack of JS, CSS, React, Next, Mongo I haven't seen it!!!

  • @rxman-plays
    @rxman-plays11 ай бұрын

    Thank you! Cant thank enough to you. I completed my FYP, building an ecommerce web application by learning through your video and landed an internship. Now I was told to learn next and typescript. Boom! The next day You came up with this master piece. Thank you so much.

  • @fyalinbas
    @fyalinbas Жыл бұрын

    This is what I've been waiting for from dear Shafak. You're the chosen one of the world of fullstack development. Keep going. Thanks a lot.

  • @LifeWithRilla
    @LifeWithRilla11 ай бұрын

    So much information just packed into this course. You were thorough and your course in my opinion far surpassed Zo To Masteries courses which I bought. I love the from scratch approach. This course helped me learn everything I need to know to get started with Next. Thank you! i don't follow a lot of Devs. I AM DEFINITELY FOLLOWING YOU NOW! You earned it. This was insanely good. You're a legend.

  • @TechOasis101
    @TechOasis10111 ай бұрын

    That's it I have found my ultimate Teacher. Thankyou Mr. Lama for such an amazing lesson. This lesson is Price less. I will be watching every video you will make for sure. And I'm confident that I will get my first job soon....

  • @benlamptey5208
    @benlamptey520811 ай бұрын

    Finally! A tutorial that actually shows how to use credentials as a auth provider. Everyone else has credentials auth as their youtube thumbnail then all of a sudden they are scared to show how to use it. Its so simple after watching this!! Thank you

  • @satyak1337
    @satyak133711 ай бұрын

    I spent 3 hours searching for working examples and API routes syntax in next 13. Thanks a lot. This was very useful

  • @spartaxymus
    @spartaxymus5 ай бұрын

    Came across this video and now I got the basics covered like a Pro. Many online tutorials miss out on so many little topics covered in this tutorial. While watching this video, i just wanted to quickly jump in to my laptop and start coding. Subscribing to you... Keep up the good work!!!

  • @hurleywflow2227
    @hurleywflow22279 ай бұрын

    I absolutely love your tutorial. It's very down-to-earth and easy to follow.

  • @stevenoketch6950
    @stevenoketch695011 ай бұрын

    Lamadev has been great this year, amazing projects with extensive explanation, cheers 🥂

  • @kaleabtesfu7970
    @kaleabtesfu797011 ай бұрын

    Was pulling my hair out trying to figure out how to update the content without refresh. Ended up holding off on my site just to finish this one. Great Job mate. Thanks

  • @zubaydullookhunboboev8576
    @zubaydullookhunboboev857610 ай бұрын

    Bro I watched other courses but none of them is intuitive and friendly like your tutorial. I surely consider your way of teaching web dev is much more effective than other tutorials, even paid ones in Udemy. Thanks for all your effort.

  • @omnathdixit4720
    @omnathdixit4720 Жыл бұрын

    Thanks Lama, I am waiting from a long time for a Next js tutorial. Again I thank you for your teaching style which is very impressive.

  • @DEBUGENTITY
    @DEBUGENTITY10 ай бұрын

    this is one of the best explaination video on next js i ever seen on youtube, and the way u are explaining each small things that really awesome man, thanks a lot for that. keep making such frontend tutorials..

  • @lev1ato
    @lev1ato11 ай бұрын

    This is exactly what I was looking for, tutorial that covers the new app router! Thanks!

  • @IamDarkAngeL1
    @IamDarkAngeL1 Жыл бұрын

    LameDev you're too way Next lvl 4 me, i can't believe those amazing content, you're really a true hero for us! thanks a lot !!!!!!

  • @thesoftwareengineersjourney
    @thesoftwareengineersjourney Жыл бұрын

    I experienced an incredible sense of happiness upon receiving the notification for this tutorial. Thank you, Lamadev and God bless you.

  • @user-lp7oy8di4t
    @user-lp7oy8di4t7 ай бұрын

    "Great video! Looking forward to more tutorials on Next.js projects, especially ones related to inventory management. Your content is always top-notch!"

  • @mulualemmhretu
    @mulualemmhretu Жыл бұрын

    Mr Lama ,I would like to say thank you. You always make excellent tutorial . We love your tutorial . You gave us priceless knowledge ❤❤❤

  • @fancyaristocrat7450
    @fancyaristocrat745010 ай бұрын

    Thank you very much, I thought learning a new framework would be hard but you help me get through it. Thank you very much.

  • @nasssty284
    @nasssty2848 ай бұрын

    One of the greatest tutorials i have come across... Thank you so much for giving it out freely!

  • @deumolo
    @deumolo11 ай бұрын

    Finally finished this project and i can't believe how good it is. The list of things we learned with it is incredible: SWR Next-auth App router bcrypt Mongoose The list goes on and on. Thank you, Mr. Lama.

  • @TerryMitchell

    @TerryMitchell

    11 ай бұрын

    Have you managed to successfully deploy this online? It works beautifully in dev and even local production mode, but whenever I deploy to Vercel the build fails every single time when building the blog page(s) - even with the production URL hard-coded where we're fetching the blog posts, if you have I'd appreciate any tips you may have, thanks in advance.

  • @rizwankhan-xg8rh

    @rizwankhan-xg8rh

    10 ай бұрын

    @@TerryMitchell Hello I have an issue regarding creating the database at 2:06:0 I don't have a database created in MongoDB if you have some time kindly make clear my doubt

  • @ibstudiosHD

    @ibstudiosHD

    9 ай бұрын

    @@TerryMitchell Vercel can only be used for front end Projects. Any project that involves a database cannot be deployed on Vercel Try other hosting platforms like hostinger or GoDaddy although you have to pay a little to host there. I would have referred you to Heroku but the platform is down

  • @amir4ever148

    @amir4ever148

    9 ай бұрын

    is portfolio part dynamic can we add more projects later on that part?

  • @maxnao2624

    @maxnao2624

    8 ай бұрын

    im getting error when trying to login, im stuck at next auth login the screeen at 2 hour 24 min 22 sec is not appearning for me please help

  • @denysgl3732
    @denysgl373211 ай бұрын

    Dear Lama Dev, thank you so much for yet another great tutorial video on such a highly demanded topic as Next JS 13 is. Could you please show us a use case of Internalization in your new Next JS project?

  • @mahsanr44
    @mahsanr4410 ай бұрын

    I rarely comment on videos but I'm doing on this one, I have no words, man. You explained everything very well.

  • @divinechukwuka7711
    @divinechukwuka771111 ай бұрын

    Your tutorials are top-notch sir. You make this whole coding stuff easy. So much grateful sir

  • @hrikbansaha887
    @hrikbansaha88711 ай бұрын

    Words won't be enough for appreciation of your video. Thank You so so so much. For the knowledge you gave through this video.

  • @zmanavar
    @zmanavar10 ай бұрын

    Brilliant tutorial, I've finally understood something and got the result. Thank you!

  • @gypsicoder
    @gypsicoder11 ай бұрын

    Thank you so much for this great in-depth tutorial. It's really helped me a lot to have an experience in developing a project in NextJS.

  • @moseschris9756
    @moseschris975611 ай бұрын

    This is a wonderful and a powerful video for a beginner. Since I started following your channel, I always make progress. Thank you sir

  • @salawuabdullahiolalekan4338
    @salawuabdullahiolalekan43388 ай бұрын

    Great insight. You made backend development simple. Thank you for this great piece.

  • @abhisheksharma10600
    @abhisheksharma106009 ай бұрын

    This is the best tutorial to learn NextJS!!! I cannot thank you enough.

  • @TerryMitchell
    @TerryMitchell11 ай бұрын

    An excellent tutorial, I can thoroughly recommend this! Thanks so much for all your work

  • @ogbonnashedrack916
    @ogbonnashedrack91610 ай бұрын

    I’ve watched only 10 mins and I couldn’t wait to tell you thank you for explaining each steps in the most basic way ever, you even told us the name of the extensions applied Every video I’ve seen is using typescript until I found yours ❤️

  • @Seeking_Solace

    @Seeking_Solace

    10 ай бұрын

    You shouldn't be avoiding TypeScript in the first place.

  • @moulevj6731

    @moulevj6731

    8 ай бұрын

    @@Seeking_Solace true !

  • @manoharsingh5704
    @manoharsingh570411 ай бұрын

    Love the way you clearly explained ❤️❤️❤️❤️ Much appreciated 👍

  • @christostsm5795
    @christostsm5795 Жыл бұрын

    Would be awesome to see a nextjs with typescript / prisma - mysql :) Congratz for your awesome work @Lama Dev

  • @kashmirtechtv2948
    @kashmirtechtv2948 Жыл бұрын

    Love love love. Was looking for this from your side

  • @isiaqridwanbukola4856
    @isiaqridwanbukola4856 Жыл бұрын

    May you be blessed man This is definitely a great project and portfolio worthy

  • @jotasenator
    @jotasenator9 ай бұрын

    I am enjoying so much following those steps, kudos for you and more!!!

  • @Alim-yo3sc
    @Alim-yo3scАй бұрын

    Hi, I'm watching this tutorial and really loved it when you warned the audience at this moment 29:33 of the video. It shows that you're a decent man and also indicates that you're very familiar with late night owl programmers 😄. I have also watched some of your other tutorials and they helped me a lot. So I wanted to thank you again. YOU ARE A GREAT TEACHER...

  • @poisegaming2448
    @poisegaming244811 ай бұрын

    1:58:58 you can use this config to work with mongoose 7 version It is a lambda function and just use the given configs. import mongoose from "mongoose"; let isConnected = false; export const connectToDb = async () => { mongoose.set("strictQuery", true); if (isConnected) { console.log("Already connected to the database."); return; } try { await mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); isConnected = true; console.log("MongoDB connected successfully."); } catch (error) { console.error("Error connecting to MongoDB:", error); isConnected = false; } };

  • @kolthir
    @kolthir11 ай бұрын

    Better than a Udemy course, words are not enough to this....BETTER KZread CHANNEL!!!!!

  • @nazrulhassan6310
    @nazrulhassan63108 ай бұрын

    hats to you lama dev. I followed some other projects on next js that were overtly complicated but the problem with them is that they just wrote some code and didn't bother to explain it and after weeks of struggling I figured most of the code was copied and pasted.

  • @alionar60
    @alionar609 ай бұрын

    You explain very cleanly and well, thank you!

  • @qantar8167
    @qantar8167 Жыл бұрын

    Big thanks for this video, I am so excited! I have been planning to look into next for a while already. Guess this is the sign)

  • @ScriptyVijay
    @ScriptyVijay Жыл бұрын

    I was just thinking to take course but you came with this video ❤ thanks

  • @user-js9bj9mi7x
    @user-js9bj9mi7x8 ай бұрын

    that was simple and clear! such a great resource for learning, thank's a lot

  • @gamingarena5045
    @gamingarena5045 Жыл бұрын

    Sir you explained everything and I appreciate you for your hardwork. ❤❤

  • @KrishnaList
    @KrishnaList8 ай бұрын

    The way you explain end to end is very nice writing from scratch css. I really like your all videos

  • @jamesrussell-ui6gd
    @jamesrussell-ui6gd11 ай бұрын

    your css skills combined with backend is unmatched! you are a god

  • @mtcindianutube
    @mtcindianutube9 ай бұрын

    Amazing course content. Helped me to learn NextJS. Thank you so much Lama Dev :)

  • @adesojisotubo916
    @adesojisotubo916 Жыл бұрын

    Lama, you are highly loved by me, thank you so much for everything 🙏

  • @symphoristsaguenguegang232
    @symphoristsaguenguegang23210 ай бұрын

    Hello Lema, You are exceptional, your methods are simple and understandable by all. Please can you make us a video on react/Next with typescript and with directus as CMS??

  • @srhtonr5917
    @srhtonr5917 Жыл бұрын

    Bro, I've just downloaded a next js template yesterday and decided to learn next js. What a day! :)

  • @cheekibreeki360
    @cheekibreeki3609 ай бұрын

    Brother im 30 minutes in and the way you explain stuff is amazing, keep up the good work, subscribed immediately.

  • @stanleychukwu7424
    @stanleychukwu7424 Жыл бұрын

    thank you so much lama, this was extremely timely!

  • @hyperst8
    @hyperst88 ай бұрын

    Thanks Lama Dev. Your tutorial is easy to follow. Also a plus that you provide link to your repo.

  • @viniciusm.m.7822
    @viniciusm.m.7822 Жыл бұрын

    Love u, man! Thanks, God bless! Abraço do Brasil

  • @jackfrost8969
    @jackfrost89699 ай бұрын

    20 minutes into this video and I've already liked. I can just tell the content is amazing.

  • @coder5336
    @coder5336 Жыл бұрын

    We were waiting for this course so long. I'm glad that you released that after the new stable app router

  • @asfandyar8088
    @asfandyar808810 ай бұрын

    Thanku lama dev for such a great tutorials that covers most important topics of nextjs-13. Always fan of yours 💯

  • @oznwachukwu6653
    @oznwachukwu665311 ай бұрын

    God bless you my friend 🙏🏾. I feel like this tutorial has been the hardest to find. They are either non existent or out of date. 🎉

  • @PIRAKAS666
    @PIRAKAS66611 ай бұрын

    You're the best bro. Need more NextJS especially with tailwind css.

  • @rekalit8192
    @rekalit819211 ай бұрын

    Best tutorial ever, just loved the way you explained everything thanks for uploading it.... ❤❤😊😊

  • @winkthecat
    @winkthecat11 ай бұрын

    There's an error in portfolio/page.jsx Your link goes to /portfolio/application but it should be /portfolio/applications. Just pluralize it and you'll fix the 404.

  • @osamarehman3120

    @osamarehman3120

    9 ай бұрын

    Thankyou... i was looking for it

  • @TomWien
    @TomWien Жыл бұрын

    Had to press the like button before even starting to watch. 😊 I am new and really want to get started with a little database (including images) Thank you SIR (for all your content).

  • @Amitsarker

    @Amitsarker

    Жыл бұрын

    I am also trying to upload image, video on server and fetch it.

  • @karamsingh468
    @karamsingh46810 ай бұрын

    if having issue with [id] ... must add suppressHydrationWarning={true} in in layout.js

  • @ajmalhasan2015
    @ajmalhasan20156 ай бұрын

    Just amazing and very clear and concise video. Everything explained well

  • @hostnavin3826
    @hostnavin382611 ай бұрын

    Thanks for the tutorial. Its so simple and clear.😊

  • @reoirmiose4944
    @reoirmiose494410 ай бұрын

    You are the best of the bests lama dear dev . Keep going we are waiting for more Next.js projects by you ...

  • @lukas.webdev
    @lukas.webdev Жыл бұрын

    Awesome video! YOU crushed it - keep it up 😉🔥

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

    It's Really helpful for beginners, Thank You So Much.🥳🥳

  • @denisgarden1
    @denisgarden111 ай бұрын

    Fantastic content! Thank you! It would be great to have a video on Next JS with Django REST.

  • @yannicksims9262
    @yannicksims926210 ай бұрын

    i really enjoy learning stuffs with you. your explaination a more than perfect...Thanks You so much

  • @henrymunoz2035
    @henrymunoz203511 ай бұрын

    Just Finish the Project , it wa amazing thanks so much

  • @israelamos8896
    @israelamos889610 ай бұрын

    Thanks a million for this amazing project. You are one in billion.

  • @amoozuu5935
    @amoozuu5935 Жыл бұрын

    Sir I am searching for next js crash course video but when I get your video notification..this video is totally helpful for me and for my life .... Thank you sir ❤️❤️❤️❤️❤️

  • @ilyaasomar9173
    @ilyaasomar9173 Жыл бұрын

    thank you safak you accepted our request, i hight appreaciate you for this video i would like next project to use next.js, tailwindcss, frammer motion, redux toolkit and mongo also implement stripe payment.

  • @rodellibed9100
    @rodellibed9100 Жыл бұрын

    i need more tutorial like this sir, appreciate your effort

  • @rezwanfaysalrezon9963
    @rezwanfaysalrezon99639 ай бұрын

    I have finished the course. It has taken about 16-20 hours. (Some things had to be changed). But I enjoyed it very much. Thanks Lama Dev.

  • @frontend1576
    @frontend1576 Жыл бұрын

    Thank you so much lama for this an elegant webiste...and love you.❣

  • @tsykin
    @tsykin8 ай бұрын

    First, I want to say a BIG THANKS to lamadev for this course. It has almost everything you need to know as a Next.js developer. I have learnt so much from this. This course is the exact thing I have been looking for on KZread since it goes from total basics to advanced features. The biggest plus is that this tutorial uses very popular tech like MongoDB but at the same time doesn't use excess amount of packages. I have seen KZreadrs installing 8 packages for a simple project, while Lavadev goes with the most subtle solution, which is great for beginners. Unfortunately I am a extreme beginner developer and some concepts were a little complicated for me (NextAuth to be specific), but even them lamadev made it simpler by explaining each step of a tutorial. I really hope this channel will grow and lama will continue appearing on my screen more often ❤

  • @queenshijain3089

    @queenshijain3089

    8 ай бұрын

    Is it beginner friendly course

  • @tsykin

    @tsykin

    8 ай бұрын

    @@queenshijain3089 it depend on what you call a "beginner". You definately need basic understanding of javascript and some Next.js basics to do this course. Overall, Lama does a great job explaining all the concepts, so I recommend trying it out, just to see how it goes for you 😉

  • @md.shahebali38
    @md.shahebali38 Жыл бұрын

    You are awesome teacher i have seen ever over the internet. please make a next project with nextjs and prisma also. Thanks in advanced.

  • @sayidali431
    @sayidali431 Жыл бұрын

    Thanks safak or Lama always amazing teaching ❤

  • @Dreamingofrainbows
    @Dreamingofrainbows11 ай бұрын

    Absolutely amazing video!!! Thank yuo so much for your time and effort! Could you please create a tutorial where you'd use TS?

  • @khalidck17
    @khalidck1711 ай бұрын

    Awesome as usual. Please make a video on necessary css required for learning reactjs.

  • @keshavakumar9828
    @keshavakumar9828 Жыл бұрын

    Thank you lama. Going to start builsing this from today.

  • @TechBagh
    @TechBagh Жыл бұрын

    Great!! Hope next project will cover E-commerce related stuffs and tech stacks Nextjs, Typescript, prisma, MongoDB, payment integration and its deployment.

  • @sasqo
    @sasqo Жыл бұрын

    I like your beginner wise approach. and you have also a very good voice. I will just watch it like a movie 🍿

  • @rockbelleh6237
    @rockbelleh6237 Жыл бұрын

    Wow....lama been waiting for this for ages...tnks alot d best of d best

  • @user-jy6es9wx8l
    @user-jy6es9wx8lАй бұрын

    I'm grateful for this Tutorial. I want learn how to develop social media platform with Nextjs 14

  • @AlexSilva-ye2lp
    @AlexSilva-ye2lp Жыл бұрын

    Great tutorial. I think that a blog project with nextjs and sanity cms would be a nice video 👌.

Келесі