Step By Step Guide To Full Stack Web Development | Next.js13 Tailwind Prisma Postgresql Typescript
Vložit
- čas přidán 27. 07. 2024
- Check out my courses to become a PRO!
developedbyed.com/
Today we will create a go to project for fullstack development using Nextjs13. If you ever wanted an easy way to set up a fullstack project, this is the easiest I found so far.
We will be using Next 13 as our base foundation for our full stack app.
We will then slowly introduce Tailwindcss which is a styling library for React that enables you to do quick utility classes to style up your app.
Prisma will be used as an ORM to communicate with out database that is hosted on Railway.
Chapters:
0:00 - Intro
01:23 Next 13
07:28 Tailwindcss
11:53 Prisma with Postgresql
25:23 Creating our App
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #react - Věda a technologie
Yo bro. You’re my best dev on CZcams
wow! a nextjs fullstack guide is just what i needed .. amazing work as always 😍👏
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.
You are for me the best web development youtuber and you really made me love web development. Thank you so much!
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
🤣
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!
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!
Thanks, man! All the good stuff in one video, cool!
so glad to see this nomad! its been ages
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🚀🚀🚀
Im starting full stack bootcamp in 3 weeks !! Excited af
I don’t know why, but whenever I start watching your video, I almost watch full video. How's that even possible!
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 😁
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?
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!
great video! add tRPC and you have the T3 stack
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 ?
Nice one deved.😊
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! :)
Hi Ed ❤ I will always love u … 😎 when will you be updating the full stack course on your website ?
Amazing stuff Ed, what is you desktop wallpaper btw?
Is there any way we can create separate files for models in prisma?
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 😅
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!
Waiting for next tutorial!
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
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!
Could you give an advice on how to connect nodejs(expressjs) back end to Nextjs front end ? Nodejs has different routing system than Nextjs
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.
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.
the post requst for is showing internatl severe 500 error
Thanks a lot!
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
Do you know if it's as simple using Prisma with mongoDB ? Thanks great video !
Can you develop the front end?
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
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.
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.
Thank you very much
Does it have login with different users?
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 :)
Nice one
Can you also cover t3 stack?
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
I always appreciate you
Me too!
Which theme you use for vscode ?
Can I still use MERN stack?
whats theme?
You're the best! #forTheAlgo
You are demotivating the juniors by this style man 🤣🤣
Great! Would love a typescript course from you
I created the folder and then cd into it.. but ... yours ends in "main"
thank you
no matter what I do, always getting
Unhandled Runtime Error
Error: Unexpected token < in JSON at position 0
Anyone knows what's wrong?
hey ed whats your vs code theme ?
Would you create part 2 of this tutorial?
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?
@@deepdisco-v9s 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?
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...
what, where is the form post ?
x2
anyone, do I need migrate to from mongoose to prisma ?
Thank you
Where’s the relations video you said you’re gonna make?
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
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
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...
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.
Sir web development course book written by you please tell me the name of the book i am your biggest fan from Pakistan
Link to the repo?
I get a 404 when I try to fetch the api endpoint. :(
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
viewers' website reaction video when? 👀
Ur vs code theme?
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.
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?
💖💖💖
thank you bro :)
Love u brother from Pakistan
is there a github of this project?
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.
Yes!!
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.
I'm ready to throw money if u do an ecommerce build
Bro🤣 looked like Floki from Viking
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
Will u use trpc ?
Maybe, I am trying to see if it’s worth adding it
@@developedbyed looking forward to your next video
I really want your vscode theme...
Material theme palenight ✨
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
what's your vs code theme name?
Material theme palenight 🔥
I use this also.
This man is very funny
Cool tutorial!
btw, You look a like Man United goalkeeper a.k.a De Gea :)
boleh boleh hahaha
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!
Great guide but unfortunately outdated with all new updates to nextjs13, would be nice with a new one, if time is on your side! Cheers!
I would like to buy your course. I would like to mass import products through CSV import. Do you think it's possible ?
wooooooooooooo
Can you create one more fullstack next13 but 3-4 hrs long?
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