다음 saas 스타터 다운로드 - 다음 saas 스타터 소스 코드 다운로드

다음 SaaS 스타터

기타 소스코드

다운로드

Next.js SaaS 스타터

이는 인증 지원, 결제를 위한 Stripe 통합 및 로그인한 사용자를 위한 대시보드를 지원하는 Next.js를 사용하여 SaaS 애플리케이션을 구축하기 위한 시작 템플릿입니다.

데모: https://next-saas-start.vercel.app/

내가 이걸 왜 만들었지?

2020년에는 Next.js, Stripe 및 기타 도구를 사용하여 SaaS 애플리케이션을 구축하는 방법을 보여주는 "React 2025"라는 과정을 만들었습니다.

글쎄, 이제 거의 2025년이 되었고 React 19는 내가 예측하지 못했던 놀라운 새로운 기능을 너무나 많이 가져왔습니다! 이 저장소는 최신 React 및 Next.js 패턴을 보여줍니다. 이러한 패턴은 양식 작성, 데이터베이스와의 통신 등과 같은 SaaS 구축 시 몇 가지 일반적인 작업을 대폭 단순화할 수 있습니다.

예를 들어, React는 이제 인라인 양식 오류 및 보류 상태를 처리하기 위해 useActionState 와 같은 후크를 내장했습니다. React Server Actions는 클라이언트 측에서 API 경로를 호출하는 데 필요한 많은 상용구 코드를 대체할 수 있습니다. 마지막으로 Next.js와 결합된 React use 후크를 사용하면 강력한 useUser() 후크를 구축하는 것이 놀라울 정도로 쉽습니다.

루트 레이아웃의 Postgres 데이터베이스에서 사용자를 가져올 수 있지만 Promise 를 기다리지 는 않습니다 . 대신 Promise 를 React 컨텍스트 제공자에게 전달하여 이를 "래핑 해제"하고 스트리밍된 데이터를 기다릴 수 있습니다. 이는 데이터베이스에서 데이터를 가져오는 쉬운 코드(예: getUser() )와 클라이언트 구성 요소에서 사용할 수 있는 React 후크(예: useUser() )라는 두 가지 장점을 모두 누릴 수 있음을 의미합니다.

재미있는 사실: 이 애플리케이션의 UI 대부분은 v0? 이 저장소에 대해 알고 싶다면 여기에서 자세한 내용을 확인하세요.

특징

애니메이션 터미널 요소가 포함된 마케팅 랜딩 페이지( / )
Stripe Checkout에 연결되는 가격 페이지( /pricing )
사용자/팀에 대한 CRUD 작업이 포함된 대시보드 페이지
소유자 및 구성원 역할이 있는 기본 RBAC
Stripe 고객 포털을 통한 구독 관리
쿠키에 저장된 JWT를 사용한 이메일/비밀번호 인증
로그인된 경로를 보호하는 글로벌 미들웨어
서버 작업을 보호하거나 Zod 스키마를 검증하는 로컬 미들웨어
모든 사용자 이벤트에 대한 활동 로깅 시스템

기술 스택

프레임워크 : Next.js
데이터베이스 : 포스트그레스
ORM : 이슬비
결제 : 스트라이프
UI 라이브러리 : shadcn/ui

시작하기

git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install

로컬로 실행

포함된 설정 스크립트를 사용하여 .env 파일을 만듭니다.

pnpm db:setup

그런 다음 데이터베이스 마이그레이션을 실행하고 기본 사용자 및 팀으로 데이터베이스를 시드합니다.

pnpm db:migrate
pnpm db:seed

그러면 다음 사용자와 팀이 생성됩니다.

사용자: [email protected]
비밀번호: admin123

물론 /sign-up 통해 새로운 사용자를 생성할 수도 있습니다.

마지막으로 Next.js 개발 서버를 실행합니다.

pnpm dev

브라우저에서 http://localhost:3000을 열어 앱이 작동하는 모습을 확인하세요.

선택적으로 CLI를 통해 로컬로 Stripe 웹후크를 수신하여 구독 변경 이벤트를 처리할 수 있습니다.

stripe listen --forward-to localhost:3000/api/stripe/webhook

결제 테스트

Stripe 결제를 테스트하려면 다음 테스트 카드 세부정보를 사용하세요.

카드 번호: 4242 4242 4242 4242
만료: 향후 날짜
CVC: 임의의 3자리 숫자

생산에 들어갑니다

SaaS 애플리케이션을 프로덕션에 배포할 준비가 되면 다음 단계를 따르세요.

프로덕션 Stripe 웹훅 설정

Stripe 대시보드로 이동하여 프로덕션 환경을 위한 새 웹훅을 생성하세요.
엔드포인트 URL을 프로덕션 API 경로(예: https://yourdomain.com/api/stripe/webhook )로 설정합니다.
수신하려는 이벤트를 선택합니다(예: checkout.session.completed , customer.subscription.updated ).