Prisma, Next Js, Supabase(Postgres 데이터베이스)를 이용한 CRUD 기능
먼저 Nextjs 앱 👇에서 Prisma를 설정해야 합니다.
Get Started with Prisma and Nextjs with Supabase (Postgress Database)
자, 시작하겠습니다
먼저 2개의 패키지를 설치해야 합니다.
yarn add react-hot-toast swr
😁스키마 생성
그런 다음 이 명령을 작성하십시오
prisma migrate dev
데이터베이스에서 데이터를 관리하기 위한 GUI 도구가 없는 경우. 그런 다음 이 명령을 작성할 수 있습니다
prisma studio
그러면 localhost:5555에 웹사이트가 열리며 이를 통해 데이터를 빠르게 관리할 수 있습니다.
✍️만들기 기능
먼저 양식을 만들어야 합니다.
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/28b9f5d240201a280f69877e22bbb117.js"/>
그런 다음 앱에서 API ENDPOINT를 만들어야 합니다.
이를 만들려면 페이지 폴더의 API 폴더에 profiles.ts라는 파일을 만드세요.
그런 다음 이 코드를 작성하세요 👇
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/99f387eb9ba4ce1913b82eea97838a92.js"/>
//@ts-ignore 18번째 줄은 유형 오류를 무시하는 데 도움이 됩니다.
이제 **create **명령을 사용해 볼 수 있습니다.
📖읽기 기능
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/c4952fd820cd203edf6a37b531fe3a67.js"/>
그런 다음 API 폴더의 profiles.ts로 이동합니다.
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/55da298c550c5a80a72210d107e76e3e.js"/>
이제 생성한 데이터를 가져올 수 있습니다.
📝업데이트 기능
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/fda278e99612f12e270b37c7983d1d0a.js"/>
그런 다음 api 폴더의 profiles.ts로 이동합니다.
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/a4ad830cd3e00c3010e7f3a2c8ba2893.js"/>
이제 entry.name이 'Taranpreet Singh'으로 변경된 것을 볼 수 있습니다.
⛔삭제 기능
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/a0779068c39de4e644308ae33c3affe8.js"/>
이제 api 폴더에서 api.tsx로 이동할 수 있습니다.
<script id="gist-ltag"src="https://gist.github.com/studywithdesign/0e174d21990a50c4c0e3788dc9002d3a.js"/>
이제 버튼을 테스트할 수 있습니다.
오류가 발생하면 콘솔 로그를 관찰하세요.
😃 읽어주셔서 감사합니다.
힌디어를 이해한다면 이 튜토리얼을 볼 수 있습니다 👇
https://youtu.be/NiCQ4KIi6VU
여기에서 제 디스코드 채널에 가입하실 수 있습니다 👇
Join the Next Dev's server Discord Server!
Reference
이 문제에 관하여(Prisma, Next Js, Supabase(Postgres 데이터베이스)를 이용한 CRUD 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nextdev/crud-functions-using-prisma-nextjs-and-supabasepostgress-database-3105텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
