Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework

  Рет қаралды 1,642,234

JavaScript Mastery

JavaScript Mastery

Күн бұрын

Ultimate Next 14 Course: www.jsmastery.pro/next14
Next.js recently became the official React framework as outlined in React docs. In this course, you'll learn the most important Next.js concepts and how they fit into the React ecosystem. Finally, you'll put your skills to the test by building a modern full-stack Next 14 application.
Quick heads up: This tutorial covers Next.js 13, but don't let that number fool you. Next.js 14 is essentially a performance-focused update of version 13. That means every concept, technique, and feature we dive into here is just as applicable and relevant in Next.js 14
Want to land your dream programming job in 6 months?
⭐ JSM Masterclass Experience - jsmastery.pro/masterclass
Become a Software Engineer. Guaranteed.
📚 Materials/References:
Ultimate Next.js 14 Roadmap: resource.jsmastery.pro/nextjs...
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
GitHub Gist Code: gist.github.com/adrianhajdin/...
Zipped Assets: drive.google.com/file/d/15bGW...
In this video, you'll learn:
- Next.js 14 App Folder Structure
- Next.js 14 Client Components vs Server Components
- Next.js 14 File-based Routing (including dynamic and nested routes)
- Next.js 14 page, layout, loading, and error Special Files
- Next.js 14 Serverless Route Handlers (Next API, Full Stack Apps)
- Next.js 14 Metadata and Search Engine Optimization (SEO)
- Three ways to fetch data in Next.js:
- Server Side Rendering (SSR),
- Static Site Generation (SSG)
- Incremental Static Generation (ISR)
🌎 Find Me Here:
Discord Group: / discord
Instagram: / javascriptmastery
Twitter: / jsmasterypro
💼 Business Inquiries:
E-mail: contact@jsmastery.pro
Time Stamps 👇
00:00:00 Intro
00:03:33 The Benefits of Next.js
00:12:54 File & Folder Structure
00:18:39 Server & Client Components
00:23:22 Routing & Special Next.js Files
00:31:21 Data Fetching (SSR, SSG, ISR)
00:34:26 Next.js API Endpoints
00:40:48 SEO & Metadata
00:42:48 Promptopia Project Demo
00:44:31 Project Setup
00:53:22 Home page
01:50:17 Create page
02:14:41 Feed page
02:32:28 Profile page
02:48:17 Next.js API Routes
03:06:39 Special Assignment!
03:12:17 Deployment
03:23:06 Share Your Work

