Next.js App Router, Prisma, Postgres: Your First Full Stack Application

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 พ.ย. 2024

ความคิดเห็น • 71

  • @therealsharat
    @therealsharat ปีที่แล้ว +13

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

  • @wlmotionstudio3358
    @wlmotionstudio3358 ปีที่แล้ว +2

    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  ปีที่แล้ว

      Thank you, I appreciate the kind words

  • @jamesjohnson5542
    @jamesjohnson5542 5 หลายเดือนก่อน +2

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

    • @coderyan
      @coderyan  5 หลายเดือนก่อน

      Happy it helped

  • @AJ-di4df
    @AJ-di4df ปีที่แล้ว +4

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

    • @coderyan
      @coderyan  ปีที่แล้ว

      Thank you, I appreciate the kind words

  • @ramonmaximiliano3557
    @ramonmaximiliano3557 8 หลายเดือนก่อน +2

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

  • @iancarr3923
    @iancarr3923 ปีที่แล้ว +8

    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  ปีที่แล้ว

      Thank you! And thank you for sharing that solution

    • @tsykin
      @tsykin 9 หลายเดือนก่อน

      That helped me as well :)

  • @Dlntck
    @Dlntck 8 หลายเดือนก่อน +1

    That's a great introduction, thank you

    • @coderyan
      @coderyan  8 หลายเดือนก่อน

      You’re welcome

  • @PeeJoyHuaikrai
    @PeeJoyHuaikrai 4 หลายเดือนก่อน

    Great content with premium quality of video

  • @spencerhepworth6435
    @spencerhepworth6435 8 หลายเดือนก่อน +1

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

  • @tsykin
    @tsykin 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน +1

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

  • @baylonyap1113
    @baylonyap1113 หลายเดือนก่อน

    Thanks Ryan, Good Video...

    • @coderyan
      @coderyan  หลายเดือนก่อน

      You’re welcome

  • @Mteusbarbosa
    @Mteusbarbosa 11 หลายเดือนก่อน +2

    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  11 หลายเดือนก่อน +1

      Happy to hear it helped!

  • @BahaaAldein10
    @BahaaAldein10 2 หลายเดือนก่อน

    Great Work ❤❤❤❤❤❤

    • @coderyan
      @coderyan  2 หลายเดือนก่อน

      Thank you!

  • @y0ake77
    @y0ake77 3 หลายเดือนก่อน

    Honestly a very good tutorial❤❤

    • @coderyan
      @coderyan  3 หลายเดือนก่อน

      Thank you!

  • @mrrobot9101
    @mrrobot9101 10 หลายเดือนก่อน +1

    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 9 หลายเดือนก่อน

      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.

  • @londelidess
    @londelidess 8 หลายเดือนก่อน +2

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

    • @coderyan
      @coderyan  8 หลายเดือนก่อน

      Thanks!

  • @sunilanthony17
    @sunilanthony17 9 หลายเดือนก่อน +4

    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.

    • @AmmarAmin-p5y
      @AmmarAmin-p5y 3 หลายเดือนก่อน

      By adding Proxy, no need for cors setup.
      Your welcome

  • @fromnsk
    @fromnsk 3 หลายเดือนก่อน

    Good stuff bro! 👍👍

    • @coderyan
      @coderyan  3 หลายเดือนก่อน

      Thank you!

  • @mikhacavin
    @mikhacavin ปีที่แล้ว +2

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

    • @coderyan
      @coderyan  ปีที่แล้ว +1

      Its coming soon!

  • @johnubz1989
    @johnubz1989 ปีที่แล้ว +1

    Thank you sir

    • @coderyan
      @coderyan  ปีที่แล้ว

      You’re welcome

  • @ojomudamola6674
    @ojomudamola6674 4 หลายเดือนก่อน

    Nice

  • @BlockchainNinja
    @BlockchainNinja ปีที่แล้ว +1

    great workkkk ❤❤🐱‍💻🐱‍💻

    • @coderyan
      @coderyan  ปีที่แล้ว

      Thank you!

  • @hafizbeyofficial
    @hafizbeyofficial 2 หลายเดือนก่อน

    Please make video with middleware, because Prisma Client not runs on Vercel edge

  • @xiaoyangfeng4067
    @xiaoyangfeng4067 6 หลายเดือนก่อน +1

    more course like this

  • @ekimcemulger8101
    @ekimcemulger8101 ปีที่แล้ว +3

    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 ?

  • @mDHARYL
    @mDHARYL 6 หลายเดือนก่อน

    thanks i really need this :D

  • @JEEVRAJTARALKAR
    @JEEVRAJTARALKAR 8 หลายเดือนก่อน

    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

  • @mDHARYL
    @mDHARYL 6 หลายเดือนก่อน

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

  • @benoit4148
    @benoit4148 5 หลายเดือนก่อน

    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

  • @zoki5388
    @zoki5388 ปีที่แล้ว +2

    Do you post filtering or any tips how to implement filtering

    • @coderyan
      @coderyan  ปีที่แล้ว +1

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

  • @PauloSD
    @PauloSD 28 วันที่ผ่านมา

    npx prisma db push isnt working
    Error: P1001: Can't reach database server ...

  • @markjaylunas
    @markjaylunas 8 หลายเดือนก่อน

    typescript next please

  • @mikeoxlong2740
    @mikeoxlong2740 2 หลายเดือนก่อน

    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}

  • @y0ake77
    @y0ake77 3 หลายเดือนก่อน

    51:55

  • @bhatnagarcapital
    @bhatnagarcapital 8 หลายเดือนก่อน

    23:00

  • @fespamo
    @fespamo ปีที่แล้ว

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

  • @bhatnagarcapital
    @bhatnagarcapital 8 หลายเดือนก่อน

    33:00

  • @bhatnagarcapital
    @bhatnagarcapital 8 หลายเดือนก่อน

    55:00 delete func

  • @sam-h5r6j
    @sam-h5r6j 5 หลายเดือนก่อน

    Vercel needs phone number for 'verification' lol.

  • @bhatnagarcapital
    @bhatnagarcapital 8 หลายเดือนก่อน

    50:13

  • @bhatnagarcapital
    @bhatnagarcapital 8 หลายเดือนก่อน

    54:00

  • @Abou_Omar13
    @Abou_Omar13 4 หลายเดือนก่อน

    Ok

  • @s.bamahfoodh
    @s.bamahfoodh 11 หลายเดือนก่อน +1

    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 8 หลายเดือนก่อน

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

  • @ahmedyarkhan7006
    @ahmedyarkhan7006 ปีที่แล้ว

    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 10 หลายเดือนก่อน

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

  • @bhatnagarcapital
    @bhatnagarcapital 8 หลายเดือนก่อน

    22:00

  • @y0ake77
    @y0ake77 3 หลายเดือนก่อน

    54:40