SUPACODEAI STUDIO
무료로 시작
활용 사례 · Next.js 앱

AI로 Next.js 풀스택 앱 개발하기

앱을 설명하면 Supacode가 페이지, 서버 코드, API 라우트를 포함해 Next.js로 작성해요. 데이터와 로그인에는 내 Supabase 프로젝트를 연결하고, 실시간 미리보기로 동작을 확인한 뒤 내 Vercel 계정에 배포하세요.

이 아이디어로 시작하기 요금제 보기

이 프롬프트가 입력된 상태로 작성 화면이 열려요. 만들기 전에 자유롭게 수정할 수 있고, 실행 전에 필요한 크레딧이 표시돼요.

이렇게 만들어요

  1. 앱 설명하기

    페이지 구성, 다룰 데이터, 누가 무엇을 할 수 있는지 설명하세요. 형식에서 Next.js를 고르세요.

  2. Supabase 연결하기

    백엔드 탭에서 Supabase 프로젝트를 연결하세요. Supacode가 마이그레이션을 작성하고, 승인한 뒤에만 실행해요.

  3. 배포하기

    게시 메뉴에서 내 Vercel 계정에 배포하거나 코드를 GitHub에 푸시하세요.

요청할 수 있는 것

프롬프트 예시: 로그인이 있는 Next.js 앱: 사용자가 메모를 작성·수정·삭제할 수 있고, 메모는 Supabase 데이터베이스에 저장되며, 각 사용자는 자기 메모만 볼 수 있게 해 주세요.

갤러리 예시

모두 보기

자주 묻는 질문

미리보기에서 서버 코드도 실행되나요?

네. Next.js 프로젝트는 격리된 샌드박스에서 실행되므로 배포 전에 페이지와 API 라우트를 테스트할 수 있어요.

데이터베이스와 호스팅은 누구 소유인가요?

내 소유예요. 데이터베이스는 내 Supabase 프로젝트이고, 배포는 내 Vercel 계정으로 이뤄져요.

프로젝트를 내보낼 수 있나요?

네. zip으로 내려받거나 GitHub에 푸시해서 어디서든 계속 작업할 수 있어요.

내 아이디어로 직접 만들어 보세요

매일 주어지는 무료 크레딧으로 시작할 수 있어요. 모든 변경은 버전으로 저장되어 언제든 복원할 수 있어요.

만들기 시작