Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript

Поділитися
Вставка
  • Опубліковано 6 лют 2025

КОМЕНТАРІ • 547

  • @programmingwithmosh
    @programmingwithmosh  Рік тому +32

    - Want to learn more? Get my complete Next.js series: bit.ly/nextjs-series
    - Subscribe for more videos like this: goo.gl/6PYaGF

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

      Thank

    • @dmtornado2569
      @dmtornado2569 Рік тому +1

      Broken link for 'complete Next.js series'?

    • @miladesmailpour192
      @miladesmailpour192 Рік тому +3

      great quality content, but as soon you subscribe to their website they keep charging you even after unsubscribing. they don't let you delete your credit info and respond the way it is our fault, like we can do anything about the autorenewal, not fix their website issue which is not secure and reliable to add credit info.

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

      when will next part will come this videos

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

      @@miladesmailpour192 Just pay the $19 for the full course rather than subscribe.

  • @kylefinken329
    @kylefinken329 9 місяців тому +18

    Literally looked all over for a video to just run over how next 13 renders pages, how the app router works, and how to fetch data and couldn't find anything decent until this. Really appreciate the content!

  • @koiko21
    @koiko21 Рік тому +150

    I really want to say thank you for all your tutorials, Mosh. Because of you and a few other influential teachers (like Brad Traversy and WebDevSimplified), I was able to become a software engineer from a non-technical background 2 years ago. Your tutorials have been invaluable for me since day 1. Your tutorials helped me get my first job and learn on the job. Now that I'm 2 years into my career, I'm being given opportunities to lead software projects at my company and even now you are still teaching me. I'm not sure if you'll ever see this comment, but I just wanted to say thank you for dedicating your life's work to making tech accessible for all. Thank you thank you thank you!

    • @madhupaka3774
      @madhupaka3774 Рік тому +2

      Hey, @koiko21 I am from India. I have just graduated from college and I am looking for remote jobs in MERN stack. Can you help? I need to change my job very badly. Thanks.

    • @hisyamudinhossain6643
      @hisyamudinhossain6643 5 місяців тому

      continue ur journey with devops, software design and analysis, project management, sdlc, etc bro to became sr developer

  • @缪培康
    @缪培康 Місяць тому +4

    About three or four years ago, I mastered React through your course, and now I've purchased your Next.js course. I think you are an excellent programmer who truly understands how to teach.

  • @dee.s.4513
    @dee.s.4513 Рік тому +38

    Mosh is an excellent instructor, he knows his subject, and knows how to put himself in the place of his student. Just look at the text size--so easy on the eyes. I learned a lot, and easily, just from this one hour.

  • @tutopoints1920
    @tutopoints1920 Рік тому +51

    I wanted to let you know that you're a legend sir, you have changed live, you've changed people who were hopeless, you took people from 0 and made them heroes.
    Thank you sir and may God bless you

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

    I couldn't understand when I read other channels. But when I watch your channel, I see every things become easy. Thank you very much!

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

    best teacher i have ever seen.i already bought 10 courses and learned so much from mosh.
    hope to develop skills as mosh.thank you brother

  • @abdallahmah1867
    @abdallahmah1867 Рік тому +4

    Hi Mosh, I want to express my heartfelt that I learned a lot from you during my career. Clean coding, efficient resources which I never see any other one in UA-cam and Totutorials.
    I like the way you prepare and make your content to build beatiful course material and sections.
    I can say every time you surprised me how you organise and prepare you content.
    Best regards,
    Abdallah Mahmoud

  • @genzolowo
    @genzolowo Рік тому +1

    I love Mosh! I remember when I was learning python back in 2022, Mosh explained it so well, and I was able to easily comprehend it, I trust this Next.js tutorial will be nothing but awesome. Thank you Mosh for all you do.

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

    As an Iraninan, I proud of you Mosh
    دمت گرم که انقدر خفنی، فقط ای کاش راهی وجود داشت که ما که داخل ایرانیم هم بتونیم از دوره هاتون استفاده کنیم، خرید به دلار واقعا سخت و دشواره، هم از لحاظ مالی هم اینکه تحریمیم و سرویس های بین المللی نداریم.
    خلاصه که دمت گرم، خیلی دوست داریم.

  • @FattahilTanha
    @FattahilTanha Рік тому +1

    thank you mosh...you dont even know my much you helped me... I am a new student hopefully a future dev....i'll remember you always. I've learned a lot from you....and now learning next js....thank you a lot....i wish I could buy the premium next js course....then none can stop me....but unfortunately I cant....but still never gonna giveup...i'll learn next js.....and again thank you a lot sir mosh....respect+++

  • @aasifbinmohammad
    @aasifbinmohammad Рік тому +33

    Hi Mosh,
    I just wanted to express my heartfelt gratitude for creating the Next.js course. Your dedication and expertise shine through every lesson, making it an invaluable resource for anyone looking to master Next.js. I've learned so much and feel confident in my Next.js skills thanks to your clear and engaging teaching style.
    Your hard work is greatly appreciated, and I'm looking forward to continuing my learning journey with your guidance. Keep up the fantastic work!
    Best regards,
    Aasif Mohammad

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

      hey bhai is this a new version of javascript?

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

      @@piyushsalvi1580 It is a framework that is built on top of React. You will have to learn JS first, then React, then Next. It is not very difficult, but take your time with it, do not rush.

    • @piyushsalvi1580
      @piyushsalvi1580 Рік тому +1

      @@_ash64 thanks ash

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

    just wanted to say how much I appreciate your channel! Your way of teaching is incredibly clear and easy to follow. You have a talent for breaking down complex topics into simple, understandable steps. Every video feels like I’m learning something valuable without feeling overwhelmed. Thank you for all the effort you put into making your content so informative and accessible. keep up the amazing work!

  • @wierdcontents5362
    @wierdcontents5362 Рік тому +1

    3 yrs ago you taught me python, an today i still learn from you , Mosh sensei

  • @noonenoone5121
    @noonenoone5121 Рік тому +15

    I like your calm and fun voice when explaining, as well as keeping things short and sweet without wasting time, and the process of picking up subjects at the right time, not to forget avoiding complexations, and the good explanation, which is one of the best by the way. Honestly Mosh, you're the best teacher that has taught me, not just in programming, but the best teacher at all. I'm always happy, learning from you, it always feels joyful 😊

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

    This tutorial was so well presented, that I did not encounter a single bug following it while at the same time keeping me interested till the last minute! Usually, I get bored half way through because the information isn't relevant at some point but this tutorial was precise, to the point and the time flew by.

  • @shahnewazrakib
    @shahnewazrakib Рік тому +1

    I can't believe, yesterday I was thinking of learning Next.js and today I got a video of Next.js uploaded by my best instructor. 😮😮❤

  • @militoarturo
    @militoarturo Рік тому +2

    I needed to learn the new Next.js 13 way of defining pages for my new project and I wasn't disappointed. Loved it! Will be using the recommended libraries as well

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

    Very nice, I am a MERN developer, now i am learning NEXTJS, this tutorial is very usefull...

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

    Great video ,I have learnt a lot .Just to help who didn't know , the app explained in the first few minutes of the video is explained in the other video on the channel.

  • @thane-j
    @thane-j Рік тому +4

    No one ever teach somethings that easy, understandable and also in depth!! Mosh really a genius!

  • @adam-user
    @adam-user Рік тому

    Mosh is the best technical lecturer on the Internet! Thanks man for this great video!

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

    Probably the best tutorial I have seen since a long time! Thanks Mosh

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

    Mosh the way you explained Link, server client components with the inspect panel is next level.........hats off man

  • @malachibergman902
    @malachibergman902 10 місяців тому

    I have not watched this whole video quite yet. I always go searching youtube for good videos to help me. I have found several good channels, including yours.
    There is something about how you structure your videos, your visuals, and most importantly your personality in a process that is very difficult and stressful for someone who is desperately trying to quickly learn.

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

    Wonderful. I've found bunch of instructors over the internet now-a-days. But your way of explaining things is really impressive. Best of luck Mosh. Love from Bangladesh.

  • @MiSt3300
    @MiSt3300 Рік тому +1

    I can't believe this is actually for free. This editing is much better than anything on pluralsight or udemy, and it's FREE!

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

      Free? Sure, the first hour is. While it allows you can get your feet wet, without dropping $50 for the remaining 4 hours on his site you can’t really get the full benefits of this course.

    • @MiSt3300
      @MiSt3300 Рік тому +2

      @@FishTechX the first hour is all I need. I need the basics, and someone to guide me in. The rest I can do myself

  • @Daniel-nb3kk
    @Daniel-nb3kk Рік тому

    Probably the best teacher you'll find on the web!

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

    no matter wherever i go, just your words sink into my brain, thanks teacher

  • @christerjohanzzon
    @christerjohanzzon Рік тому +15

    Please never stop doing these videos! Your content is invaluable to us plebs. Such great teaching and course materials.

  • @farhanjatt6028
    @farhanjatt6028 6 місяців тому

    Best tutorial ever. Explaining critical points in very depth and fast pace. Most UA-camrs waste time in non necessary things. Subscribing your channel ❤

  • @user-rd1uf4oc7h
    @user-rd1uf4oc7h Рік тому +7

    This is only the first hour of his full course. If you are not interested in buying the full course then don't waste your time here like I did. Thanks

    • @YukiGersaniba
      @YukiGersaniba Рік тому +1

      I didn’t waste my time here

    • @Dracometeor562
      @Dracometeor562 10 місяців тому +4

      nope, even you finish the first hour of the video, of course you will get some useful information, it's not a waste of time dude. what do you expect on the video like this building with cutting edge stack with good application? a free? lol you are cheap dude

    • @re-fm1et
      @re-fm1et 10 місяців тому

      I learn the basic here, much simpler to understand, as for project.. why do you even need to learn to make project from youtube, just build it yourself, you already know the basic

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

      npm cache clean --force
      npm cache verify

  • @Richard-wg4lu
    @Richard-wg4lu Рік тому

    oh my god, you are a beautiful creature ❤ i was really confused and stuck because in the development it works without static and other way in build. Thank you for clearing that, i lost hope searching the internet. Thought next js was weird.

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

    I am frontend senior. By the time I have completed a project with Next12, the Next13 have already been released and it had major changes to the framework. I had good time binge watching your tutorial to keep up with the latest change in the framework. I would consider getting the full course by the end of this video.

  • @londonguga
    @londonguga Рік тому +5

    Great video, very intuitive and easy to follow!
    Just a tip on the Tailwind module for those who don't know yet, but in case you find yourself with such long classNames, you could use the @apply function within your own class so the component isn't crowded with classNames.
    Something like:
    .select2-dropdown {
    @apply rounded-b-lg shadow-md px-5 my-5 bg-blue;
    }

    • @chinmayghule8272
      @chinmayghule8272 Рік тому +1

      Yes, but doing that it becomes more like the traditional CSS.

  • @raymondaxyz
    @raymondaxyz Рік тому +2

    Just lovely.. A designer here, appreciating all the hardwork developers put in to create magic 🪄
    Thanks Mosh for such a great course.. still on your JavaScript course, will definitely get this too.

  • @CodeWithMasood
    @CodeWithMasood Рік тому +1

    Hey mosh! This tutorial taught entire Next.js to us in 1 hour. Want more professional videos like this❤

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

    Wow! The best Nextjs tutorial I've ever come across

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

    finally the comprehensive nextjs tutorial I've been looking for

  • @2gbeh
    @2gbeh Рік тому +1

    Haven't watched this yet but i know it's gon be 🔥 and exactly the type of clarity i need.

  • @TechNerd-m4v
    @TechNerd-m4v День тому

    Great video and I absolutely loved it. Not a very detailed one, but brilliantly summed up all the high level information that makes nextJS a good choice among others. Looking forward to your other videos as well.

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

    It's videos like these that make me question why I went to college. Amazing work!

  • @marianavieira2343
    @marianavieira2343 Рік тому +1

    I simply love your tutorials! I started to use Next recently and you really helps me to get the base!

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

    The SSG and SSR explanation was mind blowing!!!!

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

    I already have some skills in React and typescript. So the teaching rhythm of this course is very suitable for me.

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

    Not everyone will teach but you are best in it.

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

    I dont have money to buy your course but you made an awesome tutorial love you sir ❤

  • @teokostadinov
    @teokostadinov Рік тому +1

    Ok I am convinced! Subscribing to your YT channel and your courses platform.
    Finally a tutor that gets to the point with just enough details to understand the concepts being taught.
    Thank you!

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

    Any number of thanks to you is less. There's lot of things you made easier for me. Which ever things I found difficult, watching your stuff clear it out.
    Well I would really like to learn nextJS following your tutorials but can't afford it right now. Hope you will upload on youtube for all very soon.❤😊

  • @0brooo
    @0brooo 6 місяців тому

    Valuable Lead generation. I will be buying this full tutorial, cause so far its been really good.

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

    Best Explanation on Next JS . Worth investing 1hr

  • @greatblackshark9646
    @greatblackshark9646 Рік тому +3

    Mans looks great and healthy. Glad to see it.

  • @dmitriyb.6201
    @dmitriyb.6201 Рік тому

    Both this and your react tutorial here on UA-cam were great to give an introduction. Thank you

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

    Amazing course. Really clear. Not over complicated. A gem! Thank you so much!

  • @UniqueEdit243
    @UniqueEdit243 Рік тому +6

    Thank sir, for being an extraordinary teacher and mentor in the programming world. I eagerly look forward to the opportunity of learning from you again in the future. I want to express my deepest gratitude to you for the incredible impact you've had on my life through your courses. Before I had the privilege of learning from you, I was truly lost. Your teachings have been a guiding light that helped me find direction, purpose, and a newfound passion for learning.
    Your dedication, knowledge, and teaching style are unparalleled, making you the greatest teacher I've ever had the honor of learning from. I can confidently say that your courses have not only enriched my knowledge but also transformed me as a person.
    I humbly request you to consider creating more programming courses in the future. Your unique ability to inspire and educate is a gift that should be shared with the world. I have no doubt that your future courses will continue to change lives just as you've changed mine.
    Thank you, 3000😂

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

    I'm so lucky I found this. What a an extremely well done tutorial. I learned a lot!

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

    The part that explains static and dynamic rendering is very clear! thank you so much

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

    You are literally a legend mosh..thank you

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

    amazing sir, all confusion's gone, thank you so much, may god bless you

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

    This is my best course ever because of you

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

    Awesome! Thank you! You have such a great voice and way to talk….just wanted to mention that once…

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

    "beautiful" I love the commentary throughout your videos.

  • @Mohamedsaad-zb2kk
    @Mohamedsaad-zb2kk Рік тому

    To be honest.. Your lessons are amazing Mosh.

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

    Learn django from you. I just really want to say you own my heart ❤️ great instructor i have ever had thank you so much 🤝

  • @dailyinsights3541
    @dailyinsights3541 Рік тому +1

    Best teacher ever

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

    Thank you for this tutotrial. Next.JS is cool. Reducing so much pains which we faced in pure React.

  • @SimelCoding
    @SimelCoding 10 місяців тому

    This is Amazing man even though I can't afford the course, I can now use the docs
    Thanks Mosh

  • @alkadoHs
    @alkadoHs Рік тому +42

    This guy always give us good stuff😎

  • @skankhunt-ef3vw
    @skankhunt-ef3vw Рік тому

    great tutorial, teaches the most important stuff instead of 5 chapters of the same thing but slightly different

  • @Hannah-f6n9v
    @Hannah-f6n9v Місяць тому +1

    this one hour course and gpteach help me to close a lot of gaps

  • @theophilusgordon
    @theophilusgordon Рік тому +4

    You are doing amazing, Mosh. You are the reason I am who I am today and thank you for another awesome tutorial.

  • @anirudhcodes
    @anirudhcodes Рік тому +1

    The legend has delivered!

  • @ArunKumar-jk5pq
    @ArunKumar-jk5pq 23 дні тому

    You have a simple & great way of teaching. Thanks for doing this!

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

    LOVE LOVE this tutorial. You are a great teacher.

  • @jesseajioh4111
    @jesseajioh4111 Рік тому +4

    My favorite tutor and my favorite framework, I'm totally building this. Thanks Mosh🙇💪

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

    Very crystal-clear course! Thanks a lot for it.

  • @farmerjane28
    @farmerjane28 Рік тому +11

    Thank you Mosh for doing what you do with your videos! I'm self studying through the Odin Project and it is SOOOOO text heavy that its too overwhelming sometimes and my brain just doesn't understand words at some point. But once I go through their lessons and then watch your videos, you explain everything I read in a more easier way. It's like you're babying my brain, but it is still enriched LOL. You are my go-to guy when I need a refresher or more explanation!

  • @michaeldausmann6066
    @michaeldausmann6066 Рік тому +5

    Great content. I like the explanation of rendering modes. I got a little confused when my h1 tags didn't look like headings but that is just a Tailwind thing I think, might be worth mentioning, also table-bordered doesn't exist anymore, I used table-zebra. well worth spending an hour to spin up on the basics of next, thanks for making this available.

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

    Thank you for your wonderful and special course
    note : CSS Modules
    i think next.js converted the name of class automatically to camelCase
    ProductCard.module.css
    .d-flex {
    display: flex;
    }
    const ProductCard = () => {
    return (

    ProductCard

    )
    }

  • @KylerEdginton-e6p
    @KylerEdginton-e6p 7 місяців тому

    This was super cool and easy to follow along with.
    Very grateful for people like yourself that dedicate their time to making valuable learning resources accessible and free.

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

    The oracle has spoken once again!!!💯💯💯🔥🔥🔥

  • @KyraWeaver-e7x
    @KyraWeaver-e7x 3 місяці тому

    Thank you! You really take the time to explain everything, including your VS code shortcuts! love it

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

    This is the best next js as a beginner course thank you mosh🎉🎉

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

    This is easier than any next tutorial i watched so far.. i also thank you for demonstrating what next/link actually does.. will binge your future nextjs videos..
    If i have a topic that i would like to request it would be pwa. Like when opening youtube when offline it still loads.. i want to research how far offlinefirst approach can be pushed to its limit.

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

    Needed this! Relaunching in 5 Hours!

  • @Ffmomin007
    @Ffmomin007 Рік тому +1

    My favorite instructor ❤️

  • @MdRashedulIslamS
    @MdRashedulIslamS Рік тому +1

    Hi Mosh. Take love from Bangladesh

  • @meekbronsen6668
    @meekbronsen6668 Рік тому +3

    Dude, I you Mosh you are a very talented Teacher. And I hope you'll have content for everything. Please do a Non SQL database course

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

    This was a outstanding tutorial outlining all the relevant operations required to make this framework useful. Nice job making great content. I'll have to stop back for your other course when I get a few more contract gigs. Thanks!

  • @Coco-ii2pu
    @Coco-ii2pu 10 місяців тому

    I feel like I know it all now. Mosh has that effect. Thank you ❤

  • @femiolayemi5902
    @femiolayemi5902 29 днів тому

    you are really good. I have a background in vue.js but then I don't want to start with learning react. This really help and I don't think I need much on react to understand Next.js

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

    你比很多老师讲的更精炼,更容易上手。非常感谢!

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

    ❣Best Teacher in the world.❣

  • @khalifaomani1242
    @khalifaomani1242 Рік тому +10

    Absolutely fantastic tutorial on Next.js 13 with TypeScript! Mosh does an excellent job breaking down complex topics into easily digestible segments. The pacing is perfect for beginners, yet it doesn't shy away from diving into more advanced features. I particularly appreciated the section on data fetching and caching, which are crucial for any full-stack application. This tutorial is a must-watch for anyone looking to get started or level up their Next.js 13 skills.

  • @FaselGodbcho-e7w
    @FaselGodbcho-e7w 2 місяці тому

    I love how you use the compare and contrast method to teach😊😊😊

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

    Love to see you back 😍

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

    You are the best. That is why I got your course

  • @NaveedUlRehman-t9v
    @NaveedUlRehman-t9v Рік тому

    Thank you Mosh for all you do!

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

    This guy is crazy good in what he is doing