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

  • @therealsharat
    @therealsharat8 ай бұрын

    37:09 "The most beautifuk UX I've seen" caught me off guard 😂. Amazing video, crisp and consice. 😁

  • @coderyan

    @coderyan

    8 ай бұрын

    😂 thank you!

  • @muhammadhamza3440

    @muhammadhamza3440

    4 ай бұрын

    😅

  • @ramonmaximiliano3557
    @ramonmaximiliano35573 ай бұрын

    I was having a hard time making the delete method in my first fullstack app but this helped me! Thanks a lot man! Suibscribed!

  • @AJ-di4df
    @AJ-di4df8 ай бұрын

    You’re the man I appreciate these videos so much you can’t imagine

  • @coderyan

    @coderyan

    8 ай бұрын

    Thank you, I appreciate the kind words

  • @sunilanthony17
    @sunilanthony173 ай бұрын

    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.

  • @jamesjohnson5542
    @jamesjohnson554210 күн бұрын

    godsend dude. hardly any good videos like this with app router than i could find. liked + subbed

  • @coderyan

    @coderyan

    9 күн бұрын

    Happy it helped

  • @ekimcemulger8101
    @ekimcemulger81018 ай бұрын

    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 ?

  • @tsykin
    @tsykin3 ай бұрын

    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

    @coderyan

    3 ай бұрын

    Thank you very much. That’s incredibly kind of you

  • @iancarr3923
    @iancarr39238 ай бұрын

    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

    @coderyan

    8 ай бұрын

    Thank you! And thank you for sharing that solution

  • @tsykin

    @tsykin

    3 ай бұрын

    That helped me as well :)

  • @Dlntck
    @Dlntck2 ай бұрын

    That's a great introduction, thank you

  • @coderyan

    @coderyan

    2 ай бұрын

    You’re welcome

  • @wlmotionstudio3358
    @wlmotionstudio33588 ай бұрын

    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

    @coderyan

    8 ай бұрын

    Thank you, I appreciate the kind words

  • @benoit4148
    @benoit41484 күн бұрын

    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

  • @sevensinscocktails
    @sevensinscocktails4 ай бұрын

    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.

  • @mDHARYL
    @mDHARYL24 күн бұрын

    thanks i really need this :D

  • @Mteusbarbosa
    @Mteusbarbosa5 ай бұрын

    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

    @coderyan

    5 ай бұрын

    Happy to hear it helped!

  • @johnubz1989
    @johnubz19898 ай бұрын

    Thank you sir

  • @coderyan

    @coderyan

    8 ай бұрын

    You’re welcome

  • @spencerhepworth6435
    @spencerhepworth64353 ай бұрын

    6:32 i thought you were about to do a sponsored add, but all you said is you just want a nice watch 😂

  • @mDHARYL
    @mDHARYL24 күн бұрын

    37:12 most beautiful ux you've ever seen haahah🤣😂

  • @mrrobot9101
    @mrrobot91015 ай бұрын

    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

    @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.

  • @xiaoyangfeng4067
    @xiaoyangfeng4067Ай бұрын

    more course like this

  • @BlockchainNinja
    @BlockchainNinja8 ай бұрын

    great workkkk ❤❤🐱‍💻🐱‍💻

  • @coderyan

    @coderyan

    8 ай бұрын

    Thank you!

  • @JEEVRAJTARALKAR
    @JEEVRAJTARALKAR3 ай бұрын

    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

  • @mikhacavin
    @mikhacavin8 ай бұрын

    subscribed! thanks for the tutorial :) . im waiting for the authentication :D

  • @coderyan

    @coderyan

    8 ай бұрын

    Its coming soon!

  • @zoki5388
    @zoki53888 ай бұрын

    Do you post filtering or any tips how to implement filtering

  • @coderyan

    @coderyan

    8 ай бұрын

    I don’t think I have anything out covering that now. But it’s definitely something I can cover in the future!

  • @londelidess
    @londelidess2 ай бұрын

    U are funny overall also contents are really cool to learn. I hit subscribe

  • @coderyan

    @coderyan

    2 ай бұрын

    Thanks!

  • @markjaylunas105
    @markjaylunas1053 ай бұрын

    typescript next please

  • @bhatnagarcapital
    @bhatnagarcapital2 ай бұрын

    22:00

  • @bhatnagarcapital
    @bhatnagarcapital3 ай бұрын

    33:00

  • @bhatnagarcapital
    @bhatnagarcapital2 ай бұрын

    54:00

  • @bhatnagarcapital
    @bhatnagarcapital3 ай бұрын

    55:00 delete func

  • @fespamo
    @fespamo7 ай бұрын

    Thanks for the video ; but i guess that app broke now

  • @ahmedyarkhan7006
    @ahmedyarkhan70067 ай бұрын

    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

    @andreasmotsie3357

    4 ай бұрын

    It has to do with the ".env.local" I had to remove ".local" extension as he did in the video as well.

  • @s.bamahfoodh
    @s.bamahfoodh5 ай бұрын

    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

    @takamotoyagami4222

    2 ай бұрын

    were you able to solve this, im getting the same error

  • @bhatnagarcapital
    @bhatnagarcapital3 ай бұрын

    23:00

  • @bhatnagarcapital
    @bhatnagarcapital2 ай бұрын

    50:13