Пікірлер: 2 200
@javascriptmastery
@javascriptmastery 10 ай бұрын
If you want to truly master the most modern Next.js, check out: www.jsmastery.pro/next14 🔥
@romanmed9035
@romanmed9035 6 ай бұрын
can You show as add to this redux or redux/toolkit?
@itsmee_nuriaa
@itsmee_nuriaa Ай бұрын
When i try to create an api in 1:21:31 it gives an error
@VinayakGupta08_
@VinayakGupta08_ Күн бұрын
Why is you keep saying next 13 instead of 14 in this video, kind of confusing.
@DouglasCastrodaSilva
@DouglasCastrodaSilva 9 ай бұрын
Man this is my first contact with nextjs and I have to say that I loved it. You are so didactic and managed to explain all of that in just a couple of hours.
@waxifalee
@waxifalee Жыл бұрын
Man! You have NO IDEA how much your content helps a student like me who can not afford expensive courses. Please keep up providing such AMAZING quality content. You are a true hero.
@donaldballowe8855
@donaldballowe8855 10 ай бұрын
just a heads up, if you wait for the right time, Udemy has sales all the time on great courses. They have these sales pretty often and the courses drop from around 100$ to less than 20. I probably have 25 or so courses I got that way. Brad Travesy is always good too. I'm a forever learner and love it. Hope you enjoy the coding journey!
@eriikelnino6545
@eriikelnino6545 10 ай бұрын
@@donaldballowe8855 could you please suggest a next js course on udemy ? i will really appreciate
@BluEyedRaven
@BluEyedRaven 8 ай бұрын
@@donaldballowe8855 I second this. Bought 3 courses for less than 20$.
@medimedi9082
@medimedi9082 8 ай бұрын
🤑@@donaldballowe8855
@m.e.ssofttech2806
@m.e.ssofttech2806 6 ай бұрын
The tutorial is very good it saves a lot of students the cost to obtain that knowledge, but I think you forget something...Read more
@Hemanth--kumar_12
@Hemanth--kumar_12 5 күн бұрын
Man, u dont know how much of a good teacher you are. The first 40 minutes crash course literally saved hours of reading of documentation. Ofcourse, I recommend reading next.js documentation but this was a quick start. Also, the projects u do are incredibly good. I have been learning full stack from your yt channel and to be honest, I learnt most of all skills needed to land a job. Also, the projects can be used as a showcasing tool. Thank you adrian. If I get a job, I would definitely love to donate to ur channel !!
@benjamingoller6267
@benjamingoller6267 Жыл бұрын
Man I have to say, the production value of this video is extremely high. Especially the description of the benefits of Nextjs was the best I have seen (and I looked quite a bit) and convinced me of using it for my next project. I thought I may over engineer my project or make using a dedicated backend more complicated but turns out I worried too much. Thanks for the efforts!
@abdessamadchokri352
@abdessamadchokri352 Жыл бұрын
thank you for the amazing work, it's so so organised, and the way how you switch between the NextJs pillars it's really insane, thanks again for the hard work!
@WeeklyHow
@WeeklyHow Жыл бұрын
1:21:46 For those who is stuck on the Google Authorized domain part, just click the trash and keep it untouched. I don't think it accepts local dev domain.
@anuragghoshh
@anuragghoshh Жыл бұрын
Thanks bro
@HariHaran_10
@HariHaran_10 Жыл бұрын
Thank you so much
@ericksasonet
@ericksasonet Жыл бұрын
thx buddy!
@michaelfrancis936
@michaelfrancis936 Жыл бұрын
Thanks!
@andriisachok1854
@andriisachok1854 Жыл бұрын
Thank you! That was something really unexpected :D
@israelbosun4032
@israelbosun4032 Жыл бұрын
Amazing Tutorial Adrian, Love what you do for the community, I coded along till the end, learnt a lot, and will still use it as a reference for further projects. Thank you
@iearlg
@iearlg Жыл бұрын
As a self taught Beginner developer, I really appreciate the hard work you're putting in these amazing tutorials. HANDS UP 🤲JSM. I hope more NextJS 13 in the future.
@javascriptmastery
@javascriptmastery Жыл бұрын
More to come! ❤
@farhienzahaikal1868
@farhienzahaikal1868 Жыл бұрын
So far the most complete, interactive and packed course ever. Not 40hrs, 90hr course like other platform do
@javascriptmastery
@javascriptmastery Жыл бұрын
Appreciate it!
@mraloush8959
@mraloush8959 5 ай бұрын
id like a 200 hour one as long as i become the best. if u dont like studying this industry isnt for you
@shreyashraj
@shreyashraj 4 ай бұрын
@@mraloush8959 exactly i never get tired of learning new things in technologies. The size of a video do not determine how good it is.
@vernevens1598
@vernevens1598 4 ай бұрын
But they NEVER tell you how upload to a server.
@shreyashraj
@shreyashraj 4 ай бұрын
@@vernevens1598 uploading to server is not that convenient I did once it was worth trouble as I learned a lot of thing like nginx, ssl certificate etc. but I don't think that it should be added to every single video as this is not the best way to do it.
@kooyaw4445
@kooyaw4445 Жыл бұрын
This is the best Next JS course I've taken so far. Bless you brother for this incredible work
@FemiAdigun
@FemiAdigun Жыл бұрын
Great tutorial. [31:22] if you are using typescript, you may need to pass the postId to your component as params e.g const page = ({params: {params: {postId: number}}) => {return {params.postId}}
@d0m2288
@d0m2288 2 ай бұрын
Good looking out, thanks for the tip.
@javascriptmastery
@javascriptmastery Жыл бұрын
Become one of the first 1000 people to get the Next.js 13 premium eBook for free - resource.jsmastery.pro/nextjs-guide 🎉
@frontforumfocus
@frontforumfocus Жыл бұрын
letsssssssssssssss goooooooooooooo
@maxwebstudio
@maxwebstudio Жыл бұрын
😃
@samialvi4226
@samialvi4226 Жыл бұрын
Heh got it🎉❤
@Zabihullah_Danish
@Zabihullah_Danish Жыл бұрын
Really appreciate your hard work and amazing contents.
@nocopyrightgameplaystockvi231
@nocopyrightgameplaystockvi231 Жыл бұрын
got this, Thank youuuuuuuuuuu!
@sachinlakshan5202
@sachinlakshan5202 Жыл бұрын
Undoubtedly, the best Next.js tutorial on KZfaq. Thank you, and keep up the amazing work!!!
@cuentamovil456
@cuentamovil456 Жыл бұрын
What a great video! A got a bit frustrated when I saw no Typescript but I've watched until the end and I've finally been able to understand lots of concepts. Thank you!
@spaxxvilejohn9095
@spaxxvilejohn9095 Жыл бұрын
Every time I see a new tutorial from you I get excited. Please know that your work is helping developers in Kenya improve their skills. Thank you
@moinulhossain2108
@moinulhossain2108 Жыл бұрын
Once again a great tutorial from the master. Eagerly waiting for the Tailwind CSS one. Thanks Adrian, for all the quality content.
@anthony0504
@anthony0504 Жыл бұрын
I just wanted to express my sincere appreciation for the amazing tutorial content you've been providing on your channel. The way you explain complex concepts and guide viewers through practical examples is truly commendable. I've learned so much from your tutorials, and they have greatly helped me enhance my web development skills.
@techEnthusiastMw
@techEnthusiastMw Жыл бұрын
Thanks for creating such a clear and concise course! The explanations are clear and easy to follow. This is by far the best course I have come across on youtube
@Furki4_4
@Furki4_4 Жыл бұрын
It was my first use of route handlers and auth of Next and MongoDb. Thank you so much for teaching me all of this stuff and giving me the curiosity driving me to dive deep into them !
@theivorycoder
@theivorycoder Жыл бұрын
I would love a tailwind crash course!! These videos are amazing and they're the only ones I can actually sit down and watch for 3 hours without getting bored. I learn more in this than in a week of school 👌
@realisticprogramming
@realisticprogramming Жыл бұрын
Agreed.
@muhammadhamza3440
@muhammadhamza3440 Жыл бұрын
Agreed
@ianbates_
@ianbates_ Жыл бұрын
Amen to a Tailwind crash course 🥃
@FredrickLackey
@FredrickLackey Жыл бұрын
Absolutely! A Tailwinds crash course would be perfect.
@eduardosalles9212
@eduardosalles9212 Жыл бұрын
👍🏻 tailwind crash course
@azeezabidoye1188
@azeezabidoye1188 Жыл бұрын
This is by far the best tutorial I've found on KZfaq. You are a life saver; I must confess. Illustrative, explanations clear as rain with great accent. Thank You! 🙏 Kindly make a crash course video on Tailwind CSS - I'm voting for this ❤
@ieatfood88
@ieatfood88 7 ай бұрын
If you're familiar with vanilla CSS Tailwind is a breeze. There's cheat sheets out there so you don't have to go digging through documentation.
@Android-17
@Android-17 Жыл бұрын
Thank you so much for creating this detailed awesome tutorial. There's not enough quality hands-on resources out there on NextJs after the major update. I really appreciate it! Also waiting for the ebook. Thanks again.
@adamedison6831
@adamedison6831 8 ай бұрын
Nice an practical. Also relaxing to listen to and watch - not like other tutorials that are rambling, rushing, stressing me out.
@Hans-ok5rc
@Hans-ok5rc Жыл бұрын
Wow, this Next.js 13 course is hands down the best resource I've found for mastering the latest features of the official React framework! The pace, clarity, and depth of the content are just perfect, making it easy for beginners to follow along, while providing valuable insights for more experienced developers as well. I appreciate the way the instructor breaks down complex concepts into simple, digestible steps, and the practical examples really bring everything to life.
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you so much!
@vaibhavdesai8455
@vaibhavdesai8455 Жыл бұрын
I have just started learning nextjs, and you came up with a blessing, easy explanation learned a lot from this course As always. Thanks, Adrian.
@muhammadazizulhoquejiku8340
@muhammadazizulhoquejiku8340 Жыл бұрын
This is awesome! I just started learning nextjs and you bring this! So cool man! worth every second. Thank You So Much! I'm so grateful to you! Did you release any next-auth tutorial? It'd be easiest for me to learn!
@kristijanlazarev
@kristijanlazarev Жыл бұрын
How calmly you explain everything. Amazing teaching!
@mckaymower
@mckaymower Жыл бұрын
Honestly, the first ~45 minutes (crash course part of the video) is worth $50 to me. Excellent work!
@javascriptmastery
@javascriptmastery Жыл бұрын
Appreciate it! You got it for free! :)
@napokhan
@napokhan Жыл бұрын
donate 1 small of that part as soon as possible :D
@aslan6921
@aslan6921 Жыл бұрын
First 43 mins of video is better than most udemy 30-50 hours long courses. Great job! Btw, as the one who is looking for a Tailwind course, i would highly appreciate if you make a Tailwind crash course.
@zolac9732
@zolac9732 10 ай бұрын
He has
@shichimenchoo
@shichimenchoo 4 ай бұрын
Thank you so much for this course. It was amazing. I was trying to learn Next.js before by reading the documentation and not going to lie I have fully read it but didn't manage to write anything because it was too hard even though I learned all its concepts. This video provided me with the practical knowledge that was missing. Again, thanks a lot!
@gamingdott
@gamingdott Жыл бұрын
The most complete and detailed tutorial about next js .. thanks mate.
@zey-
@zey- Жыл бұрын
dude this is perfect timing, i was literally just about to start practicing next and looking for videos yesterday, and today you upload this!! thanks man ❤ appreciate the free content so much
@javascriptmastery
@javascriptmastery Жыл бұрын
Enjoy! ❤️
@onlylikenerd
@onlylikenerd Жыл бұрын
I'm pumped too. I have to build an app for production and I really wanted to use the new App directory but it was still in beta and now it's released! Perfect timing
@anuranroy4617
@anuranroy4617 9 ай бұрын
A small heads up while setting up dynamic routing based on postId, as shown at 28:33 (according to the latest NextJS 13.5.4) You'll have to use useParams() from "next/navigation" and get the postId instead of directly writing {postId}. A small example would be: "use client" import React from "react"; import { useParams } from 'next/navigation' export default function PostWithId() { const params = useParams(); return Post Page with ID: {params.postId}; }
@fly-sandwich5510
@fly-sandwich5510 7 ай бұрын
another way is to do like this: import React from "react"; const page = ({params}) => { return ( {params.postId} ) } export default page;
@user-ug4uu5yi6u
@user-ug4uu5yi6u 6 ай бұрын
@@fly-sandwich5510 using similar system of useParams() as in plain react, many may occur a problem with the component being in written in lowerCase. You need to enter the upperCase name for the page (const Page = () => {} in this case) to get rid of typescript complications. This may look like this: "use client" import { useParams } from 'next/navigation' const Page = () => { const params = useParams() return ( {params.postId} ) } export default Page
@benyaminyakobi3652
@benyaminyakobi3652 Жыл бұрын
Pure pure pure gold! One example is that you really explain the synonyms like className="flex-between w-full mb-16 pt-3" as flex-between width-full margin-buttom pad-top. No one explain those terms like you do by not consuming the time for the main subject! Thank you!
@pete531
@pete531 10 ай бұрын
tailwind is just shorthand css rules, its really easy, you can learn tailwind in a few days. make few small projects from yt code along and you will understand it, there is always documentation too which i often visit
@webfunction
@webfunction Жыл бұрын
You are the best - such a great tutorial. main thing Being your voice. It's totally clear to understand and your ability to explain any subject is also great.
@DheerajKumar-di1cv
@DheerajKumar-di1cv Жыл бұрын
I have just started learning nextjs, and you came up like blessing. Thanks a ton. Having high expectations with this one
@javascriptmastery
@javascriptmastery Жыл бұрын
I hope the expectations will be fulfilled! 🎉
@younique7842
@younique7842 13 күн бұрын
You got any job sir?
@ozgunmunar
@ozgunmunar Жыл бұрын
Home Page part is unbearably complex and confusing but the rest is so regular/simple so that ones wouldn't forget easily. Thanks for another great video man. Cheers!
@nileshshetty2496
@nileshshetty2496 10 ай бұрын
especially the mongoose part
@TheHumanistX
@TheHumanistX 11 ай бұрын
Really apprecite the tasks at the end that you left for us to figure out ourselves. That really helps. It's important to have things like that so we can actually work our brains with everything you just taught us. I got it all working! Not sure it's nearly as clean or concise as yours probably is but it works haha And I got it so when the search bar is emptied of search text, it displays all the prompts again. Also, I discovered that you can have an input with `type='search'` and it automatically adds the little 'x' in the search bar so that youcan auto clear the text by clicking that little x on the right side of the search bar! So that is cool.
@codewithpatrick2889
@codewithpatrick2889 Жыл бұрын
The back and forth between the fundamentals and the Next.js version is so helpful for my understanding.
@degendaemon
@degendaemon Жыл бұрын
As always, amazing content, structure, and awesome teaching style! I would love to see a full crash-course on tailwinds features and their usage. Please and thanks! Very much considering JSM Masterclass experience. If I could get it 50% off and 6 month payments Id jump on it in a heartbeat.
@user-zq4du7og7w
@user-zq4du7og7w Жыл бұрын
First of all a big thank you for these kind of videos, it is nothing but a blessing. Just a suggestion if i may :- as many of us are already done with the basics, i think it would be great moving onto something which is bigger like a series in which there is usage of Typescript, microservices, unit testing, integration of firebase or aws for a wide range of reach. Hope i am making any sense.😛
@javascriptmastery
@javascriptmastery Жыл бұрын
Great idea!
@torocat4911
@torocat4911 Жыл бұрын
agree
@subhajitadhikary155
@subhajitadhikary155 10 ай бұрын
hey Adrian, I loved watching and coding along with your web dev projects. I really liked this course on Next.js , keep doing such good work bro. Thanks a lot again😇😇
@GamerX-qn7ou
@GamerX-qn7ou Ай бұрын
My oh my!, I can say without a doubt that this is one of the best tutorials I have watched, you are something else when explaining. Thank you so much for your great work and effort
@arioanindito
@arioanindito Жыл бұрын
Perfect timing! I really need this. Thank you so much, appreciate it!
@javascriptmastery
@javascriptmastery Жыл бұрын
Enjoy!
@egonwombat8234
@egonwombat8234 3 ай бұрын
Man, this is one of the most brilliant tutorials out there! You are absolutely nailing it, explaining it step by step, calmly, thoroughly and with the greatest ease and expertise! Thanks so much! One quick note now that I'm actually following it: in order to let the next.js Image component do its magic with remote images, there has to be a "remotePatterns" prop added to the next.config.(m)js file! UPDATE: also, the way you provide Google with the redirect URIs would result in having you modifying them after every new (branch) deployment, because of the dynamic parts of the URLs being used. Instead use one of the 'static' URLs that are being provided and that stay fixed indefinitely.
@mahdizangeneh6178
@mahdizangeneh6178 10 ай бұрын
Thank you for the video. As a side note, the reason you had to re-run the project to see the changes was that the Profile page was imported with a lowercase "p" instead of an uppercase one. It's strange that it didn't throw any errors, but that's why your changes weren't applied until you re-ran the project.
@SELFIMPROVEMENTCLIPS18
@SELFIMPROVEMENTCLIPS18 11 ай бұрын
I finished the course in 5 days but with following properly and exploring other things too! Glad I didn't gave up and left it in between. Thanks bro for teaching me NEXT.JS in the best way possible
@ak_arun_karthik
@ak_arun_karthik 6 ай бұрын
Deployed link pleasw
@samialvi4226
@samialvi4226 Жыл бұрын
Crystal clear and easy explanation learnt a lot from this course As always. Thanks!
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you so much!
@softmerit25
@softmerit25 Жыл бұрын
Your'e one of best teacher in the world. Simple and well explanatory...so easy for anyone to catch up in learning. Thanks a bunch for all you do.
@KevinKSSetiawan
@KevinKSSetiawan Жыл бұрын
Great course, very cool project! Hope this channel gets the numbers it deserved.
@juniorMr
@juniorMr Жыл бұрын
Adrean you are my inspiration. I wish I have opportunity meet you personally to tell how much i am grateful for all the things I've been learned from you. In each video when i hear to you voice i feel so confident
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you so much!!!
@av-explorations
@av-explorations Жыл бұрын
Awesome tutorial. have you considered doing some typescript projects? it would be nice to include type safety in these projects since it's pretty much industry standard at this point.
@javascriptmastery
@javascriptmastery Жыл бұрын
Coming soon!
@JakubGaniaSoftware
@JakubGaniaSoftware Жыл бұрын
Great video and tutorial. I just needed to refresh my knowledge of what is happening in the world of Next.js, precisely because of further improvements. Nice sample app. Thanks 🚀!
@kishore260490
@kishore260490 Жыл бұрын
This channel is pure gold! Thanks for all your work!
@edzonperez3604
@edzonperez3604 Жыл бұрын
Adrian, thanks for all that yo do for us, I get a job based on your videos and I'm very thankful to you. Now to enjoy, once again, you amazing NextJS content. Again thank u so much❤️❤️
@javascriptmastery
@javascriptmastery Жыл бұрын
Amazing!! Congrats! ❤️
@samuraipiang8203
@samuraipiang8203 Жыл бұрын
You did't say "Hello There"❤😂
@javascriptmastery
@javascriptmastery Жыл бұрын
Sorry about that! Hello there! :D
@TheyCallMeFelix
@TheyCallMeFelix Жыл бұрын
Yeah I want my money back hahaha
@chzmo
@chzmo Жыл бұрын
Was waiting for it😅
@jeandesauw7646
@jeandesauw7646 Жыл бұрын
🤯
@karthikr900
@karthikr900 Жыл бұрын
It's Hi there I guess 😅
@protasova_dev
@protasova_dev 10 ай бұрын
Thank you for such a great practice!! I would love a tailwind crash course too!!
@63montywilliams50
@63montywilliams50 Жыл бұрын
Outstanding content!, project touched on enough for me to dig into the docs and really get a grasp of this powerful tool
@PJ-od9ev
@PJ-od9ev Жыл бұрын
Hi. Great courses. Thank you. Please add a tailwind css course, too. specially suitable for people who are not experts at css. Other tailwind css courses on youtube seem to be very difficult and need total expertise at css. It'd be very appreciated if you create a balanced course on that so everyone can use it in their projects.
@theteacher010
@theteacher010 Жыл бұрын
Adrian thank you so much - the last 6 months of your guides have been more helpful to me than the previous 2 years of tutorial hell I was in 🙏 One suggestion if I may - for those of us who have watched enough of your tutorials to now have acquired a comfortable grasp on the basics, I think it would be superb if you could make additional tutorials featuring Typescript over vanilla JavaScript instead (as that's where the industry is heading too). And also if you could bring up things like Unit Testing and Storybook instead, since these are used widely in the industry but tend to be neglected in personal projects!
@javascriptmastery
@javascriptmastery Жыл бұрын
Will do!
@Cowkill
@Cowkill Жыл бұрын
Agreed ! Before TypeScript was a "plus" but now it is mandatory most of the time.
@cedrickdomingo1478
@cedrickdomingo1478 Жыл бұрын
i've done next js development 3 years ago. im not much of a front end guy right now. I am having chills on how this project evolves.
@mobix25
@mobix25 Жыл бұрын
i don't know if you read this, but I've learned so much from you. i've been using next js for over a year now but you've managed to make the crash course interesting that i've watched it again. THIS IS AMAZING. but if i can make one request can you make a video on t3 stack form beginners and also a t3 stack with Expo for mobile app? it would be an amazing Course. THANKS
@mr_weirdo
@mr_weirdo Жыл бұрын
Time Stamps 28:00 Routing using postId, layout, loading, error 31:50 Data Fetching(SSR, SSG, ISR)
@javascriptmastery
@javascriptmastery Жыл бұрын
Thanks!
@jashanmago9825
@jashanmago9825 Жыл бұрын
Hence proved, you've mind reading abilities, I was searching for Next 13 Projects on YT yesterday, and you posted it today!!! ❤❤
@javascriptmastery
@javascriptmastery Жыл бұрын
Enjoy! ❤
@kishanprajapati6170
@kishanprajapati6170 Жыл бұрын
Exactly same happened!!
@losmandev
@losmandev 4 ай бұрын
Amazing video, I just can't understand how you grasped this framework so well and engineering all the bits together. I feel like I can never get to your level lol congrats
@user-zh7ic6fl7g
@user-zh7ic6fl7g Жыл бұрын
You made it straightforward, I appreciate your efforts. I hope you will do a video course about tailwindcss with modern project.
@renegade5942
@renegade5942 Жыл бұрын
just in case you have problems with adding authorized domains, notice that he removed that part without saying he did, so dont add any authorized domains in Ouath
@manipullator
@manipullator Жыл бұрын
Adrihan You are so Helpful I was always wanting to Learn Next.Js but did not find the right course but you did it you are a chad bro. Hope Some Day You are gonna Post vue js but first Tailwind I know Tailwind Most of the part but you know it is never wrong to have more knowledge course also best of luck 🥂🥂
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you!
@Rikimkigsck
@Rikimkigsck Жыл бұрын
I just love how your design look like thank you for also taking care of the look of the webpage.
@669jelly
@669jelly Жыл бұрын
Amazing teaching and very greatful to have found your channel! Looking forward to see that Tailwindcss crash course! 🎉
@gosnooky
@gosnooky 9 ай бұрын
Small bug when saving a new user (around 1:35:40), you defined that 8-20 character constraint on a username, but are deriving it from the user's actual name. This would fail for people with really long names, such as a Thai friend of mine, whose last name is "Sriwatthanathienpong" which is exactly 20 characters, but their first name would cause that check to fail, and their account would not be persisted. Now, I know this is not an actual app and for education, but this is for the benefit of future viewers to know.
@javjav6808
@javjav6808 Жыл бұрын
this is great, but yes, a tailwind tutorial would be amazing
@hossinhabil7743
@hossinhabil7743 Жыл бұрын
Hey Adrian, another great video from a great person, thank you so much. I would be grateful if you could create a video about Next.js 13.4 and Redux Toolkit, explaining how to use them togather. Thank you again.
@DarkMooN-uh1ih
@DarkMooN-uh1ih Жыл бұрын
From the depths of my heart, I want to thank you. I have learned a lot. God bless you. ❤
@scottzeta3067
@scottzeta3067 Жыл бұрын
Yes, please create a course for tailwinds! Although I know TailWind is the short cut of pure CSS. But it becomes confusing if I want to build more complex components like those in MUI
@javascriptmastery
@javascriptmastery Жыл бұрын
I'll create one! :)
@somerandomchannel382
@somerandomchannel382 Жыл бұрын
For tailwind there are excellent libraries how to use it.
@olivebishop3794
@olivebishop3794 Жыл бұрын
@@somerandomchannel382 how
@pete531
@pete531 10 ай бұрын
for big projects, use SASS. you can divide all the sections of your css code like this structure index.sccs (outside of style, this is where you call all your partials, it should have just few lines of code ) ==style folder === modules (this is where you store mixins) === variables (where you store all your variables for colors mostly etc) === globals (globals like *, body and some custom global classes like for btn... ) === partials folder === _nav.scss === _hero.scss (and on) and dont forget to use "use" and "forward" rules instead of "import"
@otakusenpai6206
@otakusenpai6206 Жыл бұрын
Sir I've been recently watching and learning from your channel and your channel is one of the best channel for learning web development...thank you sir for making these amazing content for us....❤❤❤❤❤❤❤❤
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you! ❤
@beenbadamasyytv437
@beenbadamasyytv437 Жыл бұрын
Great!, This is best next Js crash course I have ever seen before, it is very helpful and easy to follow. Thank you jam for putting your efforts all for us. I will be very grateful if you can make crash course for talwind and chakra ui
@CorCronje
@CorCronje 11 ай бұрын
Wow Adrian! This is the best Next.js course. Thanks for all the hard work and effort. You are a great teacher and amazing presenter. Well done man!
@cybetheusofficial
@cybetheusofficial 11 ай бұрын
hey! I am also going through the course but I am stuck at the authentication part. didn't you have any problem too?
@kiko_game495
@kiko_game495 Жыл бұрын
Please adrian give us more content on next js. I too feel that next js will bring more jobs. Anyways you are god!!! ❤❤
@javascriptmastery
@javascriptmastery Жыл бұрын
More to come!
@davidvera4575
@davidvera4575 Жыл бұрын
Thanks, i did my portfolio with your tutorial and got a job, now im working as fullstack using next + amplify ui, easier stack
@javascriptmastery
@javascriptmastery Жыл бұрын
That's amazing, congrats!
@JDJ1213
@JDJ1213 5 ай бұрын
Lies
@siosaiafonua9286
@siosaiafonua9286 Жыл бұрын
the best nextjs course i have come across. Thank you so much!
@economis411
@economis411 7 ай бұрын
Thank you for zooming in on the screen; it makes easier to watch on my phone while keeping the code readable.
@TatunayJanineRose
@TatunayJanineRose Ай бұрын
Я рад, что прислушался к совету и попробовал эту связку, результат меня поразил!
@abdulateef-da-designer
@abdulateef-da-designer Жыл бұрын
Thanks so much Adrian, we're really grateful for ur premium level free courses Thanks once again Looking forward for T3 stack projects course
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you!
@teshaych2618
@teshaych2618 Жыл бұрын
This man helps developers around the world and he will go to heaven for this.
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you!
@SheriffKoder9
@SheriffKoder9 8 ай бұрын
Thank you so much brother for this tutorial and the tailwind introduction ebook also ! Informative, to the point and aesthetic
@sergio0fi
@sergio0fi 17 күн бұрын
Very nice. I had to do some small adjustments through the course, but in the end it worked just fine. My first time with NextJS/Vercel.
@yogesh69387
@yogesh69387 Жыл бұрын
Access blocked : Authoristation error is showing at 1:45:20 Please reply to his message and slove this error. Like the comment guys, if you are facing the same.
@soydanteprz
@soydanteprz Жыл бұрын
I have this error too
@jaythakar6788
@jaythakar6788 Жыл бұрын
getting same error
@gyanganga8441
@gyanganga8441 9 ай бұрын
In console I'm getting unauthorised
@nehalpradhan2229
@nehalpradhan2229 7 ай бұрын
same here.
@sangrammaitra5365
@sangrammaitra5365 7 ай бұрын
Did you guys found out the solution??
@mohamedtahar235
@mohamedtahar235 Жыл бұрын
The best web development channel in the platform by far, I hope you can make a Typescript crash course
@javascriptmastery
@javascriptmastery Жыл бұрын
Will do!
@juan83xd
@juan83xd Жыл бұрын
Thank you. You are the best, your proyects and videos have helped me so much!
@kikevanegazz325
@kikevanegazz325 Жыл бұрын
1h 43 minutes into the tutorial... AMAZING! so far. Very clear, easy to follow and completely understandable and applicable to any other project.
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you!
@_elusivex_
@_elusivex_ Жыл бұрын
What a coincidence bro, I was also at 1h 43m and paused the video for a while and was reading comments and found your comment
@arbu919
@arbu919 Жыл бұрын
​@@_elusivex_ in 1:44 and stuck
@leonardjoy9708
@leonardjoy9708 3 ай бұрын
What a clean and efficient way to teach. Loved it.
@waqasobeidy8318
@waqasobeidy8318 Жыл бұрын
Great tutorial. This was very helpful in understanding how Nextjs13 works. I have added a new functionality where openai will create an optimized detail prompt for every user prompt and add it to the database. However i realized the feed works well on local build but doest not fetch the latest data when deployed on vercel. I believe is has something to do with caching. I have added cache: 'no-store' object to fetch but this doesnt work. Anyone has faced similar issue or know a fix?
@mbul-zv9gt
@mbul-zv9gt Жыл бұрын
I have similar problems after build and deploy - it only runs at "npm run dev" without errors!
@mbul-zv9gt
@mbul-zv9gt Жыл бұрын
It's a cache problem: You need to add the following to the "fetchPosts command": " , { next: { revalidate: 10 } }" ... const fetchPosts = async () => { const response = await fetch("/api/prompt", { next: { revalidate: 10 } }); ...
@kasper369
@kasper369 Жыл бұрын
Please create a video on Tailwindcss where you take a design from Figma and convert it to code.
@javascriptmastery
@javascriptmastery Жыл бұрын
Will do! 😊
@supercoolcat7692
@supercoolcat7692 Жыл бұрын
A tutorial on tailwind css would be awesome. Thanks Adrian 🙌🏽
@ismaeelmalik4688
@ismaeelmalik4688 Жыл бұрын
I am new to next.js , As a self taught developer, I really appreciate the hard work you are doing for the community ! I am getting an 403 error while trying to log in. It was working fine before but after 1:48:00, I am facing this error.
@paul4137
@paul4137 Жыл бұрын
I was lookin for this comment. I'm literally on 1:48:00 right now xD So.. did You find an answer?
@ismaeelmalik4688
@ismaeelmalik4688 Жыл бұрын
@@paul4137 Yes I found the missing thing ! you also need to return true in signin callback at the end.
@kadirramazn
@kadirramazn Жыл бұрын
@@ismaeelmalik4688 where exactly did you put return true in the code? Can you explain please?
@ismaeelmalik4688
@ismaeelmalik4688 Жыл бұрын
@@kadirramazn In Google Provider > callbacks > signin > before catch block. Basically you need to provide wether performed callback action is positive or not.
@abhayzz03
@abhayzz03 Жыл бұрын
@@ismaeelmalik4688 Thank you so much man!, I was in a hurry to complete this course & couldn't afford facing syntax bugs right now.
@demoweb9040
@demoweb9040 Жыл бұрын
Thank you so much. I learn more from this video. I am very excited. I hope your team will grow strong.
@jamesmugambi1289
@jamesmugambi1289 Жыл бұрын
This is exaclty what I needed to get up and running with Next.js. The tutorial is concise and hands on.
@user-dd7ry6fp2d
@user-dd7ry6fp2d Жыл бұрын
Fantastic tutorial - thank you so much. Only issue I had was when I deployed it to Vercel - the Feed page no longer updates after new posts are added - weird. It works fine on localhost. Any thoughts? Anyway - thanks again. Great work.
@dArKrEsQ14
@dArKrEsQ14 Жыл бұрын
Hey, I am having the same issue. Let me know if you find any fix :)
@zubairLanre
@zubairLanre 3 ай бұрын
I've the same problem. Just now! Have u solved it?
@zainwasem
@zainwasem Жыл бұрын
Thanks a Million 00:00:00 Intro 00:12:54 Next.js Crash Course 00:42:48 Build a Next App 00:53:22 Home page 01:50:17 Create page 02:14:41 Feed page 02:32:27 Profile page 02:48:43 Next.js API Routes 03:06:39 Special Assignment 03:12:17 Deployment 03:23:06 Sharing
@javascriptmastery
@javascriptmastery Жыл бұрын
Thanks!
Next.js isn't React
17:11
JavaScript Mastery
Рет қаралды 207 М.
How to OVER Engineer a Website // What is a Tech Stack?
11:20
Fireship
Рет қаралды 2,3 МЛН
DEFINITELY NOT HAPPENING ON MY WATCH! 😒
00:12
Laro Benz
Рет қаралды 64 МЛН
Пранк пошел не по плану…🥲
00:59
Саша Квашеная
Рет қаралды 6 МЛН
Эффект Карбонаро и нестандартная коробка
01:00
История одного вокалиста
Рет қаралды 10 МЛН
NextJS Tutorial - All 12 Concepts You Need to Know
44:38
ByteGrad
Рет қаралды 270 М.
I earn $137/day with this SIMPLE tech stack
5:42
Mirza Biz
Рет қаралды 3,8 М.
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 511 М.
Next js 15 is Here… New Changes Again?!
8:13
JavaScript Mastery
Рет қаралды 136 М.
React и Next js убивают фронтенд!
9:11
Миша Ларченко
Рет қаралды 47 М.
Deploy - A series on deployment of code
19:56
Hitesh Choudhary
Рет қаралды 12 М.
Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript
1:02:55
Programming with Mosh
Рет қаралды 596 М.
Next.js Server Actions...  5 awesome things you can do
7:51
Beyond Fireship
Рет қаралды 260 М.
Learn Next.js Parallel Routes In 16 Minutes
16:18
Web Dev Simplified
Рет қаралды 120 М.
DEFINITELY NOT HAPPENING ON MY WATCH! 😒
00:12
Laro Benz
Рет қаралды 64 МЛН