Hi Ed. I graduated from geological engineering, but left my engineering career to do what I love. I started working as Frontend Developer about 4 months ago. I learned a lot from your videos, thanks for everything.
holy moly, I would be geologist too man, now I am into full stack. Specifically, backend is more interesting. It's been a year and half since I "retired" from being it.
I was following along, but then all of a sudden there is a Form.tsx which I did not saw you creating it. So I couldn't add the last part about creating a Post. But all in all a very interesting tutorial. Can't wait to see your Full Stack Web Development course.
It all started with css flex video... Then I did a backend job for 3 years. Now, I'm tired of explaining to the front end developer about APIs and styles. Last 2 months I'm trying to figure out how to use react. You explained next in last video and here we go, Its the whole series coming up. Thanks eD!
I can't even bring myself to get back into web dev. Watching someone set up just one of many stacks and spending 45 minutes doing that is a great reminder of why I left 4 years ago.
I haven't touched React since I did a comparison video to vue/angular like 200 years ago.. So I decided to scrub through your video and see if the HTML still looks strange with all of the code mixed in, and yep.. It does. Is that the JSX stuff? I mean "className=" what in the hell, why not just "class="?!
Because "class" is a reserved name from JavaScript and JSX is JavaScript. When you are so used to using React and then switch back to normal HTML you will 100% write "className" instead of "class" and you won't know why your code isn't working 😅
Hi ed! You have been a big part of my web developer career. Thank a lot! I would like to ask if you have a guide on how we could deploy our nextjs apps to a VPS? Thanks in advance!
Isn't the point of the app directory in NextJs 13 to run server logic in the component itself? In other words, the API and the fetch is an additional step that isn't necessary. Since you are already using prisma, you can do all your prisma queries in the react server component itself. The current limitation with RSCs and Next13 is that you cant use them for mutations, so in that case, you'll need to render a client component and then use your internal API to handle the POST request.
So I followed you exact, I wonder if there are changes already. when installing next I do not have a pages folder, and my API is inside app with a file call route which looks different than your hello.ts :\ im getting an error for the const data = await getPosts() in my home/page.tsx, I do not get a res.ok "Unexpected token < in JSON at position 0"
hey ed would you say its worth it to take your course before you update it? or when will it be updated? also do you have a rough estimate for when it will be updated?
A lot of people are commenting that the tutorial is incomplete. Please understand that this tutorial assumes you know the basics of next.js. Understand the fundamentals of PostgreSQL. Like a lot of the stuff he “skips” should be stuff you know.
Awesome thank you ! Can you explain how to deploy it from localhost to the web please ? There is not so much video explaining how to deploy and I like your guides 😁
I stil didnt understand why that logged in console terminal instead of browser, I mean, that should log in console terminal only when its inside getServerSideProps, right? 35:09
Thank you Ed for the great video! I do have a question and I think a lot of experienced and beginners developers who started working with Next 13. There is this frustrating issue where you get a Hydration error, which shows no any insights or reference where the error is. It randomly happens on load when you use Server Side Rendering and Client side. Do you have tips on how to debug this ?
thank you very much Ed! can you share the repo because i stuck into this error API resolved without sending a response for /api/getPosts, this may result in stalled requests. and i want to compare?
Thanks for the vid! What settings do you use to customise your terminal? And also if you could share which theme you use in VSCode that would be awesome, it looks really clean!
I'm really lean to buy your Full Stack course but I'm only going to do so when you have the NextJs 13 done, do you have any idea how much more time you'll need to get it done? Thanks!
Great video, but I ended up getting the error "Unexpected token u in JSON at position 0 at JSON.parse" when making the API call, so I just made the prisma.post.findMany() call within my page.tsx (still server component) and this worked just fine. Not sure what the issue was, but I did use Vercel's postgres beta setup, instead of Railway so maybe that was the cause!
One question: there are many react clones of popular websites tutorial on youtube, can we code a clone and add to our public github repository ? I don't want to use it for any business or sell it to somebody. I want to use it just to get job, that shows my skills, so is it illegal to code for example google clone and add it to my public github repository?
First off all thanks for the good explanation. However, 33:18 I can't get it to work as a client component I need to fetch data exactly like this with 'use client' but I'm getting : Unhandled Runtime Error TypeError: Method Promise.prototype.then called on incompatible receiver # and I've been googling like mad but I can't find anything. It may be a bug as you said but not even that is known to google which is weird.
i understood the point but now a days people making folder like hooks and utils and libs and apis, and they call apis in hooks and smething else in libs, how that folder structure works, could you make video on this
This is 7 months old and already nothing you are saying is adding up with what is current. I am so frustrated. I want to learn prisma so I can use postgres and everything on udemy or similar is all MERN stack. The next install has options that are not mentioned here example: an option to auto add tailwind, a question on whether to use AppRouter, and the files look very dissimilar. I am getting so discouraged. Where can I learn what I need to learn without backing up my editor or trying to find which parts are relevant today? I may just need to hire a teacher because this online stuff is not for me apparently.
Please reply my comment sir I have almost completed your web development course but need more learning book for future best web development.my dream fulfil credit goes to you i stand on my feet to support my parents.
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. ################################################333I face this issue anyone help me solve this issue
Ok, the DTO checking is just ridiculous. That is why I left from Express to Nest.js. I have no idea why Next does not support Nest.js as backend server. It seems this Next.js thing is just for FE devs who does not want to write real backend...
Yo bro. You’re my best dev on TH-cam
Hi Ed. I graduated from geological engineering, but left my engineering career to do what I love. I started working as Frontend Developer about 4 months ago. I learned a lot from your videos, thanks for everything.
i was a civil engineer & was inerested in Structura Designer,but then i shifted to full stack developement,learned it & looking for job
holy moly, I would be geologist too man, now I am into full stack. Specifically, backend is more interesting. It's been a year and half since I "retired" from being it.
This is funny i also graduated with geological engineering but now a frontend developer and SME business developer
@@jessequartey what the heck buddy, lol. Same as you. Good luck to you
🤣
I was following along, but then all of a sudden there is a Form.tsx which I did not saw you creating it. So I couldn't add the last part about creating a Post. But all in all a very interesting tutorial. Can't wait to see your Full Stack Web Development course.
You're still one of the funniest devs on youtube. Thanks for making learning fun.
It all started with css flex video...
Then I did a backend job for 3 years.
Now, I'm tired of explaining to the front end developer about APIs and styles.
Last 2 months I'm trying to figure out how to use react. You explained next in last video and here we go, Its the whole series coming up.
Thanks eD!
I don’t know why, but whenever I start watching your video, I almost watch full video. How's that even possible!
wow! a nextjs fullstack guide is just what i needed .. amazing work as always 😍👏
man, you are amazing, I was waiting so bad for a tutorial from you with TS please do more often with it :D all the best buddy!
Sure thing!
@@developedbyed /o/
You've been my mentor since I started my Web Development journey in the tech space🚀🚀🚀
I can't even bring myself to get back into web dev. Watching someone set up just one of many stacks and spending 45 minutes doing that is a great reminder of why I left 4 years ago.
You are for me the best web development youtuber and you really made me love web development. Thank you so much!
so glad to see this nomad! its been ages
Thanks, man! All the good stuff in one video, cool!
Hey great video and tutorial, just wanted to point out in minute 40:00 the form.tsx and modifying the page.tsx was skipped over
I think it was left on purpose to actually check people.
I think he's gonna elaborate on this in another vid if he already didn't yet.
Im starting full stack bootcamp in 3 weeks !! Excited af
great video! add tRPC and you have the T3 stack
I really resonate with your style, subscribed.
I haven't touched React since I did a comparison video to vue/angular like 200 years ago.. So I decided to scrub through your video and see if the HTML still looks strange with all of the code mixed in, and yep.. It does. Is that the JSX stuff? I mean "className=" what in the hell, why not just "class="?!
I know, still absolute madness as always 😅
Because "class" is a reserved name from JavaScript and JSX is JavaScript. When you are so used to using React and then switch back to normal HTML you will 100% write "className" instead of "class" and you won't know why your code isn't working 😅
Unfortunately, the video is not very useful after 40 min. It's messy, with parts left out a shame because otherwise it would have been really useful.
Also no link to the repo...
Hi ed! You have been a big part of my web developer career. Thank a lot! I would like to ask if you have a guide on how we could deploy our nextjs apps to a VPS? Thanks in advance!
Man, you are on🔥, watched your video for first time, and now I am a big fan of your content.
Keep the good working going.
Isn't the point of the app directory in NextJs 13 to run server logic in the component itself? In other words, the API and the fetch is an additional step that isn't necessary. Since you are already using prisma, you can do all your prisma queries in the react server component itself. The current limitation with RSCs and Next13 is that you cant use them for mutations, so in that case, you'll need to render a client component and then use your internal API to handle the POST request.
I guess he did it to keep the UI code and DB code in separate files.
So I followed you exact, I wonder if there are changes already. when installing next I do not have a pages folder, and my API is inside app with a file call route which looks different than your hello.ts :\ im getting an error for the const data = await getPosts() in my home/page.tsx, I do not get a res.ok "Unexpected token < in JSON at position 0"
This is happening with mine as well. Were you able to resolve it?
@@steve-holt-l7i next is just changing a lot recently check some more recent vids
Same
use:
async function getPosts() {
const res = await fetch(`/api/getPosts`);
without BASE_URL
And inside Home page -
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const posts = await getPosts();
setData(posts);
}
fetchData();
}, []);
any luck?
hey ed would you say its worth it to take your course before you update it? or when will it be updated? also do you have a rough estimate for when it will be updated?
You are demotivating the juniors by this style man 🤣🤣
Nice one deved.😊
A lot of people are commenting that the tutorial is incomplete. Please understand that this tutorial assumes you know the basics of next.js. Understand the fundamentals of PostgreSQL. Like a lot of the stuff he “skips” should be stuff you know.
Hi! Thanks for the video! You could record one more tutorial about how to deploy an react/next project to an platform as Github pages! :)
Awesome thank you ! Can you explain how to deploy it from localhost to the web please ? There is not so much video explaining how to deploy and I like your guides 😁
💖💖💖
I stil didnt understand why that logged in console terminal instead of browser, I mean, that should log in console terminal only when its inside getServerSideProps, right? 35:09
viewers' website reaction video when? 👀
the post requst for is showing internatl severe 500 error
Thank you Ed for the great video! I do have a question and I think a lot of experienced and beginners developers who started working with Next 13. There is this frustrating issue where you get a Hydration error, which shows no any insights or reference where the error is. It randomly happens on load when you use Server Side Rendering and Client side. Do you have tips on how to debug this ?
thank you very much Ed! can you share the repo because i stuck into this error API resolved without sending a response for /api/getPosts, this may result in stalled requests. and i want to compare?
Change the fetch command to this const res = await fetch("localhost:3000/api/getPosts"); and get rid of the env.local file :)
Hey developedbyed what is the vscode theme you used in this course?
It's called Material Theme in Vscode extension then choose Material Theme Palenight High Contrast
Hey Ed, long time fan of your courses. I was wondering if you make a video on building a Blog website using sanity for the cms.
papaFam has tons with it, and proper usage of TS
Thanks for the vid! What settings do you use to customise your terminal? And also if you could share which theme you use in VSCode that would be awesome, it looks really clean!
Waiting for next tutorial!
Is there any way we can create separate files for models in prisma?
I'm really lean to buy your Full Stack course but I'm only going to do so when you have the NextJs 13 done, do you have any idea how much more time you'll need to get it done? Thanks!
You're the best! #forTheAlgo
Which theme you use for vscode ?
Thanks a lot!
Hi Ed ❤ I will always love u … 😎 when will you be updating the full stack course on your website ?
I always appreciate you
Me too!
Could you give an advice on how to connect nodejs(expressjs) back end to Nextjs front end ? Nodejs has different routing system than Nextjs
Amazing stuff Ed, what is you desktop wallpaper btw?
Thank you very much
Where’s the relations video you said you’re gonna make?
Great video, but I ended up getting the error "Unexpected token u in JSON at position 0 at JSON.parse" when making the API call, so I just made the prisma.post.findMany() call within my page.tsx (still server component) and this worked just fine. Not sure what the issue was, but I did use Vercel's postgres beta setup, instead of Railway so maybe that was the cause!
thank you
hey ed whats your vs code theme ?
what, where is the form post ?
x2
Do you know if it's as simple using Prisma with mongoDB ? Thanks great video !
Would you create part 2 of this tutorial?
Thank you
Yes!!
Can you also cover t3 stack?
Can you develop the front end?
1. Will your new course contain Nextjs 13? 2. Is Prisma mandatory? I come from MongoDB and would love to have fun with raw queries tbh...
Nice one
no matter what I do, always getting
Unhandled Runtime Error
Error: Unexpected token < in JSON at position 0
Anyone knows what's wrong?
One question: there are many react clones of popular websites tutorial on youtube, can we code a clone and add to our public github repository ? I don't want to use it for any business or sell it to somebody. I want to use it just to get job, that shows my skills, so is it illegal to code for example google clone and add it to my public github repository?
no its not illegal you can do it
whats theme?
First off all thanks for the good explanation. However, 33:18 I can't get it to work as a client component I need to fetch data exactly like this with 'use client' but I'm getting :
Unhandled Runtime Error
TypeError: Method Promise.prototype.then called on incompatible receiver #
and I've been googling like mad but I can't find anything. It may be a bug as you said but not even that is known to google which is weird.
Love u brother from Pakistan
i understood the point but now a days people making folder like hooks and utils and libs and apis, and they call apis in hooks and smething else in libs, how that folder structure works, could you make video on this
can i follow this video, even if I only have been doing raw HTML, CSS and js? i haven't touched react, npm etc nor anything else
its possible though learning tailwind is gonna be like learning css all over again im kinda suffering rn lol
@@neofox2526 i have done raw css for the past 6 months lmao-- but yeah I want to become good with tailwindcss
I'm ready to throw money if u do an ecommerce build
Can I still use MERN stack?
Does it have login with different users?
Great! Would love a typescript course from you
A question, please, will the front-end field remain in demand or not, and what do you advise me to do? Thank you
Always in demand
I created the folder and then cd into it.. but ... yours ends in "main"
Why did it install a pages folder for you and not for me? Nothing ever works the same just a couple months later. Quite annoying.
Yeah, same, it changed a lot since then.
This is 7 months old and already nothing you are saying is adding up with what is current. I am so frustrated. I want to learn prisma so I can use postgres and everything on udemy or similar is all MERN stack. The next install has options that are not mentioned here example: an option to auto add tailwind, a question on whether to use AppRouter, and the files look very dissimilar. I am getting so discouraged. Where can I learn what I need to learn without backing up my editor or trying to find which parts are relevant today? I may just need to hire a teacher because this online stuff is not for me apparently.
Please reply my comment sir I have almost completed your web development course but need more learning book for future best web development.my dream fulfil credit goes to you i stand on my feet to support my parents.
Link to the repo?
is there a github of this project?
i'm struggling a lot following this with next 13.3 (so after the 13.2 api changes), may i ask for an update 😅, ty anyway
I have the same issues, have you figurated it out?
Will u use trpc ?
Maybe, I am trying to see if it’s worth adding it
@@developedbyed looking forward to your next video
This man is very funny
I get a 404 when I try to fetch the api endpoint. :(
Bro🤣 looked like Floki from Viking
developedbyed your course is best. But which vscode theme have you used in this course?
It's called Material Theme in Vscode extension then choose Material Theme Palenight High Contrast
Ur vs code theme?
Sir web development course book written by you please tell me the name of the book i am your biggest fan from Pakistan
anyone, do I need migrate to from mongoose to prisma ?
I really want your vscode theme...
Material theme palenight ✨
Cool tutorial!
btw, You look a like Man United goalkeeper a.k.a De Gea :)
boleh boleh hahaha
I would like to buy your course. I would like to mass import products through CSV import. Do you think it's possible ?
what's your vs code theme name?
Material theme palenight 🔥
I use this also.
Thanks you PewDiePie
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
################################################333I face this issue
anyone help me solve this issue
I'm enjoying these videos, but I laugh when I see tailwind CSS. Isn't this a step backwards in the direction of inline styles?
Dan Abramov has still the better hair dress!
Ok, the DTO checking is just ridiculous. That is why I left from Express to Nest.js. I have no idea why Next does not support Nest.js as backend server. It seems this Next.js thing is just for FE devs who does not want to write real backend...
cry
Can you create one more fullstack next13 but 3-4 hrs long?
😘😘our honey teacher