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

Рет қаралды 482,329

Күн бұрын

Master Next.js 13 and build amazing full-stack apps! 🚀 This beginner-friendly tutorial covers the new App Router, TypeScript, and everything you need to get started.
🚀 Want to dive deeper?
- Check out my complete Next.js series: bit.ly/nextjs-series
- Subscribe for more videos like this: goo.gl/6PYaGF
💡 Learn React
- KZfaq tutorial: • React Tutorial for Beg...
- Complete React course: bit.ly/3l0vWYR
✋ Stay connected:
- Twitter: / moshhamedani
- Facebook: / programmingwithmosh
- Instagram: / codewithmosh.official
- LinkedIn: / codewithmosh
📖 TABLE OF CONTENT
0:00:00 Course Intro
0:02:12 Prerequisites
0:03:16 Next.js Fundamentals
0:03:54 What is Next.js?
0:06:34 Setting Up the Development Environment
0:07:59 Creating Your First Next.js Project
0:10:21 Project Structure
0:13:10 Routing and Navigation
0:18:25 Client and Server Components
0:27:19 Data Fetching
0:33:23 Caching
0:35:48 Static and Dynamic Rendering
0:39:56 Styling Next.js Applications
0:40:16 Global Styles
0:42:50 CSS Modules
0:47:17 Tailwind CSS
0:54:56 DaisyUI
#nextjs #reactjs #javascript #coding #webdevelopment

Пікірлер: 458

@programmingwithmosh 7 ай бұрын

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

@programmingwithnit5308 7 ай бұрын

Thank

@dmtornado2569 7 ай бұрын

Broken link for 'complete Next.js series'?

@miladesmailpour192 6 ай бұрын

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.

@shriram8421 6 ай бұрын

when will next part will come this videos

@koiko21 5 ай бұрын

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 3 ай бұрын

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.

@dee.s.4513 8 ай бұрын

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.

@Soomin28 7 ай бұрын

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!

@tutopoints1920 8 ай бұрын

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

@noonenoone5121 8 ай бұрын

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 😊

@abdallahmah1867 8 ай бұрын

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 KZfaq 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

@michaeldausmann6066 7 ай бұрын

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.

@kylefinken329 26 күн бұрын

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!

@aasifbinmohammad 8 ай бұрын

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 7 ай бұрын

hey bhai is this a new version of javascript?

@_ash64 6 ай бұрын

@@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 6 ай бұрын

@@_ash64 thanks ash

@teokostadinov 7 ай бұрын

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!

@alkadoHs 8 ай бұрын

This guy always give us good stuff😎

@christerjohanzzon 7 ай бұрын

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

@marianavieira2343 6 ай бұрын

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

@codewithguillaume 7 ай бұрын

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

@jesseajioh4111 8 ай бұрын

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

@adulisdevelopers969 8 ай бұрын

Hey mosh, I really appreciate your effort and dedication to teach people. I love you technical courses. I would like to see more management videos like the process of planning software before going for development.

@militoarturo 6 ай бұрын

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

@theophilusgordon 8 ай бұрын

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

@genzolowo 6 ай бұрын

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.

@HeyMr.OO7 7 ай бұрын

The background whistle music 🎶 is kinda Nostalgic... has been consistent in most of Mosh's courses. I have 'em all. Brilliant Mentor ⭐🙌🏻⭐

@alicewest9196 7 ай бұрын

Firstly, just want to say thank you for taking the time to create such engaging and thought-out videos. I'm incredibly invested and have a monthly subscription to your tutorials. I thought best to leave a comment on here, as others might want to know. I am eager to get started on the second part of this tutorial, is there a planned date for when its going to be released. I appreciate your tutorial take an extensive amount of planning and time. Just a keen bean here :D

@programmingwithmosh 7 ай бұрын

Thanks for your interest! Part 2 will be out mid October.

@Love_Coding 8 ай бұрын

