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.
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.
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, 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.
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
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
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!
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 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 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 💪
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.
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
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.
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 !
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 👌
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
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.😛
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();
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 ❤
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
"🚀 Day 36/37 of #100DaysOfCode: 📌 Explored Server Side Rendering - SSR vs. CSR 📌 Delved into Next.js features - SEO, Routing, File-based routing, Fullstack 📌 Discussed when to use React.js vs. Next.js 📌 Explored the meaning of code splitting in Next.js 📌 Crafted a blog on the adventures of Day 36-37 Continuing the coding journey! 💻✨ | #SSR #CSR #NextJS #ReactJS #LearningInProgress" Upto 33:23!
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.
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.
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
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.
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.
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.
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
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.
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"
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
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 ❤
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
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.
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....❤❤❤❤❤❤❤❤
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
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.
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.
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
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!
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.
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?
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.
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
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; } }, ```
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.
so respect and amazing wishes for you guys, amazing job i really wanted to understand the ground of it and i want to buy a course but they seems bit expensive for me but here you are helping the mankind ,kudos sir cheers.
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.
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!
Watch the updated version of this course - th-cam.com/video/Zq5fmkH0T78/w-d-xo.html
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! 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
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.
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, 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.
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
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
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
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! ❤
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
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
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!
Thanks!
Thank you!
Become one of the first 1000 people to get the Next.js 13 premium eBook for free - resource.jsmastery.pro/nextjs-guide 🎉
letsssssssssssssss goooooooooooooo
😃
Heh got it🎉❤
Really appreciate your hard work and amazing contents.
got this, Thank youuuuuuuuuuu!
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
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 💪
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.
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!!!
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
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
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 !
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
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
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!
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();
Nice an practical. Also relaxing to listen to and watch - not like other tutorials that are rambling, rushing, stressing me out.
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 man helps developers around the world and he will go to heaven for this.
Thank you!
Undoubtedly, the best Next.js tutorial on TH-cam. Thank you, and keep up the amazing work!!!
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
Time Stamps
28:00 Routing using postId, layout, loading, error
31:50 Data Fetching(SSR, SSG, ISR)
Thanks!
Crystal clear and easy explanation learnt a lot from this course As always.
Thanks!
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
"🚀 Day 36/37 of #100DaysOfCode:
📌 Explored Server Side Rendering - SSR vs. CSR
📌 Delved into Next.js features - SEO, Routing, File-based routing, Fullstack
📌 Discussed when to use React.js vs. Next.js
📌 Explored the meaning of code splitting in Next.js
📌 Crafted a blog on the adventures of Day 36-37
Continuing the coding journey! 💻✨ | #SSR #CSR #NextJS #ReactJS #LearningInProgress"
Upto 33:23!
In just the first 10 minutes, you’ve already earned my like and subscription.
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.
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.
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
Bedankt
Thank you!
The most complete and detailed tutorial about next js .. thanks mate.
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.
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??
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!!
From the depths of my heart, I want to thank you. I have learned a lot. God bless you. ❤
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 have just started learning nextjs, and you came up with a blessing, easy explanation learned a lot from this course As always. Thanks, Adrian.
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.
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
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.
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"
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 😅
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
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!!!
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
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 ❤
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
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
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?
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!
Once again a great tutorial from the master. Eagerly waiting for the Tailwind CSS one. Thanks Adrian, for all the quality content.
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! ❤
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.
As a backend dev i hate client side jobs but this one, ROCKS like roller coaster. Never skips cherry on tops
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?
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.
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.
This is by far the best Next.Js tutorial as of 2023.
1:28:07 Setup MongoDB
1:38:38 Next auth secrect
1:43:57 Setup Google Authorized redirect URI
By far the best video resource to understand `Why Next.js?`
this is great, but yes, a tailwind tutorial would be amazing
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?
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
This tutorial is worth every moment. Keep up the good work.
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
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?
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.
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 } });
...
This is an underrated channel. How Adrian does not have millions of subscribers I don't know
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.
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?
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.
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 hero! this is the best tech video i have ever watched! watch with much fun
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
Please create a video on Tailwindcss where you take a design from Figma and convert it to code.
Will do! 😊
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.
so respect and amazing wishes for you guys, amazing job i really wanted to understand the ground of it and i want to buy a course but they seems bit expensive for me but here you are helping the mankind ,kudos sir cheers.
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?
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.
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 love how your design look like thank you for also taking care of the look of the webpage.
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.
tooooooooooooooo many ads ... come on !!!
Use Brave