Software Development

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



Next js 13 Tutorial for Beginners – Learn Nextjs 13 (App Router) with TypeScript and build awesome full-stack apps!
– Want to learn more? Get my complete Next.js series:
– Subscribe for more videos like this:

LEARN REACT
YouTube Tutorial:
Complete React Course:

MORE FROM MOSH
Courses:
Blog:
Facebook:
Twitter:

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 #webdevelopment

source

50 thoughts on “Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript

  • 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

  • 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!

  • 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.

  • 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!

  • The thumbnail is a cheating and first few minutes talk is cheating. At first you said everything in this tutorial going to happen but then in 26:50, you said this tutorial is not complete. It's just a short part of a paid course. I'm not against paid course but the way you spoke at the beginning and the title gave false message which makes you a cheater. I don't want to disrespect but I just said what is the fact. I appreciate the 1 hour and even less you gave for free but I can't accept cheating and wasting my time. Because I hoped I will learn everything you said in the beginning.

    I have checked your other tutorials, you gave same cheating promise and thumbnail. You should not click bait. I believe you are a talented person. So please stop cheating.

  • Hi Mosh

    just to let you know that even when i install this specific version of nextjs via :

    npx create-next-app@13.4

    it won't prompt me to install version 13.4.13 like at 8:26 in your video, instead it will auto install 14.0.2, which will give a dark theme to the splash page unlike what you have at 10:21. This in turn meant that I didn't see that gradient styling issue issue you pointed out at 11:50, as the page is just black with the h1 tag in white text "hello world".

    not sure what to do with this point, since my globals.css file is identical to yours in the video 🤔 did i miss anything out?

    Thanks!

  • 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.

  • Just a couple of tips for newbies like me. First you have to be sure that your node version is at least 18 or your will get errors. Second, on the new UsersPage, change "const UsersPage = () => {…" with "function UsersPage () {" otherwise React will not recognize this as a valid component.

  • After one year trying to learn it, I was almost givin up! but u have a awesome didactical method to teach! I'm so retard and slow and have a lot of difficulty to understand logical and all these tecnical concpets, but u made me understand. Thanks Mosh! I'm gonna get your full next course! thanks

  • 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.

  • I have a next13, mongodb, and I deployed to vercel. However, I get a 503 gateway error in production. Not sure if this techstack is good enough for a full CRUD app

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

  • 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

  • Hi there… i put the path in Link Component as well as i trying go to the page through search bar self…but still it show the page not found error, Can you plz suggest me any reason regarding the routing.

    i also go with folder created in app and put the path but its still not working.

  • 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

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

  • 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.

Leave a Reply