Next.js App Router, Prisma, Postgres: Your First Full Stack Application
Github Project: github.com/coderyansolomon/fu...
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
Пікірлер: 53
37:09 "The most beautifuk UX I've seen" caught me off guard 😂. Amazing video, crisp and consice. 😁
@coderyan
8 ай бұрын
😂 thank you!
@muhammadhamza3440
4 ай бұрын
😅
I was having a hard time making the delete method in my first fullstack app but this helped me! Thanks a lot man! Suibscribed!
You’re the man I appreciate these videos so much you can’t imagine
@coderyan
8 ай бұрын
Thank you, I appreciate the kind words
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.
godsend dude. hardly any good videos like this with app router than i could find. liked + subbed
@coderyan
9 күн бұрын
Happy it helped
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 ?
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 🤞
@coderyan
3 ай бұрын
Thank you very much. That’s incredibly kind of you
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.
@coderyan
8 ай бұрын
Thank you! And thank you for sharing that solution
@tsykin
3 ай бұрын
That helped me as well :)
That's a great introduction, thank you
@coderyan
2 ай бұрын
You’re welcome
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
@coderyan
8 ай бұрын
Thank you, I appreciate the kind words
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
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.
thanks i really need this :D
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
@coderyan
5 ай бұрын
Happy to hear it helped!
Thank you sir
@coderyan
8 ай бұрын
You’re welcome
6:32 i thought you were about to do a sponsored add, but all you said is you just want a nice watch 😂
37:12 most beautiful ux you've ever seen haahah🤣😂
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.
@dylancunningham4308
4 ай бұрын
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.
more course like this
great workkkk ❤❤🐱💻🐱💻
@coderyan
8 ай бұрын
Thank you!
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
subscribed! thanks for the tutorial :) . im waiting for the authentication :D
@coderyan
8 ай бұрын
Its coming soon!
Do you post filtering or any tips how to implement filtering
@coderyan
8 ай бұрын
I don’t think I have anything out covering that now. But it’s definitely something I can cover in the future!
U are funny overall also contents are really cool to learn. I hit subscribe
@coderyan
2 ай бұрын
Thanks!
typescript next please
22:00
33:00
54:00
55:00 delete func
Thanks for the video ; but i guess that app broke now
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.
@andreasmotsie3357
4 ай бұрын
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
@takamotoyagami4222
2 ай бұрын
were you able to solve this, im getting the same error
23:00
50:13