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

  Рет қаралды 1,414,670

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 000
@javascriptmastery
@javascriptmastery 7 ай бұрын
If you want to truly master the most modern Next.js, check out: www.jsmastery.pro/next14 🔥
@romanmed9035
@romanmed9035 3 ай бұрын
can You show as add to this redux or redux/toolkit?
@WeeklyHow
@WeeklyHow 11 ай бұрын
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 11 ай бұрын
Thanks bro
@HariHaran_10
@HariHaran_10 11 ай бұрын
Thank you so much
@ericksasonet
@ericksasonet 11 ай бұрын
thx buddy!
@michaelfrancis936
@michaelfrancis936 10 ай бұрын
Thanks!
@andriisachok1854
@andriisachok1854 10 ай бұрын
Thank you! That was something really unexpected :D
@abdessamadchokri352
@abdessamadchokri352 11 ай бұрын
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!
@DouglasCastrodaSilva
@DouglasCastrodaSilva 7 ай бұрын
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.
@benjamingoller6267
@benjamingoller6267 9 ай бұрын
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!
@waxifalee
@waxifalee 9 ай бұрын
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 7 ай бұрын
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 7 ай бұрын
@@donaldballowe8855 could you please suggest a next js course on udemy ? i will really appreciate
@BluEyedRaven
@BluEyedRaven 6 ай бұрын
@@donaldballowe8855 I second this. Bought 3 courses for less than 20$.
@medimedi9082
@medimedi9082 5 ай бұрын
🤑@@donaldballowe8855
@m.e.ssofttech2806
@m.e.ssofttech2806 3 ай бұрын
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
@kooyaw4445
@kooyaw4445 Жыл бұрын
This is the best Next JS course I've taken so far. Bless you brother for this incredible work
@Furki4_4
@Furki4_4 10 ай бұрын
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 !
@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 2 ай бұрын
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 2 ай бұрын
@@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 Ай бұрын
But they NEVER tell you how upload to a server.
@shreyashraj
@shreyashraj Ай бұрын
@@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.
@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! ❤
@moinulhossain2108
@moinulhossain2108 10 ай бұрын
Once again a great tutorial from the master. Eagerly waiting for the Tailwind CSS one. Thanks Adrian, for all the quality content.
@economis411
@economis411 4 ай бұрын
Thank you for zooming in on the screen; it makes easier to watch on my phone while keeping the code readable.
@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.
@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! 🎉
@sachinlakshan5202
@sachinlakshan5202 9 ай бұрын
Undoubtedly, the best Next.js tutorial on KZbin. Thank you, and keep up the amazing work!!!
@lucygray8800
@lucygray8800 Жыл бұрын
"Fantastic as usual, I look forward to additional full-stack projects beyond the next 13 in the future. Your hard work is much appreciated. You are a lifesaver." ❤
@israelbosun4032
@israelbosun4032 11 ай бұрын
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
@FemiAdigun
@FemiAdigun 10 ай бұрын
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}}
@techEnthusiastMw
@techEnthusiastMw 10 ай бұрын
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
@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.
@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
@theivorycoder
@theivorycoder 11 ай бұрын
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 10 ай бұрын
Agreed.
@muhammadhamza3440
@muhammadhamza3440 10 ай бұрын
Agreed
@ianbates7562
@ianbates7562 10 ай бұрын
Amen to a Tailwind crash course 🥃
@FredrickLackey
@FredrickLackey 10 ай бұрын
Absolutely! A Tailwinds crash course would be perfect.
@eduardosalles9212
@eduardosalles9212 9 ай бұрын
👍🏻 tailwind crash course
@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!
@kristijanlazarev
@kristijanlazarev 10 ай бұрын
How calmly you explain everything. Amazing teaching!
@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
@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 11 ай бұрын
I have this error too
@jaythakar6788
@jaythakar6788 10 ай бұрын
getting same error
@gyanganga8441
@gyanganga8441 7 ай бұрын
In console I'm getting unauthorised
@nehalpradhan2229
@nehalpradhan2229 5 ай бұрын
same here.
@sangrammaitra5365
@sangrammaitra5365 4 ай бұрын
Did you guys found out the solution??
@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
@vaibhavdesai8455
@vaibhavdesai8455 10 ай бұрын
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.
@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 😅
@ozgunmunar
@ozgunmunar 9 ай бұрын
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 8 ай бұрын
especially the mongoose part
@mahdizangeneh6178
@mahdizangeneh6178 8 ай бұрын
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.
@muhammadazizulhoquejiku8340
@muhammadazizulhoquejiku8340 11 ай бұрын
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!
@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!
@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.
@gamingdott
@gamingdott 11 ай бұрын
The most complete and detailed tutorial about next js .. thanks mate.
@protasova_dev
@protasova_dev 8 ай бұрын
Thank you for such a great practice!! I would love a tailwind crash course too!!
@aslan6921
@aslan6921 10 ай бұрын
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 7 ай бұрын
He has
@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 10 ай бұрын
agree
@codewithpatrick2889
@codewithpatrick2889 11 ай бұрын
The back and forth between the fundamentals and the Next.js version is so helpful for my understanding.
@azeezabidoye1188
@azeezabidoye1188 Жыл бұрын
This is by far the best tutorial I've found on KZbin. 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 4 ай бұрын
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.
@arioanindito
@arioanindito Жыл бұрын
Perfect timing! I really need this. Thank you so much, appreciate it!
@javascriptmastery
@javascriptmastery Жыл бұрын
Enjoy!
@anuranroy4617
@anuranroy4617 7 ай бұрын
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 4 ай бұрын
another way is to do like this: import React from "react"; const page = ({params}) => { return ( {params.postId} ) } export default page;
@user-ug4uu5yi6u
@user-ug4uu5yi6u 3 ай бұрын
@@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
@subhajitadhikary155
@subhajitadhikary155 8 ай бұрын
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😇😇
@cedrickdomingo1478
@cedrickdomingo1478 10 ай бұрын
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.
@SELFIMPROVEMENTCLIPS18
@SELFIMPROVEMENTCLIPS18 8 ай бұрын
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 4 ай бұрын
Deployed link pleasw
@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!
@kishore260490
@kishore260490 Жыл бұрын
This channel is pure gold! Thanks for all your work!
@supercoolcat7692
@supercoolcat7692 10 ай бұрын
A tutorial on tailwind css would be awesome. Thanks Adrian 🙌🏽
@samialvi4226
@samialvi4226 Жыл бұрын
Crystal clear and easy explanation learnt a lot from this course As always. Thanks!
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you so much!
@mobix25
@mobix25 11 ай бұрын
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
@adamedison6831
@adamedison6831 6 ай бұрын
Nice an practical. Also relaxing to listen to and watch - not like other tutorials that are rambling, rushing, stressing me out.
@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! ❤️
@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!!!
@webfunction
@webfunction 11 ай бұрын
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.
@Rikimkigsck
@Rikimkigsck 10 ай бұрын
I just love how your design look like thank you for also taking care of the look of the webpage.
@renegade5942
@renegade5942 10 ай бұрын
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
@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!!
@hossinhabil7743
@hossinhabil7743 11 ай бұрын
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.
@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
@PJ-od9ev
@PJ-od9ev 9 ай бұрын
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.
@mr_weirdo
@mr_weirdo Жыл бұрын
Time Stamps 28:00 Routing using postId, layout, loading, error 31:50 Data Fetching(SSR, SSG, ISR)
@javascriptmastery
@javascriptmastery Жыл бұрын
Thanks!
@TheHumanistX
@TheHumanistX 8 ай бұрын
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.
@shichimenchoo
@shichimenchoo Ай бұрын
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!
@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 11 ай бұрын
@@somerandomchannel382 how
@pete531
@pete531 8 ай бұрын
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! ❤
@benyaminyakobi3652
@benyaminyakobi3652 9 ай бұрын
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 8 ай бұрын
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
@softmerit25
@softmerit25 10 ай бұрын
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.
@gosnooky
@gosnooky 6 ай бұрын
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.
@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!
@KevinKSSetiawan
@KevinKSSetiawan Жыл бұрын
Great course, very cool project! Hope this channel gets the numbers it deserved.
@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 🚀!
@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!
@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.
@user-zh7ic6fl7g
@user-zh7ic6fl7g 9 ай бұрын
You made it straightforward, I appreciate your efforts. I hope you will do a video course about tailwindcss with modern project.
@669jelly
@669jelly Жыл бұрын
Amazing teaching and very greatful to have found your channel! Looking forward to see that Tailwindcss crash course! 🎉
@teshaych2618
@teshaych2618 Жыл бұрын
This man helps developers around the world and he will go to heaven for this.
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you!
@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!
@CorCronje
@CorCronje 9 ай бұрын
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 9 ай бұрын
hey! I am also going through the course but I am stuck at the authentication part. didn't you have any problem too?
@SELFIMPROVEMENTCLIPS18
@SELFIMPROVEMENTCLIPS18 9 ай бұрын
The efforts you put in these videos are really worth appreciating ❤❤
@javjav6808
@javjav6808 Жыл бұрын
this is great, but yes, a tailwind tutorial would be amazing
@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 2 ай бұрын
Lies
@63montywilliams50
@63montywilliams50 11 ай бұрын
Outstanding content!, project touched on enough for me to dig into the docs and really get a grasp of this powerful tool
@SheriffKoder9
@SheriffKoder9 5 ай бұрын
Thank you so much brother for this tutorial and the tailwind introduction ebook also ! Informative, to the point and aesthetic
@danielaguero8576
@danielaguero8576 2 ай бұрын
The authentication denied me the access. Does somebody knows why this could be happening?
@imchriszxd4448
@imchriszxd4448 2 ай бұрын
I was able to fix it by adding my emails to the test in google console
@aboubakar_franckpolla_teka446
@aboubakar_franckpolla_teka446 Ай бұрын
@@imchriszxd4448 how please i am stuck
@fbenfrank
@fbenfrank Ай бұрын
When it happened to me it was a typo in my code.
@bleh3813
@bleh3813 3 ай бұрын
at @1:45:23 I can't see the sign in button. Not able to perform the next steps. Anyone has a solution?
@aboubakar_franckpolla_teka446
@aboubakar_franckpolla_teka446 Ай бұрын
me too , did you find any solution ?
@elah5942
@elah5942 Ай бұрын
me too!!after adding new url in Google cloud,i still dont fix this problem
@codecodeworld22
@codecodeworld22 6 ай бұрын
Always appreciate the great tutorials you guys create! Sadly, when I wish to start the project, Next-Auth will not install on Next v14.0.0 and I can't install previous version of Next, just ridiculous😤
@bilkisuismail6096
@bilkisuismail6096 Жыл бұрын
Thank goodness you used tailwind in this project. I love your videos but I abandon them halfway because of the complexity of material UI. I am really happy for this one. Thank you
@vivekshrirame1112
@vivekshrirame1112 Жыл бұрын
1:48:12 From the point in the video where you corrected the route.js file to add callbacks object and cut the session and signIn into callbacks, I am getting the error *Access Denied - You do not have permission to sign in* . When I check my mongodb, I didn't find the share_prompt database as well.. What could be the problem? P.S.-- I checked with the MONGODB_URI password.
@itsskrish
@itsskrish Жыл бұрын
My sign is still not working, it says Access blocked: Authorization Error Edit: Fixed, I accidentally enclosed credentials under inverted commas.
@javascriptmastery
@javascriptmastery Жыл бұрын
Thank you!
@vivekshrirame1112
@vivekshrirame1112 Жыл бұрын
@@itsskrish which credentials and how did you resolved the issue
@madebymonkeypaw
@madebymonkeypaw 11 ай бұрын
I had this same error and found that is was because my google username was not between 8-20 characters. To fix, either remove or comment out the "match" field in your user.js file and restart the program
@dariohirsch1102
@dariohirsch1102 11 ай бұрын
got the same problem, could you fixed it?
@abdulateefdamilola.o8900
@abdulateefdamilola.o8900 Жыл бұрын
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!
@mamitianasolofo723
@mamitianasolofo723 Жыл бұрын
I love the way you do a little crashcourse before doing the project !
@DarkMooN-uh1ih
@DarkMooN-uh1ih 9 ай бұрын
From the depths of my heart, I want to thank you. I have learned a lot. God bless you. ❤
@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 11 ай бұрын
@@ismaeelmalik4688 Thank you so much man!, I was in a hurry to complete this course & couldn't afford facing syntax bugs right now.
@Lotpite
@Lotpite Жыл бұрын
1:21:25 - what was the problem with adding domain address, you just skipped it and it works ?
@mykhaylolytvynov5369
@mykhaylolytvynov5369 Жыл бұрын
+1
@A03L
@A03L Жыл бұрын
I have the same problem
@mykhaylolytvynov5369
@mykhaylolytvynov5369 Жыл бұрын
As I understood, he skipped this step (without adding domain).
@mhmt4603
@mhmt4603 11 ай бұрын
You can enter any domain. Does not matter.
@vaibhavverma6769
@vaibhavverma6769 Ай бұрын
Google Cloud will not accept "localhosts", so just remove it and keep that thing untouched.
@ishwarmore3814
@ishwarmore3814 6 ай бұрын
This is by far the best Next.Js tutorial as of 2023.
@liban7032
@liban7032 2 ай бұрын
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-dd7ry6fp2d
@user-dd7ry6fp2d 11 ай бұрын
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 11 ай бұрын
Hey, I am having the same issue. Let me know if you find any fix :)
@zubairLanre
@zubairLanre 13 күн бұрын
I've the same problem. Just now! Have u solved it?
@waqasobeidy8318
@waqasobeidy8318 11 ай бұрын
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 11 ай бұрын
I have similar problems after build and deploy - it only runs at "npm run dev" without errors!
@mbul-zv9gt
@mbul-zv9gt 11 ай бұрын
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 } }); ...
@RedXtremeHacker
@RedXtremeHacker Жыл бұрын
Please create more such NextJs projects because I think that it is going to be the new meta.
@kadirramazn
@kadirramazn Жыл бұрын
You are great at explaining difficult stuff. Thanks
@kasper369
@kasper369 Жыл бұрын
Please create a video on Tailwindcss where you take a design from Figma and convert it to code.
@javascriptmastery
@javascriptmastery Жыл бұрын
Will do! 😊
Next.js isn't React
17:11
JavaScript Mastery
Рет қаралды 188 М.
Web Developer Roadmap (2024) - Everything is Changing
25:02
ByteGrad
Рет қаралды 222 М.
Кәріс тіріма өзі ?  | Synyptas 3 | 8 серия
24:47
kak budto
Рет қаралды 1,5 МЛН
Every CSS Animation property
9:26
chunkydotdev
Рет қаралды 42 М.
Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript
1:02:55
Programming with Mosh
Рет қаралды 483 М.
Learn Docker in 1 Hour | Full Docker Course for Beginners
1:27:53
JavaScript Mastery
Рет қаралды 252 М.
NextJS Tutorial - All 12 Concepts You Need to Know
44:38
ByteGrad
Рет қаралды 208 М.
React и Next js убивают фронтенд!
9:11
Миша Ларченко
Рет қаралды 40 М.
This UI component library is mind-blowing
8:23
Beyond Fireship
Рет қаралды 528 М.
Кәріс тіріма өзі ?  | Synyptas 3 | 8 серия
24:47
kak budto
Рет қаралды 1,5 МЛН