ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Github Project: github.com/cod...
Embark on your coding journey with our latest tutorial, where we guide you through the creation of your very first full stack application using Next.js 13, Prisma, and Postgres. This step-by-step guide is perfect for beginners and aspiring developers alike, as we take you from the initial setup to deploying a fully functional app. Explore the latest features of Next.js 13, learn how to efficiently manage your database with Prisma, and create dynamic user interfaces with Next.js 13's app router. Join us and unlock the world of full stack development
If you're into fitness and growing muscle, make sure to check out my other channel / @schoolofmuscle
![โรงเรียนตอนตี 2 โคตรหลอน..!! [โรงเรียนไดเม่]](http://i.ytimg.com/vi/2MAEMwqVYh8/mqdefault.jpg)
37:09 "The most beautifuk UX I've seen" caught me off guard 😂.
Amazing video, crisp and consice. 😁
😂 thank you!
😅
godsend dude. hardly any good videos like this with app router than i could find.
liked + subbed
Happy it helped
hi sir you have my respect from tunisia thank's for sharing knowledge, i'm a fullstack web and mobile dev in mern stack and this days i'm switching to next
Thank you, I appreciate the kind words
You’re the man I appreciate these videos so much you can’t imagine
Thank you, I appreciate the kind words
I was having a hard time making the delete method in my first fullstack app but this helped me! Thanks a lot man! Suibscribed!
Excellent video. To get the 'npx prisma db push' command to work I had to move the prisma.schema file into a "prisma" folder in the root folder.
Thank you! And thank you for sharing that solution
That helped me as well :)
That's a great introduction, thank you
You’re welcome
Great content with premium quality of video
Thank you so much for this video, I tried following the Next official tutorial, but it have some issues because the template they use is from next 12, but I was trying using Next 14. You tutorial worked so fine, I hope I can continue the project adding NextAuth and do some PUT to edit posts
Happy to hear it helped!
I can't express how much I respect the kind of videos that you create. Your videos are always very well-structured, and you still manage to add a human touch to them. Thank you so much for this guide! ❤
I was also pleased to hear that you do JS videos for viewer who don't know TS. I am one of those ppl, and it's really nice of you. I appreciate your effort to make dev world easier for beginner developers 👍
I hope you many successes in the future this both development and your YT channel 🤞
Thank you very much. That’s incredibly kind of you
6:32 i thought you were about to do a sponsored add, but all you said is you just want a nice watch 😂
Thanks Ryan, Good Video...
You’re welcome
Great Work ❤❤❤❤❤❤
Thank you!
Nice work!, we can use another approach when creating a new post or data record by using server actions and take the advantage of Next 14.
We can build a new async function in the same component or another file with "use server" tag in the top of the function body, and we call the function inside action prop or attribute of form tag "just call it without executing it ()". The function will receive a form data as argument to function. and we can access the form fields value by it's name attribute, title field should has a name attribute "title", and in the function we access it by using formData.get("title")
and so on on another fields. I made a new folder in root directory with file actions inside, and made all my functions there with the "use server" in the top of the file. By doing that, we don't need useState to handle input state, api route and made a request from client side, and the "use client" tag we still can make our component server components.
Seems like i always have to change my server components to client components once applications become more robust. Lack of form validation is a major limitation of server components in my experience.
Okay, I'm new to the react world and wondering how do you protect the API endpoints? I'm used to building API with backend with security.
By adding Proxy, no need for cors setup.
Your welcome
U are funny overall also contents are really cool to learn. I hit subscribe
Thanks!
subscribed! thanks for the tutorial :) . im waiting for the authentication :D
Its coming soon!
more course like this
Honestly a very good tutorial❤❤
Thank you!
great workkkk ❤❤🐱💻🐱💻
Thank you!
Good stuff bro! 👍👍
Thank you!
Nice
Thank you sir
You’re welcome
Hey Ryan, thank you for your videos. I just want to ask you something. Prisma is good, but since the server functions are working on dynamic ip (doesnt depent on the hoster like ,vercel, amplify, google, netlify ) , how can we secure our database if we can not add backend IP ? is there any way to handle it ?
thanks i really need this :D
Please make video with middleware, because Prisma Client not runs on Vercel edge
Where is the prisma video??? Tried finding on your channel. I will recommend atleast put those video links in description or comments which you ask to do as pre-requisites
might be late in the picture but the authorName={post.author.name etc etc did not work for me, this did tho authorName={post.author?.name}
I have the problem with this implementation, when npm run build is made,the data saved after build process has done are not shown up when endpoint is called
Do you post filtering or any tips how to implement filtering
I don’t think I have anything out covering that now. But it’s definitely something I can cover in the future!
37:12 most beautiful ux you've ever seen haahah🤣😂
typescript next please
23:00
Thanks for the video ; but i guess that app broke now
51:55
33:00
50:13
Vercel needs phone number for 'verification' lol.
54:00
55:00 delete func
Ok
hey bro i got error of Error: Prisma schema validation - (get-config wasm)
Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: POSTGRES_URL_NON_POOLING.
--> schema.prisma:10
|
9 | url = env("POSTGRES_PRISMA_URL") // uses connection pooling
10 | directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
even in projects i have all environment variables in it it also show error in prisma studio
Invalid `prisma.user.findMany()` invocation:
error: Environment variable not found: POSTGRES_PRISMA_URL.
It has to do with the ".env.local" I had to remove ".local" extension as he did in the video as well.
Hello and thanks for this good tutorial. Unfortunately I am having an issue connecting to the vercel postgres database. I put my region to Germany since it is closer to the project location and I'm getting this error "Error: P1001: Can't reach database server at `ep-winter-scene-14118821-pooler.eu-central-1.postgres.vercel-storage.com`:`5432`". I'm using nextjs 14, vercel/postgres and Prisma. Made sure that the database is connected to my project and successfully pulled the .env variables. Not sure why I'm having this error, already wasted hours with no luck
were you able to solve this, im getting the same error
Hi Ryan, great video but I seem to be running into the same issue across multiple frameworks. I followed your guidance but once I went to retrieve the posts I got "Error: Cannot read properties of undefined (reading 'findMany')" on the main page. It's strange because I had mongo db set up in a project before the App Router was released and whenever I try to run it in the app router I get the same error code for (.find). not sure if it helps at all that im running typescript but also have type errors ignored in my nextconfig file.
22:00
54:40