반응형 next 프로젝트4 Next.js + Supabase 프로젝트 - (6) : 페이지 설계, CRUD 구현 이 포스팅은 아래의 포스팅에 이어지는 내용입니다.https://kyurasi.tistory.com/entry/Nextjs-Supabase-프로젝트-4-Github-연결-vercel-배포-CICD-구현하기 Next.js + Supabase 프로젝트 - (5) : Github 연결, vercel 배포, CI/CD 구현하기저는 프로젝트 개발을 진행하면서 사이트로 배포도 무료로 해보려고 합니다. 일단 무료로 사이트를 띄우는 방법으로 Vercel 을 택하겠습니다. 주요 내용1. 작업중인 프로젝트 Github 에 올리기2. 프kyurasi.tistory.com 기대 결과물 이전 포스팅까지 해서 프로젝트에 Supabase DB 연결, Vercel에 Github 을 연결하여 CI/CD 구현 까지 해보았습니다.이제 연결.. 2025. 7. 1. Next.js + Supabase 프로젝트 - (3) : React Query 설정, Supabase 연결 이 포스팅은 이전 포스팅인 Next.js + Supabase 프로젝트 - (2) 에 이어지는 내용입니다 이번 포스팅은 프로젝트에 supabase 연결(무료)하는 내용을 다룰 예정입니다. 내용을 다루기에 앞서회원 Supabase란 뭘까?Supabase 가 2020 년 등장하기 이전, 많은 개발자들의 토이 프로젝트는 빠른 개발을 위해 서버 + auth(회원 관리) + DB 의 기능을 한 번에 가져갈 수 있는 Firebase 를 주로 선택했습니다. 하지만 이 모든 기능을 가지고 등장한 supabase로 인해 firebase 대신 supabase를 택하는 개발자들이 많이 생기고 있습니다. supabse 는 오픈소스 프로젝트고, PostfreSQL 기반으로, Firebase 대비 저렴하고 다양한 연동을 지원합니다.. 2025. 6. 29. Next.js + Supabase 프로젝트 - (2) Next 프로젝트 생성, 기초 설정 이 게시글에 이어지는 내용입니다 => 이전 포스팅 : Next.js + Supabase 프로젝트 - (1) Next.js + Supabase 프로젝트 - (1)시작하기에 앞서 Next.js란?“개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서kyurasi.tistory.com 위 포스팅에서 프로젝트를 설치한 뒤, 해당 프로젝트 폴더로 이동합니다 cd 방금생성한프로젝트명 프로젝트에 생성된 구조에 대해서는 위의 포스팅에서 간략하게 다루어 보았습니다. 이번에는 Tailwind css 를 next 프로젝트에서 어떻게 사용하는지 확인해보겠습니다 아래 링크는 tailwind css 에서 제공하는 ne.. 2025. 6. 28. Next.js + Supabase 프로젝트 - (1) Next 프로젝트 생성 시작하기에 앞서 Next.js란?“개인이 풀스택 개발을 하기에 최적화 된 웹 프레임워크”서버사이드 렌더링이 큰 특징이며, React와 비슷한 문법으로 더 현대적인 웹 서비스를 구현할 수 있습니다.서버에서부터 html을 최적화해서 웹으로 내려주기 때문에 SEO(검색엔진)에 큰 도움이 됩니다.사이즈가 크지않은 개인 프로젝트 정도의 규모라면 별도로 서버구축을 할 필요 없이 Next.js만으로 서버 구축까지 전부 가능합니다. (API 구축 가능) 1. 프로젝트 생성npx create-next-app@latest 프로젝트명 사실상 기본 세팅은 전부 엔터를 눌렀습니다ㅎㅎ 일단 타입스크립트와 tailwind 를 사용할거라 전부 기본 설정대로 진행했습니다Typescript - yESLint - nTailwind CSS.. 2025. 6. 28. 이전 1 다음 반응형