Your teaching skills are just excellent !!

@londonguga 8 ай бұрын

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 7 ай бұрын

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

@frankiewong2215 6 ай бұрын

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

@dmitriyb.6201 5 ай бұрын

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

@n45ko 8 ай бұрын

Thank you Mosh, Your tutorials inspire us to learn more, you are the best ;)

@user-zz3wk2fz3f 7 ай бұрын

Amazing tutorial, Mosh! It's incredibly professional and highly practical tutorial. 👌

@harveytong9619 8 ай бұрын

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

@FattahilTanha 7 ай бұрын

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+++

@2gbeh 8 ай бұрын

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

@khalifaomani1242 8 ай бұрын

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.

@rifwann 7 ай бұрын

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.

@thomasdang6565 5 ай бұрын

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!

@sirrobinhood3409 5 ай бұрын

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!

@desuchanz4956 7 ай бұрын

finally the comprehensive nextjs tutorial I've been looking for

@FG-uk3in 7 ай бұрын

Thanks Mosh. You make programing easy and joyful for me all the time

@CodeWithMasood 7 ай бұрын

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

@chandlerbing2749 7 ай бұрын

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

@AshAgrawal 7 ай бұрын

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.❤😊

@amnashahid9464 7 ай бұрын

Mosh, you always rock, not so lengthy tutorials but covers almost every thing. Lots of respect from Pakistan

@Coco-ii2pu Ай бұрын

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

@jd_27 7 ай бұрын

Really enjoyed this tutorial, thanks!

@christoherright6430 6 ай бұрын

LOVE LOVE this tutorial. You are a great teacher.

@Techwith-Cj 7 ай бұрын

Thanks mosh for your effort, i just want to ask you when you are going to make the video about the specific backend skills to have just like you did on the frontend❤

@mythm2063 7 ай бұрын

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

@kaleb823 7 ай бұрын

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

@Sammy2100 8 ай бұрын

Looking forward to this.

@ashimov1970 7 ай бұрын

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

@mudassarmuhammad776 8 ай бұрын

I have watched this full course. This course is amazinggggggggggg, We hope to get the remaining part of this course on KZfaq soon,, Really appreciate this effort.

@programmingwithmosh 8 ай бұрын

Thank you! I’m taking a short break and then start recording part 2.

@mudassarmuhammad776 8 ай бұрын

I'm excited and waiting to see the part 2...

@edunjobiemmanuel4200 8 ай бұрын

I kinda need this fr.. Thanks Mosh!

@Xaviercomment586 8 ай бұрын

I love you bro! keep sharing! your knowledge to everyone!

@hehoist7183 7 ай бұрын

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

@DekhRaheHoDaya 7 ай бұрын

Hi Sir, Which tool you use to make videos, I really admire your editing, your teaching style.

@meekbronsen6668 8 ай бұрын

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

@tarekali84 8 ай бұрын

Salam Mosh, I am writing to express my gratitude for the incredible content you provide. Your courses have been instrumental in my coding journey, helping me overcome many challenges and learn new concepts effectively. I'm particularly excited about the back-end course featuring Spring Boot. Could you kindly share if there are any plans to release recorded video lessons for this course in the near future? I'm eagerly looking forward to delving into this topic with your guidance. I wish you the best of luck. Warm Salam, Tarek Ali

@saqibullah7286 8 ай бұрын

Beautiful explanation. I would highly recommend to beginners to watch this video must once.

@ishmaelakaboa 7 ай бұрын

Amazing Amazing. Mosh..... You are awesome ❤ you have the coding anointing to make it simpler understandable. I'm lover of Django but I'm Soo amazed how easy and simpler routing and navigation. I'm gonna master this in no time

@mostafaalmahmud 6 ай бұрын

This is a really helpful tutorial for nextjs 13 app router fundamentals. My heartfelt gratitude to you Mosh ❤

@byteolu 7 ай бұрын

