문서
Next.js
시작하기
Next 13용 supastarter (앱 라우터)
이 안내서는 Next.js 13용 supastarter 설정 과정을 안내합니다. 프로젝트를 복제하고 종속성을 설치하며 데이터베이스를 설정하고 로컬 개발 서버를 실행하는 과정을 안내합니다.
시작하기 전에 supastarter가 사용하는 도구와 라이브러리를 간단히 살펴보고 싶습니다.
- 🚀 TurboRepo (새 탭에서 열기) \- Monorepo
- 👨🏼💻 Next 13 with app router (새 탭에서 열기) \- React 프레임워크
- 💽 Prisma (새 탭에서 열기) \- ORM (데이터베이스 액세스 레이어)
- 🔐 Lucia Auth (새 탭에서 열기) \- 인증
- 💅🏼 Tailwind CSS (새 탭에서 열기) \- CSS 프레임워크
- 🧩 Radix UI (새 탭에서 열기) \- 헤드리스 컴포넌트
- 📝 Contentlayer (새 탭에서 열기) \- MDX 기반 CMS
- 💳 Stripe (새 탭에서 열기) 또는 Lemonsqueezy (새 탭에서 열기) \- 결제 처리
- 📫 React Email (새 탭에서 열기) \- React에서 이메일 템플릿
시작하기 전에, 컴퓨터에 다음이 설치되어 있어야 합니다.
- Node.js (새 탭에서 열림) (v18 이상)
- Git (새 탭에서 열림)
- pnpm (새 탭에서 열림)
- VSCode (새 탭에서 열림) (권장, 또는 다른 코드 편집기)
supastarter는 Prisma (새 탭에서 열림)을 ORM(데이터베이스 액세스 레이어)로 사용합니다. 이는 Prisma에서 지원하는 PostgreSQL, MySQL, SQLite, MongoDB를 포함한 모든 데이터베이스를 사용할 수 있다는 것을 의미합니다. 지원되는 모든 데이터베이스를 여기 (새 탭에서 열림)에서 찾을 수 있습니다.
새 supastarter 프로젝트를 만들기 전에 새 데이터베이스를 만들고 연결 문자열을 준비했는지 확인하세요. PostgreSQL을 사용하는 경우 연결 문자열은 다음과 같이 보일 것입니다:
postgresql://사용자:비밀번호@호스트:포트/데이터베이스
추천하는 데이터베이스 제공업체는 Supabase (새 탭에서 열림), PlanetScale (새 탭에서 열림) 및 Neon (새 탭에서 열림)입니다.
특정 제공업체에 대한 설정 가이드도 supastarter 블로그(새 탭에서 열림)에서 찾을 수 있습니다:
설치 과정 중에 다음 정보를 제공하라는 요청이 있을 것입니다:
- 프로젝트 이름
- 당신의 프로젝트의 이름
- 데이터베이스 제공자
- 당신이 사용 중인 데이터베이스 제공자
- 데이터베이스 연결 문자열
- 당신의 데이터베이스의 연결 문자열
새로운 supastarter 프로젝트를 만들려면 다음 명령을 실행하면 됩니다 (프로젝트 이름으로 my-awesome-project를 대체하세요):
npx supastarter new my-awesome-project
이 명령은 supastarter 저장소를 복제하고 모든 종속 항목을 설치하며 데이터베이스를 설정합니다.
설치 과정 중에 오류가 발생하면 수동 설정을 시도해 주세요.
이제 앱이 준비된 상태입니다. 로컬 개발 서버를 시작하려면 프로젝트 루트 폴더로 이동한 후 다음 명령을 실행하세요.
브라우저에서 http://localhost:3000 (새 탭에서 열림)을(를) 열어 앱을 확인하세요.