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!
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.
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}}
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.
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 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
@@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.
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.
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 !!
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.
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!
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
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
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 👌
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!
This is by far the best tutorial I've found on TH-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 ❤
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.
Great tutorial man , In the video, the function findByIdAndRemove was used for deletion.However, this function was deprecated starting from Mongoose version 5. Therefore, we need to use the following logic instead: 1. Use findById to locate the document. 2. Use deleteOne to explicitly delete the found document. const existingPrompt = await Prompt.findById(params.id); await existingPrompt.deleteOne();
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.
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.😛
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.
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.
To everyone who's complaining that this is outdated, please read the Nextjs 14 docs, almost all the basic concepts are explained in this video. After searching and searching for a good Next 14 course, I finally stuck the gold mine and saved lots of time over tutorials which repeats the same thing over and over again, to this concise and beautifully explained tutorial
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
This Next.js 14 Full Course 2024 is an absolute game changer! 🙌 The way you break down complex topics and make them so easy to follow is amazing. Thanks for putting this together! For anyone watching, don’t miss the part at [3:22:00] where the magic happens with deploying the full-stack app. It's pure gold! 🚀 Let's build something awesome this year! Keep it up 💪
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
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
Hello dear brother, I have finished your tutorial and I would like to THANK YOU!! I’ve seen many tutorials online, but most of them are incomplete or lack resources to follow. However, your tutorial is comprehensive and perfect! Thanks again, and thank you for making it free! If I become rich, I won’t forget you xD !! i ask god to reward you !
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
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"
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
please how did you go about the part where you had to authenticate the user and automatically send the user's details to mogodb. mine has been refusing to authenticate and it keeps showing me access denied. but when I comment out the callbacks in the route.js it authenticates but is unable to save the user's details to the MongoDB database. please did you encounter this issue, and if you did, how did you go about it?? I would really love an answer because I've been stuck on it for a while.
Great video! 🙌 If you happen to run into an internal server error when trying to delete a prompt, like me, then try to replace findByIdAndRemove with findByIdAndDelete instead.
Thank you! I didn't get a server error, but the post was being removed from my profile while still persisting on the home feed and I could figure out why. This was 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!
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 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.
@@kadirramazn In Google Provider > callbacks > signin > before catch block. Basically you need to provide wether performed callback action is positive or not.
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.
thanks for this tuto, but I suggest to add a caption each time there is a typo or anything wrong in the code and refer to the timestamp of the video where it's (later on) fixed. That would save lots of time because I got stuck for hours on issues that were fixed later on in the video
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.
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
Nice simple project, which cover basic base of react and next. But it could not be called Full Course because of: - Project is not fully completted at the end of the video (only as homework) - Most of the Next js features have not been covered in video (even meta) - Nextconfig has been configurated via copy/paste (no explanation how it works) Also problem with adding domain skipped without any comments of what are you doing. The best parts of the course: - Effective using basic react functional - Database CRUD easy and cool explained - Demonstated how easy is to use Tailwind, MongoDB, Google Console Thanks for the course, I hope you will learn typescript and show your skills in near future in full project ❤
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
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....❤❤❤❤❤❤❤❤
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.
Thanks a lot for this beautiful course !! FYI , the program sign in will crash if the username of your google account contains stuff like "." "," etc. To fix this , create a function to replace these all symbols with "".
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.
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.
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?
Hey Adrian, I hope you are doing great. This tutorial is handy as always! I am facing caching issue in the deployment to Vercel for that I have tried setting headers in the response for the serverless GET function to prevent caching prompts but it won't work for me. looking forward to hearing from you thank you.
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.
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
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.
thanks for the tutorial. i took reference from it and made a code snippet sharing platfrom. added many new features. i learned a lot from this project video, Thank you
Awesome project! built and deployed. everything is working but the main feed page is only showing my first two prompts. The search feature only returns the initial two prompts despite others matching the search params in the DB. When i click on the profile, it takes me to that user and i am able to see / confirm the prompts are there. Anyone have any idea what i could be missing?
I have the same problem after I deployed the project under the valid domain! But under localhost:3000 everything runs without problems! So I also need an idea urgently!
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.
stuck at 1:21:36 I can't see how you added the authorized domain. Yours seems to just disappear. Google won't let me add localhost:3000. With or without the part it shows an error (as yours did) saying it must not specify the scheme.
It might be due to the regex constraints we set for the username (we set to a minimum 8 to 20 characters) therefore if your Google account username is shorter than 8 characters access will be deny. make sure to update the contraints
to solve the problem I had to comment ''mongoose.set('scrictQuery', true);''. Now it works and created the collection share_prompt and user in the MongoDB
1:47:48 When I follow the step and put the two async function inside callbacks, it shows access denied when I tried to login, but before this step I was able to login, anyone know about the reason? Anyway, it is an amazing tutorial! I wish I could have known about this channel early!
The reason that he missing "return true;" for try-catch in route.js ```js async signIn({ profile }) { try { await connectToDatabase(); // check if a user exists with the given email const userExists = await User.findOne({ email: profile.email }); // if not, create a new user if (!userExists) { await User.create({ email: profile.email, username: profile.name.replace(/\s/g, '').toLowerCase(), image: profile.picture, }); } return true; } catch (error) { console.log(error); return false; } }, ```
@raihanulIslamrana no its not, next13 is using pages router, 14 is using app router, you have to set up your folder and files very differently with next14
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.
I love this, and the pace is great- my only (slightly pedantic) critique is that when you add className after complex logic, it really kills those of us that use emmet abbreviations! I think your students would prefer this, considering this is an advanced framework and emmet is much easier to type. I'd rather be thinking about what i'm typing than going back and typing className... but VSC doesn't always pick these things up if there's an arrow function within the element's parameters.
Watch the updated version of this course - th-cam.com/video/Zq5fmkH0T78/w-d-xo.html
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
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
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}}
Good looking out, thanks for the tip.
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.
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
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.
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! ❤
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 !!
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
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
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
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
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
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
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
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!
This is by far the best tutorial I've found on TH-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.
This is the best Next JS course I've taken so far. Bless you brother for this incredible work
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.
Great tutorial man ,
In the video, the function findByIdAndRemove was used for deletion.However, this function was deprecated starting from Mongoose version 5. Therefore, we need to use the following logic instead:
1. Use findById to locate the document.
2. Use deleteOne to explicitly delete the found document.
const existingPrompt = await Prompt.findById(params.id);
await existingPrompt.deleteOne();
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! 🎉
You got any job sir?
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!
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!
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.
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.
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
To everyone who's complaining that this is outdated, please read the Nextjs 14 docs, almost all the basic concepts are explained in this video.
After searching and searching for a good Next 14 course, I finally stuck the gold mine and saved lots of time over tutorials which repeats the same thing over and over again, to this concise and beautifully explained tutorial
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!!!
This Next.js 14 Full Course 2024 is an absolute game changer! 🙌 The way you break down complex topics and make them so easy to follow is amazing. Thanks for putting this together! For anyone watching, don’t miss the part at [3:22:00] where the magic happens with deploying the full-stack app. It's pure gold! 🚀 Let's build something awesome this year! Keep it up 💪
Nice an practical. Also relaxing to listen to and watch - not like other tutorials that are rambling, rushing, stressing me out.
Undoubtedly, the best Next.js tutorial on TH-cam. Thank you, and keep up the amazing work!!!
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
This man helps developers around the world and he will go to heaven for this.
Thank you!
The most complete and detailed tutorial about next js .. thanks mate.
Hello dear brother,
I have finished your tutorial and I would like to THANK YOU!! I’ve seen many tutorials online, but most of them are incomplete or lack resources to follow. However, your tutorial is comprehensive and perfect! Thanks again, and thank you for making it free! If I become rich, I won’t forget you xD !! i ask god to reward you !
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"
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
please how did you go about the part where you had to authenticate the user and automatically send the user's details to mogodb. mine has been refusing to authenticate and it keeps showing me access denied. but when I comment out the callbacks in the route.js it authenticates but is unable to save the user's details to the MongoDB database. please did you encounter this issue, and if you did, how did you go about it?? I would really love an answer because I've been stuck on it for a while.
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.
Great video! 🙌
If you happen to run into an internal server error when trying to delete a prompt, like me, then try to replace findByIdAndRemove with findByIdAndDelete instead.
Thank you! I didn't get a server error, but the post was being removed from my profile while still persisting on the home feed and I could figure out why. This was it.
Thank you Bro!!! its a recent update where they changed it
Great, thank you
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.
Crystal clear and easy explanation learnt a lot from this course As always.
Thanks!
Thank you so much!
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!
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.
From the depths of my heart, I want to thank you. I have learned a lot. God bless you. ❤
The back and forth between the fundamentals and the Next.js version is so helpful for my understanding.
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.
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!!
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!
43:00 the preview of the project that will be built , awesome and clear explanation
thanks for this tuto, but I suggest to add a caption each time there is a typo or anything wrong in the code and refer to the timestamp of the video where it's (later on) fixed. That would save lots of time because I got stuck for hours on issues that were fixed later on in the video
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.
Once again a great tutorial from the master. Eagerly waiting for the Tailwind CSS one. Thanks Adrian, for all the quality content.
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
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!
hey! I am also going through the course but I am stuck at the authentication part. didn't you have any problem too?
This is by far the best Next.Js tutorial as of 2023.
Time Stamps
28:00 Routing using postId, layout, loading, error
31:50 Data Fetching(SSR, SSG, ISR)
Thanks!
Nice simple project, which cover basic base of react and next. But it could not be called Full Course because of:
- Project is not fully completted at the end of the video (only as homework)
- Most of the Next js features have not been covered in video (even meta)
- Nextconfig has been configurated via copy/paste (no explanation how it works)
Also problem with adding domain skipped without any comments of what are you doing.
The best parts of the course:
- Effective using basic react functional
- Database CRUD easy and cool explained
- Demonstated how easy is to use Tailwind, MongoDB, Google Console
Thanks for the course, I hope you will learn typescript and show your skills in near future in full project ❤
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 😅
You are a great teacher .The way you explain things is phenomenal.Thank you so much for this great project .I have completed this project
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
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! ❤
this is great, but yes, a tailwind tutorial would be amazing
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??
Thanks a lot for this beautiful course !!
FYI , the program sign in will crash if the username of your google account contains stuff like "." "," etc. To fix this , create a function to replace these all symbols with "".
Thank you for zooming in on the screen; it makes easier to watch on my phone while keeping the code readable.
Я рад, что прислушался к совету и попробовал эту связку, результат меня поразил!
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?
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.
Please create a video on Tailwindcss where you take a design from Figma and convert it to code.
Will do! 😊
As a backend dev i hate client side jobs but this one, ROCKS like roller coaster. Never skips cherry on tops
I just love how your design look like thank you for also taking care of the look of the webpage.
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 } });
...
Hey Adrian, I hope you are doing great. This tutorial is handy as always! I am facing caching issue in the deployment to Vercel for that I have tried setting headers in the response for the serverless GET function to prevent caching prompts but it won't work for me.
looking forward to hearing from you thank you.
i'm facing the same problem right now man, did you figure it out?
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?
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.
thanks for the tutorial. i took reference from it and made a code snippet sharing platfrom. added many new features. i learned a lot from this project video, Thank you
1:21:25 - what was the problem with adding domain address, you just skipped it and it works ?
+1
I have the same problem
As I understood, he skipped this step (without adding domain).
You can enter any domain. Does not matter.
Google Cloud will not accept "localhosts", so just remove it and keep that thing untouched.
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
the env file should be at the same level as package.json. move the env file outside utils and itll work. it was soo iritating for me too
tip: 3:18:25 you can copy whole .env, file and paste, they will get parsed automatically and give you the list.
I have started learning Next.js and this is my starting point
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.
Awesome project! built and deployed. everything is working but the main feed page is only showing my first two prompts. The search feature only returns the initial two prompts despite others matching the search params in the DB. When i click on the profile, it takes me to that user and i am able to see / confirm the prompts are there. Anyone have any idea what i could be missing?
I have the same problem after I deployed the project under the valid domain! But under localhost:3000 everything runs without problems! So I also need an idea urgently!
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 } });
...
@@mbul-zv9gt it's not working. Solution forn now is netlify... ;)
Having the same issue. It's probbly somehow related to vercel caching but I have no idea on how to fix this. Looking for a solution too.
anyone else stuck at 1:48:00 because of a weird error?
Me too, are u solved it?
I've got a sulution here
Yes, getting timed out error
it took me 4 days. so happy finally done it and understood it for the first time ever. Thank you very much
Is it begginer friendly and cover all the needed concepts?
@@samialvi4226 yes, it was 100% worth it. I can finally understand all these cool Github repos
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.
stuck at 1:21:36 I can't see how you added the authorized domain. Yours seems to just disappear. Google won't let me add localhost:3000. With or without the part it shows an error (as yours did) saying it must not specify the scheme.
just skip it,don't enter it and continue with him the process
Same here
Had the same problem. Can tell who has actually tried this and who has just put comments for the sake of things !
I am also stuck at the same point :-( Have you figured out a solution yet?
@@kumardeepam I think you can just leave the authorized domain blank, but I've not tested it yet.
Stuck at 1:48:16 Cant sign-in it says "Access Denied " "You do not have permission to sign in" 😥😥
It might be due to the regex constraints we set for the username (we set to a minimum 8 to 20 characters) therefore if your Google account username is shorter than 8 characters access will be deny. make sure to update the contraints
to solve the problem I had to comment ''mongoose.set('scrictQuery', true);''. Now it works and created the collection share_prompt and user in the MongoDB
Same to me, buffer time out error from mongoose right?
Where’s our “Hello there!” ??? 😢
Hello there, Florin! 👋
Even I was expecting "Hello there"
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.
A tutorial on tailwind css would be awesome. Thanks Adrian 🙌🏽
wait that's 13 not 14
1:47:48 When I follow the step and put the two async function inside callbacks, it shows access denied when I tried to login, but before this step I was able to login, anyone know about the reason?
Anyway, it is an amazing tutorial! I wish I could have known about this channel early!
did you find the solution?
I'm stuck on this error too!
ok i mistyped something in user.js and deleted the match thing in username. that seemed to fix it
@@WydeZ it still not work for me, have you change anything yet?
@@WydeZ hey i fixed the mongoDB connected but it still not let me sign in, it just keep saying access denied, do you have the same error?
hey @1:48:00 after adding the callbacks : in route.js i am getting access denied error
The reason that he missing "return true;" for try-catch in route.js
```js
async signIn({ profile }) {
try {
await connectToDatabase();
// check if a user exists with the given email
const userExists = await User.findOne({ email: profile.email });
// if not, create a new user
if (!userExists) {
await User.create({
email: profile.email,
username: profile.name.replace(/\s/g, '').toLowerCase(),
image: profile.picture,
});
}
return true;
}
catch (error) {
console.log(error);
return false;
}
},
```
@@NickLeQK thx for this, i had "name" instead of "username" lol
@@NickLeQK a year later! Thanks man! I was stuck for like 45 minutes.
me it was a typo in the Enviromental variable MONGODB_URI was misspelled.
For all with home page problem on vercel- it's vercel problem :) So all you need to do is wait or deploy on netlify ;)
I gave up after not being able to fix sign in at 1:48:00 , tried for 2 hours ,saw yt comments,github too , nothing worked
what error you were getting?
@@paraschauhan9978 For me personally, the signin button doesnt show up even after the providers are added. I'm kinda stuck too
Same issue for me 😢
Same issue man
I don't know what error you all are getting but I think mistake should be in auth -> page.js signin
Title is deceiving. It’s a Next 13 tutorial in reality
Both are mostly similar
@raihanulIslamrana no its not, next13 is using pages router, 14 is using app router, you have to set up your folder and files very differently with next14
@@singharajusaiby the way Next 13 also uses app routing
@@singharajusai I said mostly similar not 100% similar.
@@singharajusaidid you even watch the video?😒 He explained that he used the app router
localhost:3000 is not working even with http
It worked?
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.
I love this, and the pace is great- my only (slightly pedantic) critique is that when you add className after complex logic, it really kills those of us that use emmet abbreviations!
I think your students would prefer this, considering this is an advanced framework and emmet is much easier to type. I'd rather be thinking about what i'm typing than going back and typing className... but VSC doesn't always pick these things up if there's an arrow function within the element's parameters.
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!