SupaNextTemplate

Next.js 14, Supabase, DaisyUI를 활용한 풀스택 웹 애플리케이션 템플릿입니다.

시작하기

1. 환경 설정

1. 프로젝트를 클론합니다 (OR) Github 데스크탑을 다운로드 후 프로젝트를 클론합니다 :

git clone [repository-url]
cd [project-name]

2. Cursor(or VSCode)에서 프로젝트를 열고 의존성을 설치합니다:

npm install
# 또는
yarn install

3. .env.example 파일을 복사하여 .env.local 파일을 생성합니다:

cp .env.example .env.local

4. .env.local 파일에서 다음 필수 환경변수를 설정합니다:

• supabase (필수)
• portone (선택 - 결제시 필요)
• resend (선택 - 이메일 발송시 필요)

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXT_PUBLIC_PORTONE_STORE_ID=your-portone-store-id
NEXT_PUBLIC_PORTONE_CHANNEL_KEY=your-portone-channel-key
RESEND_API_KEY=your-resend-api-key

2. Supabase 설정

1. Supabase (opens in a new tab)에서 새 프로젝트를 생성합니다.
2. 생성된 프로젝트의 URL과 anon key를 .env.local 파일에 입력합니다.

3. 개발 서버 실행

npm run dev
# 또는
yarn dev

브라우저에서 http://localhost:3000을 열어 결과를 확인합니다.

주요 기능

• 🔐 인증: 구글, 카카오 로그인
• 💳 결제: 포트원 결제 통합
• 📝 게시판: CRUD 기능
• 📱 반응형 디자인
• 🎨 DaisyUI 테마
• 🔍 SEO 최적화
• 📧 이메일 발송 (Resend)

프로젝트 구조

├── app/                # Next.js 14 App Router
├── components/         # 재사용 가능한 컴포넌트
├── libs/              # 유틸리티 함수
├── public/            # 정적 파일
└── styles/

환경 설정 옵션

config.js 파일에서 다음 설정을 커스터마이즈할 수 있습니다:

• 앱 이름
• 도메인
• 테마 색상
• 인증 URL
• 기타 설정

배포

Vercel을 통한 배포를 권장합니다:

1. Vercel (opens in a new tab)에서 새 프로젝트 생성
2. GitHub 저장소 연결
3. 환경 변수 설정
4. 배포

라이센스

템플릿을 구매한 사람은 라이센스가 주어집니다.

라이센스를 가진 사람에 한해 템플릿을 기반으로 코드를 작성하여 배포하는 것은 얼마든지 가능하며 상업적인 목적으로 사용할 수 있습니다.

그러나 템플릿을 있는 그대로 재배포 할 수 없으며 상업적인 목적으로 사용할 수 없습니다. 템플릿을 라이센스 없이 무단 사용, 재배포 할 경우, 법적인 책임과 손해배상 책임을 질 수 있습니다.