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.
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!
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.
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 !!
@@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.
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
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!
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.
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!
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.
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
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.
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 👌
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.
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 💪
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 !
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
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.😛
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
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.
2:24:15 Why "post.creator.image" is not working? Are there anybody face the same issue? TypeError: Cannot read properties of undefined (reading 'image')
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 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 ❤
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.
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.
@@kadiruretir In Google Provider > callbacks > signin > before catch block. Basically you need to provide wether performed callback action is positive or not.
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
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
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.
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
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.
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; } }, ```
Amazing!!!! This is such great content, I finally understand why Next.JS is so powerful and how to use it properly. Really appreciate your effort! Thank you so much!!!
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"
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!
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!
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.
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.
@JavaScript Master at 47:55 minutes of the lecture, which file should I copy. I don't get that, Please guide me. About which git hub file are you talking??
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
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.
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
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!
around 1:43:30 , when i fix the issue shown on video, i get ERR_SSL_PROTOCOL_ERROR in chrome or safari. it opens a sign in page but when i click the button it says safe connection can't be established. how can I fix that?
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
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.
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.
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?
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.
OK for some reasons this code: Prompt.find({creator: params.id}).populate('creator') from 3:11:36 for route 'app/users/[id]/posts' doesn't work properly and always returns empty array. There is kind of problem using mongoose find() method with ObjectId data type.
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....❤❤❤❤❤❤❤❤
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 ❤
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 "".
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.
Watch the updated version of this course - th-cam.com/video/Zq5fmkH0T78/w-d-xo.html
thanks
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
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.
Kya issko dkhne s phle, phle se kch sikhna pdega????
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 !!
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! ❤
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
who else woke up here
So fire that I ain’t the only one
@@fatalgaming6244i was sleeping and i heard ts
I be waking up like who tf trynna talk to me this early
Lmao
hahahahahahahahahahah
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!
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??
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
1 yr later not one dolla sent lol thats a shame
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
Thanks!
Thank you!
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
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?
This is the best Next JS course I've taken so far. Bless you brother for this incredible work
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.
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
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.
Thank you so much!
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
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
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 💪
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 !
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?
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!
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
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.
2:24:15 Why "post.creator.image" is not working? Are there anybody face the same issue?
TypeError: Cannot read properties of undefined (reading 'image')
Did u find the solution??
In the signIn callback on auth/[...nextauth] route while creating the new user with image property, use "profile.picture" instead of "profile.image" .
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
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!
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.
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.
Bedankt
Thank 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?
@@kadiruretir 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.
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!!!
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
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
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.
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.
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?
Undoubtedly, the best Next.js tutorial on TH-cam. Thank you, and keep up the amazing work!!!
Nice an practical. Also relaxing to listen to and watch - not like other tutorials that are rambling, rushing, stressing me out.
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.
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.
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.
Amazing!!!! This is such great content, I finally understand why Next.JS is so powerful and how to use it properly. Really appreciate your effort! Thank you so much!!!
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"
Crystal clear and easy explanation learnt a lot from this course As always.
Thanks!
Thank you so much!
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?
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?
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
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 have just started learning nextjs, and you came up with a blessing, easy explanation learned a lot from this course As always. Thanks, Adrian.
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'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.
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
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 😅
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!
@JavaScript Master at 47:55 minutes of the lecture, which file should I copy. I don't get that, Please guide me. About which git hub file are you talking??
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
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
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.
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
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
From the depths of my heart, I want to thank you. I have learned a lot. God bless you. ❤
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.
Time Stamps
28:00 Routing using postId, layout, loading, error
31:50 Data Fetching(SSR, SSG, ISR)
Thanks!
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.
around 1:43:30 , when i fix the issue shown on video, i get ERR_SSL_PROTOCOL_ERROR in chrome or safari. it opens a sign in page but when i click the button it says safe connection can't be established. how can I fix that?
solved it. nextauth_url was set to localhost:3000
changed it to http and problem solved. I wont delete comment in case a person get benefit.
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
Once again a great tutorial from the master. Eagerly waiting for the Tailwind CSS one. Thanks Adrian, for all the quality content.
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?
Wow, Next.js 14 tutorial even before Next.js14 released.
You are sooooo fast that you are leading the sector.
I should definetely watch this video!!!
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.
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 } });
...
The title says 14 but he talks about 13. Before I dive into this thinking I'm getting 14, can someone tell me if I'm getting 14?
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.
OK for some reasons this code:
Prompt.find({creator: params.id}).populate('creator')
from 3:11:36 for route 'app/users/[id]/posts' doesn't work properly and always returns empty array. There is kind of problem using mongoose find() method with ObjectId data type.
Finally found my bug in PromptCard component router.push(`/profile/${post._id}...`) instead router.push(`/profile/${post.creator._id}...`).
In just the first 10 minutes, you’ve already earned my like and subscription.
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?
When i try to create an api in 1:21:31 it gives an error
Why is you keep saying next 13 instead of 14 in this video, kind of confusing.
G
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! ❤
Please create a video on Tailwindcss where you take a design from Figma and convert it to code.
Will do! 😊
how did anyone get pass the authorized domain setup? timestamp 1:21:42 localhost:3000 does work. Thanks
This tutorial is worth every moment. Keep up the good work.
this is great, but yes, a tailwind tutorial would be amazing
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 ❤
i got a problem in 1:47:48 when write callback and put those you did ,then click signup but cannot be signup.
Try to change your MongoDB password and avoid using special character in your password
By far the best video resource to understand `Why Next.js?`
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 "".
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
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.
Thank you for such a great practice!! I would love a tailwind crash course too!!
This is by far the best Next.Js tutorial as of 2023.
Where’s our “Hello there!” ??? 😢
Hello there, Florin! 👋
Even I was expecting "Hello there"
wait that's 13 not 14