Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App Using the Official React Framework
Вставка
- Опубліковано 30 кві 2024
- 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
If you want to truly master the most modern Next.js, check out: www.jsmastery.pro/next14 🔥
can You show as add to this redux or redux/toolkit?
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.
Thanks bro
Thank you so much
thx buddy!
Thanks!
Thank you! That was something really unexpected :D
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.
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!
@@donaldballowe8855 could you please suggest a next js course on udemy ? i will really appreciate
@@donaldballowe8855 I second this. Bought 3 courses for less than 20$.
🤑@@donaldballowe8855
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
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.
So far the most complete, interactive and packed course ever.
Not 40hrs, 90hr course like other platform do
Appreciate it!
id like a 200 hour one as long as i become the best. if u dont like studying this industry isnt for you
@@mraloush8959 exactly i never get tired of learning new things in technologies. The size of a video do not determine how good it is.
But they NEVER tell you how upload to a server.
@@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.
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!
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!
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}}
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.
More to come! ❤
This is the best Next JS course I've taken so far. Bless you brother for this incredible work
Thank you for zooming in on the screen; it makes easier to watch on my phone while keeping the code readable.
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 !
I have just started learning nextjs, and you came up like blessing. Thanks a ton. Having high expectations with this one
I hope the expectations will be fulfilled! 🎉
Honestly, the first ~45 minutes (crash course part of the video) is worth $50 to me. Excellent work!
Appreciate it! You got it for free! :)
donate 1 small of that part as soon as possible :D
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
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.
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 👌
Agreed.
Agreed
Amen to a Tailwind crash course 🥃
Absolutely! A Tailwinds crash course would be perfect.
👍🏻 tailwind crash course
Once again a great tutorial from the master. Eagerly waiting for the Tailwind CSS one. Thanks Adrian, for all the quality content.
"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." ❤
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.
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
Enjoy! ❤️
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
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.
Thank you so much!
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!
Undoubtedly, the best Next.js tutorial on UA-cam. Thank you, and keep up the amazing work!!!
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
Become one of the first 1000 people to get the Next.js 13 premium eBook for free - resource.jsmastery.pro/nextjs-guide 🎉
letsssssssssssssss goooooooooooooo
😃
Heh got it🎉❤
Really appreciate your hard work and amazing contents.
got this, Thank youuuuuuuuuuu!
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
How calmly you explain everything. Amazing teaching!
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.
He has
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.😛
Great idea!
agree
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.
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.
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!
especially the mongoose part
Perfect timing!
I really need this. Thank you so much, appreciate it!
Enjoy!
The most complete and detailed tutorial about next js .. thanks mate.
This is exaclty what I needed to get up and running with Next.js. The tutorial is concise and hands on.
You did't say "Hello There"❤😂
Sorry about that! Hello there! :D
Yeah I want my money back hahaha
Was waiting for it😅
🤯
It's Hi there I guess 😅
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};
}
another way is to do like this:
import React from "react";
const page = ({params}) => {
return (
{params.postId}
)
}
export default page;
@@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
The back and forth between the fundamentals and the Next.js version is so helpful for my understanding.
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.
This is by far the best tutorial I've found on UA-cam. 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 ❤
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.
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
This channel is pure gold! Thanks for all your work!
Nice an practical. Also relaxing to listen to and watch - not like other tutorials that are rambling, rushing, stressing me out.
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.
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.
Coming soon!
This is by far the best Next.Js tutorial as of 2023.
I just love how your design look like thank you for also taking care of the look of the webpage.
Crystal clear and easy explanation learnt a lot from this course As always.
Thanks!
Thank you so much!
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.
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!
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
Deployed link pleasw
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.
A tutorial on tailwind css would be awesome. Thanks Adrian 🙌🏽
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
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❤️❤️
Amazing!! Congrats! ❤️
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
Thank you so much!!!
Great course, very cool project! Hope this channel gets the numbers it deserved.
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.
Hence proved, you've mind reading abilities, I was searching for Next 13 Projects on YT yesterday, and you posted it today!!! ❤❤
Enjoy! ❤
Exactly same happened!!
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
I'll create one! :)
For tailwind there are excellent libraries how to use it.
@@somerandomchannel382 how
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"
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
Please create more such NextJs projects because I think that it is going to be the new meta.
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.
I have this error too
getting same error
In console I'm getting unauthorised
same here.
Did you guys found out the solution??
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....❤❤❤❤❤❤❤❤
Thank you! ❤
Outstanding content!, project touched on enough for me to dig into the docs and really get a grasp of this powerful tool
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.
This man helps developers around the world and he will go to heaven for this.
Thank you!
this is great, but yes, a tailwind tutorial would be amazing
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!
You made it straightforward, I appreciate your efforts. I hope you will do a video course about tailwindcss with modern project.
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 🥂🥂
Thank you!
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.
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 🚀!
Thank you so much brother for this tutorial and the tailwind introduction ebook also !
Informative, to the point and aesthetic
Time Stamps
28:00 Routing using postId, layout, loading, error
31:50 Data Fetching(SSR, SSG, ISR)
Thanks!
Thanks, i did my portfolio with your tutorial and got a job, now im working as fullstack using next + amplify ui, easier stack
That's amazing, congrats!
Lies
Thank you for such a great practice!! I would love a tailwind crash course too!!
Just finished, thank you so much!
Please adrian give us more content on next js. I too feel that next js will bring more jobs. Anyways you are god!!! ❤❤
More to come!
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!
Will do!
Agreed ! Before TypeScript was a "plus" but now it is mandatory most of the time.
Amazing teaching and very greatful to have found your channel! Looking forward to see that Tailwindcss crash course! 🎉
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!
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
at @1:45:23 I can't see the sign in button. Not able to perform the next steps. Anyone has a solution?
me too , did you find any solution ?
me too！！after adding new url in Google cloud，i still dont fix this problem
Thanks so much Adrian, we're really grateful for ur premium level free courses
Thanks once again
Looking forward for T3 stack projects course
Thank you!
You are great at explaining difficult stuff. Thanks
From the depths of my heart, I want to thank you. I have learned a lot. God bless you. ❤
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.
I was lookin for this comment. I'm literally on 1:48:00 right now xD So.. did You find an answer?
@@paul4137 Yes I found the missing thing ! you also need to return true in signin callback at the end.
@@ismaeelmalik4688 where exactly did you put return true in the code? Can you explain please?
@@kadirramazn In Google Provider > callbacks > signin > before catch block. Basically you need to provide wether performed callback action is positive or not.
@@ismaeelmalik4688 Thank you so much man!, I was in a hurry to complete this course & couldn't afford facing syntax bugs right now.
Please create a video on Tailwindcss where you take a design from Figma and convert it to code.
Will do! 😊
43:00 the preview of the project that will be built , awesome and clear explanation
Thank you. You are the best, your proyects and videos have helped me so much!
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?
I have similar problems after build and deploy - it only runs at "npm run dev" without errors!
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 } });
...
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.
Hey, I am having the same issue. Let me know if you find any fix :)
I've the same problem. Just now! Have u solved it?
i want to truely thank you for the effort and putting this for free !! you are helping a lot of people more than you know
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.
The authentication denied me the access. Does somebody knows why this could be happening?
I was able to fix it by adding my emails to the test in google console
@@imchriszxd4448 how please i am stuck
When it happened to me it was a typo in my code.
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.
My sign is still not working, it says Access blocked: Authorization Error
Edit: Fixed, I accidentally enclosed credentials under inverted commas.
Thank you!
@@itsskrish which credentials and how did you resolved the issue
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
got the same problem, could you fixed it?
I love the way you do a little crashcourse before doing the project !
1h 43 minutes into the tutorial... AMAZING! so far. Very clear, easy to follow and completely understandable and applicable to any other project.
Thank you!
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
@@_elusivex_ in 1:44 and stuck
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