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
– Want to learn more? Get my complete Next.js series: https://bit.ly/nextjs-series
– Subscribe for more videos like this: https://goo.gl/6PYaGF
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!
it's only a promotion video don't spent 1 hr for this
Why do I feel like technology is going backwards sometimes.
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.
Thank you for making this fantastic video and the clear explanation!
Are you Iranian Mosh?
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!
Great explanation
if i want to cache my link with axios how can i do?
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.
what is the best option for large project with ssr and seo – nextjs or react vite-ssr ?
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.
And now in JS please.
To fix the issue with vscode css modules intellisense, add this plugin to your IDE: "CSS Modules by clinyong".
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.
WARNING: This is not a full course, it's just the first part.
The part that explains static and dynamic rendering is very clear! thank you so much
This guy is crazy good in what he is doing
perfect and Thank you
Next video plz
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.
Waiting for blazor
baes eftekharid
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
I simply love your tutorials! I started to use Next recently and you really helps me to get the base!
I want to learn nextjs in 1 minute.
Very nice, I am a MERN developer, now i am learning NEXTJS, this tutorial is very usefull…
Really like the video but facing issue:
Error:fetch failed
Call Stack
Object.fetch(node:internal/deps/undici/undici(11372:11)
I'm at node 16.14 and create-next-app@13.4 and `Request` is not defined.
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
oh yess, now I have a date on saturday!!!
FUCKLING TYPESCRIPT
Who inserted 10 or more advertisements into a single video?
Deceptive video.. click bait.. but wise good info.
beginners dont use typescript friend
npm run Dev not working on v13
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.
You are the best. That is why I got your course
know react js are require?
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.
You are the best
LOVE LOVE this tutorial. You are a great teacher.
Please make Kotlin tutorial