Needed this! Relaunching in 5 Hours!

@wierdcontents5362 8 ай бұрын

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

@ahmedabbas8774 8 ай бұрын

Very Excited 😃.

@abhisheksunam2887 18 күн бұрын

Thank you mosh for this amazing tutorial

@jacopoalberto 7 ай бұрын

This is amazing!

@merabetzakaria2736 8 ай бұрын

You are a legend, thank you my teacher 😊

@JasonWongFing 7 ай бұрын

wow, Thank sir, you are a good teacher,I follow your instruction and make the code run ok.

@UniqueEdit243 7 ай бұрын

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😂

@pulseofamerica 7 ай бұрын

Tf are these chatgpt comments

@faisalmominbhiwandi 8 ай бұрын

My favorite instructor ❤️

@Richard-wg4lu 7 ай бұрын

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.

@TravelerAbdulAlim 5 ай бұрын

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.

@arikmosfor4907 6 ай бұрын

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

@Allen-cj7kq 8 ай бұрын

cool, it is very clear to told people how to use nextjs!

@shahnewazrakib 8 ай бұрын

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. 😮😮❤

@gime1945 8 ай бұрын

Mosh, you're the absolute best 😊

@mr.chapii5787 8 ай бұрын

Not everyone will teach but you are best in it.

@mustafaezzi2871 8 ай бұрын

Hi Mosh !. Im just loving your new look in this video. Couldnt wait to see your latest form and Id your smile is stunning

@saumitra9866 6 ай бұрын

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

@nautilus961 7 ай бұрын

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

@laxmikanthgurram1074 6 ай бұрын

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.

@philippearras8154 8 ай бұрын

Thanks Mosh ❤

@user-ut2cj7li9u 5 ай бұрын

Thank you Mosh for all you do!

@bennyotchere9165 8 ай бұрын

Bless u, Mosh!

@tobix8982 29 күн бұрын

Thank you! I learnt a lot from this resource!

@user-if4hy6dv2q 3 ай бұрын

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

@user679jk7 5 ай бұрын

Thank you for making this fantastic video and the clear explanation!

@georgethomas5688 8 ай бұрын

I’ve bought the react course. It’s awesome. @mosh will there be a langchain + chatgpt course in the near future ?

@futurimac 13 күн бұрын

I love it ❤ thanks Mosh!

@mustafamagdy9324 7 ай бұрын

Thank you for such teaching skills and sharing your knowledge with us . what is better ? consume client browser resources or server resources ? i believe consuming client resources is a better option in order to save server resources for handling all requests and do more complicated operations .

@adam-user 6 ай бұрын

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

@raymondaxyz 8 ай бұрын

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.

@manjeet2698 8 ай бұрын

Hey mosh ! Before I buy the complete course, I wanted to ask if it contains concepts like Route Groups, Parallel Routing, Streaming with suspense, etc. ?

@mrginn 3 ай бұрын

thank you Mosh. You're an amazing teacher!

@kennedydre8074 8 ай бұрын

Love your tutorials and pay for the life time access, but I really wish we could get an updated dotnet course

@akshayboddhul 8 ай бұрын

Love to see you back 😍

@psychobuddha5379 6 ай бұрын

Awesome video! I was so confused with different versions and tutorials for NextJS, but this was really simple, understandable and up to point! P.S There is really cool extension for vs code, called auto tag rename, it's useful when changing from div to react fragment or ul to table, without using multiple cursors.

@ruentgen2941 8 ай бұрын

Waiting 😍

@mehdinaji3936 7 ай бұрын

خیلی کارت درسته استاد

@meow_meow2023 7 ай бұрын

Thanks for the informative video. Could you please make a video about C as well? Because I'm taking a course in university that involves c language. You have also made C# and C++ videos but not a C video. I would appreciate it if you make a C video. I love watching your videos because they are easy to understand and contain helpful code practice! Thank you for the time and effort🙏🙏🙏