첫걸음 툴킷 (Apps) 전체 목록으로
IT / AI 유틸리티원클릭 리포지토리 보일러플레이트
초기 환경 구축 스크립트 메이커
Next.js 16 + Supabase 3-Tier 풀스택 구조부터 Python Poetry/UV까지, 번거로운 의존성 설치와 디렉토리 폴더 세팅, 환경 변수 구성을 원클릭 쉘 스크립트(.sh / .ps1)로 자동 생성합니다.
Next.js 16 + Supabase (3-Tier)가장 추천
App Router, Tailwind v4, TypeScript, Supabase SSR 인증 및 3-Tier 계층형 아키텍처
Next.js + Zustand + TanStack Query모던 SPA
글로벌 상태 관리(Zustand)와 서버 상태 캐싱(React Query)이 사전 구성된 프론트엔드 스택
FastAPI + Poetry + Supabase API파이썬 백엔드
Python 3.12, Poetry 가상환경, Pydantic v2, Supabase 연동 및 CORS 완비 고성능 비동기 API
Python AI & Data (UV + PyTorch)초고속 UV
차세대 Rust 기반 UV 패키지 매니저, PyTorch, Transformers, JupyterLab 초고속 AI 환경
3. 세부 설정 및 패키지 매니저
ONE-CLICK INIT SCRIPT (SH)
생성된 원클릭 초기화 스크립트
#!/usr/bin/env bash
# ==============================================================
# firststep.kr 자동 초기화 스크립트: firststep-app
# 템플릿: next-supabase-3tier (npm)
# ==============================================================
set -e # 오류 발생 시 즉시 중단
echo "🚀 [firststep-app] 프로젝트 환경 초기화를 시작합니다..."
# 1. Next.js 프로젝트 생성
npx create-next-app@latest firststep-app --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm --no-turbopack
cd firststep-app
# 2. 필수 라이브러리 설치 (Supabase, Lucide)
npm add @supabase/supabase-js lucide-react
# 3. 3-Tier 아키텍처 디렉토리 구조 생성
mkdir -p src/components/common src/components/features
mkdir -p src/lib/supabase src/services src/types src/hooks
# 4. 환경 변수 템플릿 (.env.example 및 .env.local) 생성
cat << 'EOF' > .env.example
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
EOF
cp .env.example .env.local
# 5. Supabase 클라이언트 헬퍼 코드 자동 생성
cat << 'EOF' > src/lib/supabase.ts
import { createClient } from '@supabase/supabase-js';
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
export const isSupabaseConfigured = Boolean(supabaseUrl && supabaseAnonKey);
EOF
# Git 저장소 초기화
git init
git add .
git commit -m "chore: initial project boilerplate by firststep.kr"
echo "✨ [firststep-app] 초기 환경 구축이 성공적으로 완료되었습니다!"
echo "👉 실행: cd firststep-app && npm run dev"
터미널 1초 실행 방법
터미널에서 [스크립트 복사] 후 바로 붙여넣거나: bash init.sh
RECOMMENDED GUIDE
Next.js 16 + Supabase 3-Tier 아키텍처 실무 패턴 총정리
확장 가능한 모던 웹 서비스를 위한 프레젠테이션/비즈니스/데이터 레이어 분리 설계법을 알아보세요.
가이드 글 보러가기 →