SaaS Boilerplate 다운로드 - SaaS Boilerplate 소스 코드 다운로드

SaaS Boilerplate

기타 소스코드

v1.7.3

다운로드

Tailwind CSS 및 Shadcn UI를 사용한 무료 오픈 소스 SaaS 상용구

Next.js SaaS 템플릿

SaaS Boilerplate 는 SaaS 애플리케이션을 시작하기 위한 강력하고 완벽하게 사용자 정의 가능한 템플릿입니다. Next.js 및 Tailwind CSS 와 Shadcn UI 의 모듈식 UI 구성요소로 구축되었습니다. 이 Next.js SaaS 템플릿은 최소한의 노력으로 SaaS를 빠르게 구축하고 시작하는 데 도움이 됩니다.

내장된 인증 , 팀 지원을 통한 다중 테넌시 , 역할 및 권한 , 데이터베이스, I18n(국제화), 랜딩 페이지, 사용자 대시보드, 양식 처리, SEO 최적화, 로깅, Sentry를 통한 오류 보고, 테스트, 배포와 같은 필수 기능이 가득합니다. , 모니터링 및 사용자 가장을 포함하는 이 SaaS 템플릿은 시작하는 데 필요한 모든 것을 제공합니다.

개발자를 염두에 두고 설계된 이 Next.js 스타터 키트는 유형 안전성을 위해 TypeScript를 사용하고 ESLint를 통합하여 코드 품질을 유지하며 Prettier와 함께 일관된 코드 형식을 지정합니다. 테스트 제품군은 강력한 단위 테스트를 위해 Vitest와 React 테스트 라이브러리를 결합하고, Playwright는 통합 및 E2E 테스트를 처리합니다. 지속적인 통합 및 배포는 GitHub Actions를 통해 관리됩니다. 사용자 관리를 위해 Clerk에서 인증을 처리합니다. 데이터베이스 작업의 경우 PostgreSQL, SQLite 및 MySQL과 같은 널리 사용되는 데이터베이스에서 유형이 안전한 데이터베이스 관리를 위해 Drizzle ORM을 사용합니다.

새로운 SaaS 앱을 구축하든, 유연 하고 프로덕션에 바로 사용할 수 있는 SaaS 템플릿을 찾고 있든 이 상용구가 도움이 됩니다. 이 무료 오픈 소스 스타터 키트에는 개발을 가속화하고 제품을 쉽게 확장하는 데 필요한 모든 것이 포함되어 있습니다.

이 프로젝트를 복제하고 이를 사용하여 자신만의 SaaS를 생성하세요. 인증 및 다중 테넌시 시스템이 작동하는 데모인 SaaS Boilerplate에서 라이브 데모를 확인할 수 있습니다.

후원자



여기에 로고를 추가하세요

데모

라이브 데모: SaaS 상용구

랜딩 페이지	사용자 대시보드

팀 관리	사용자 프로필

가입	로그인

다크 모드가 포함된 랜딩 페이지(Pro 버전)	다크 모드가 포함된 사용자 대시보드(Pro 버전)

사이드바가 포함된 사용자 대시보드(Pro 버전)

특징

개발자 경험 우선, 매우 유연한 코드 구조 및 필요한 것만 유지:

⚡ 앱 라우터를 지원하는 Next.js
유형 확인 TypeScript
? Tailwind CSS 및 Shadcn UI와 통합
✅ TypeScript 및 React 18의 엄격 모드
직원을 통한 인증: 가입, 로그인, 로그아웃, 비밀번호 찾기, 비밀번호 재설정 등.
? 매직 링크를 통한 비밀번호 없는 인증, 다단계 인증(MFA), 소셜 인증(Google, Facebook, Twitter, GitHub, Apple 등), 비밀번호 키를 사용한 비밀번호 없는 로그인, 사용자 가장
멀티 테넌시 및 팀 지원: 조직 생성, 전환, 업데이트 및 팀 구성원 초대
역할 기반 액세스 제어 및 권한
? MFA(Multi-Factor Auth), 소셜 인증(Google, Facebook, Twitter, GitHub, Apple 등), 사용자 가장
? PostgreSQL, SQLite 및 MySQL과 호환되는 DrizzleORM을 사용한 유형 안전 ORM
? PGlite를 사용한 오프라인 및 로컬 개발 데이터베이스
next-intl 및 Crowdin을 사용한 다중 언어(i18n)
♻️ T3 Env를 사용한 유형 안전 환경 변수
⌨️ React Hook 양식을 사용한 양식
? Zod를 사용한 검증 라이브러리
? ESLint를 사용한 Linter(기본 NextJS, NextJS Core Web Vitals, Tailwind CSS 및 Antfu 구성)
? Prettier를 사용한 코드 포맷터
? Git Hooks용 Husky
Git 스테이지 파일에서 린터를 실행하기 위한 린트 스테이지
? Commitlint를 사용한 Lint git 커밋
? Commitizen을 사용하여 표준을 준수하는 커밋 메시지 작성
? Vitest 및 React 테스트 라이브러리를 사용한 단위 테스트
? Playwright와의 통합 및 E2E 테스트
? GitHub Actions를 사용하여 풀 요청에 대한 테스트 실행
? UI 개발을 위한 스토리북
Sentry를 이용한 오류 모니터링
☂️ Codecov를 사용한 코드 적용
Pino.js를 사용한 로깅 및 Better Stack을 사용한 로그 관리
Checkly를 사용하여 코드로 모니터링
? Semantic Release를 통한 자동 변경 로그 생성
? Percy를 사용한 시각적 테스트(선택 사항)
@ 접두사를 사용한 절대 가져오기
? VSCode 구성: 디버그, 설정, 작업 및 확장
? SEO 메타데이터, JSON-LD 및 오픈 그래프 태그
?️ Sitemap.xml 및 robots.txt
⌘ Drizzle Studio 및 Drizzle Kit를 사용한 CLI 마이그레이션 도구를 사용한 데이터베이스 탐색
번들러 분석기
? 무료 미니멀리스트 테마 포함
? 등대 점수 최대화

Next.js의 내장 기능:

찻잔 HTML 및 CSS 축소
? 실시간 새로고침
✅ 캐시 무효화

철학

귀하에게 숨겨진 것은 아무것도 없으므로 귀하의 요구 사항과 선호도에 맞게 필요한 조정을 할 수 있습니다.
종속성은 매달 업데이트됩니다.
초기 비용 없이 무료로 시작하세요
쉬운 사용자 정의
최소한의 코드
SEO 친화적
SaaS 구축에 필요한 모든 것
생산 준비 완료

요구사항

Node.js 20+ 및 npm

시작하기

로컬 환경에서 다음 명령을 실행합니다.

git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm install

참고로 모든 종속성은 매달 업데이트됩니다.

그런 다음 다음을 실행하여 실시간 다시 로드를 사용하여 개발 모드에서 로컬로 프로젝트를 실행할 수 있습니다.

npm run dev

즐겨 사용하는 브라우저로 http://localhost:3000을 열어 프로젝트를 확인하세요.

인증 설정

Clerk.com에서 사무원 계정을 만들고 사무원 대시보드에서 새 애플리케이션을 만듭니다. 그런 다음 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY 및 CLERK_SECRET_KEY 값을 .env.local 파일(Git에서 추적하지 않음)에 복사합니다.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

서기 대시보드에서 Organization management > Settings > Enable organization 로 이동하여 Enable Organization 해야 합니다.

이제 Next.js를 사용하여 완벽하게 작동하는 인증 시스템을 갖게 되었습니다. 가입, 로그인, 로그아웃, 비밀번호 찾기, 비밀번호 재설정, 프로필 업데이트, 비밀번호 업데이트, 이메일 업데이트, 계정 삭제 등이 가능합니다.

원격 데이터베이스 설정

이 프로젝트는 PostgreSQL, SQLite 및 MySQL 데이터베이스와 호환되는 유형 안전 ORM인 DrizzleORM을 사용합니다. 기본적으로 프로젝트는 PostgreSQL과 원활하게 작동하도록 설정되어 있으며 PostgreSQL 데이터베이스 공급자를 쉽게 선택할 수 있습니다.

번역(i18n) 설정

번역을 위해 프로젝트는 Crowdin과 결합된 next-intl 사용합니다. 개발자로서 영어(또는 다른 기본 언어) 버전만 관리하면 됩니다. 다른 언어에 대한 번역은 Crowdin에 의해 자동으로 생성되고 처리됩니다. Crowdin을 사용하여 번역 팀과 협력하거나 기계 번역의 도움으로 메시지를 직접 번역할 수 있습니다.

번역(i18n)을 설정하려면 Crowdin.com에서 계정을 만들고 새 프로젝트를 만드세요. 새로 생성된 프로젝트에서 프로젝트 ID를 찾을 수 있습니다. 또한 계정 설정 > API로 이동하여 새 개인 액세스 토큰을 생성해야 합니다. 그런 다음 GitHub Actions에서 CROWDIN_PROJECT_ID 및 CROWDIN_PERSONAL_TOKEN 환경 변수를 정의해야 합니다.

GitHub Actions에서 환경 변수를 정의한 후에는 새 커밋을 main 브랜치에 푸시할 때마다 현지화 파일이 Crowdin과 동기화됩니다.

프로젝트 구조

 .
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── migrations                      # Database migrations
├── public                          # Public assets folder
├── scripts                         # Scripts folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # Reusable components
│   ├── features                    # Components specific to a feature
│   ├── libs                        # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   └── utils                       # Utilities folder
├── tests
│   ├── e2e                         # E2E tests, also includes Monitoring as Code
│   └── integration                 # Integration tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

맞춤화

전체 프로젝트에서 FIXME: 검색하여 Next.js SaaS Boilerplate를 쉽게 구성하여 빠른 사용자 정의를 수행할 수 있습니다. 사용자 정의할 가장 중요한 파일은 다음과 같습니다.

public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png 및 public/favicon-32x32.png : 웹사이트 파비콘
src/utils/AppConfig.ts : 구성 파일
src/templates/BaseTemplate.tsx : 기본 테마
next.config.mjs : Next.js 구성
.env : 기본 환경 변수

추가 사용자 정의를 위해 소스 코드에 대한 전체 액세스 권한이 있습니다. 제공된 코드는 프로젝트를 시작하는 데 도움이 되는 예시일 뿐입니다. 한계는 없습니다.

소스 코드에는 PRO 버전에서만 사용할 수 있는 코드를 나타내는 PRO 주석도 있습니다. 이 코드를 쉽게 제거하거나 자신만의 구현으로 바꿀 수 있습니다.

데이터베이스 스키마 변경

프로젝트의 데이터베이스 스키마를 수정하려면 ./src/models/Schema.ts 에 있는 스키마 파일을 업데이트하면 됩니다. 이 파일은 Drizzle ORM 라이브러리를 사용하여 데이터베이스 테이블의 구조를 정의합니다.

스키마를 변경한 후 다음 명령을 실행하여 마이그레이션을 생성합니다.

npm run db:generate

그러면 스키마 변경 사항을 반영하는 마이그레이션 파일이 생성됩니다. 마이그레이션은 다음 데이터베이스 상호 작용 중에 자동으로 적용되므로 수동으로 실행하거나 Next.js 서버를 다시 시작할 필요가 없습니다.

커밋 메시지 형식

프로젝트는 Conventional Commits 사양을 따릅니다. 즉, 모든 커밋 메시지의 형식이 이에 맞게 지정되어야 함을 의미합니다. 커밋 메시지 작성을 돕기 위해 프로젝트에서는 커밋 프로세스를 안내하는 대화형 CLI인 Commitizen을 사용합니다. 이를 사용하려면 다음 명령을 실행하십시오.

npm run commit

기존 커밋을 사용하면 얻을 수 있는 이점 중 하나는 CHANGELOG 파일을 자동으로 생성하는 기능입니다. 또한 릴리스에 포함된 커밋 유형을 기반으로 다음 버전 번호를 자동으로 결정할 수 있습니다.

Stripe를 통한 구독 결제

이 프로젝트는 구독 결제를 위해 Stripe과 통합되었습니다. Stripe 계정을 생성해야 하며 Stripe CLI도 설치해야 합니다. Stripe CLI를 설치한 후 CLI를 사용하여 로그인해야 합니다.

stripe login

그런 다음 다음 명령을 실행하여 새 가격을 생성할 수 있습니다.

npm run stripe:setup-price

명령을 실행한 후 기존 가격 ID를 새 가격 ID로 업데이트하여 가격 ID를 복사하고 src/utils/AppConfig.ts 에 붙여넣어야 합니다.

Stripe 대시보드에서는 https://dashboard.stripe.com/test/settings/billing/portal에서 고객 포털 설정을 구성해야 합니다. 가장 중요한 것은 설정을 저장해야 한다는 것입니다.

.env 파일에서 자체 Stripe 게시 가능 키로 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY 를 업데이트해야 합니다. Stripe 대시보드에서 키를 찾을 수 있습니다. 그런 다음 .env.local 이라는 새 파일을 생성하고 새로 생성된 파일에 다음 환경 변수를 추가해야 합니다.

STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

Stripe 대시보드에서 STRIPE_SECRET_KEY 를 가져옵니다. STRIPE_WEBHOOK_SECRET 은 다음 명령을 실행하여 생성됩니다.

npm run dev

터미널에서 웹훅 서명 비밀을 찾을 수 있습니다. 이를 복사하여 .env.local 파일에 붙여 넣을 수 있습니다.

테스트

모든 단위 테스트는 소스 코드와 함께 동일한 디렉터리에 있으므로 쉽게 찾을 수 있습니다. 이 프로젝트는 단위 테스트를 위해 Vitest 및 React Testing Library를 사용합니다. 다음 명령을 사용하여 테스트를 실행할 수 있습니다.

npm run test

통합 및 E2E 테스트

이 프로젝트는 통합 및 E2E(end-to-end) 테스트를 위해 Playwright를 사용합니다. 다음 명령을 사용하여 테스트를 실행할 수 있습니다.

npx playwright install # Only for the first time in a new environment
npm run test:e2e

로컬 환경에서는 시각적 테스트가 비활성화되고 터미널에 [percy] Percy is not running, disabling snapshots. . 기본적으로 시각적 테스트는 GitHub Actions에서만 실행됩니다.

Edge 런타임 활성화(선택 사항)

앱 라우터 폴더는 Edge 런타임과 호환됩니다. 다음 줄을 src/app/layouts.tsx 추가하여 활성화할 수 있습니다.

 export const runtime = 'edge' ;

참고로 데이터베이스 마이그레이션은 Edge 런타임과 호환되지 않습니다. 따라서 src/libs/DB.ts 에서 자동 마이그레이션을 비활성화해야 합니다.

 await migrate ( db , { migrationsFolder : './migrations' } ) ;

비활성화한 후에는 다음을 사용하여 마이그레이션을 수동으로 실행해야 합니다.

npm run db:migrate

또한 데이터베이스 스키마를 업데이트할 때마다 명령을 실행해야 합니다.

프로덕션에 배포

빌드 프로세스 중에 데이터베이스 마이그레이션이 자동으로 실행되므로 수동으로 실행할 필요가 없습니다. 그러나 환경 변수에 DATABASE_URL 정의해야 합니다.

그런 다음 다음을 사용하여 프로덕션 빌드를 생성할 수 있습니다.

$ npm run build

상용구의 최적화된 프로덕션 빌드를 생성합니다. 생성된 빌드를 테스트하려면 다음을 실행하세요.

$ npm run start

또한 자체 키를 사용하여 환경 변수 CLERK_SECRET_KEY 정의해야 합니다.

이 명령은 프로덕션 빌드를 사용하여 로컬 서버를 시작합니다. 이제 원하는 브라우저에서 http://localhost:3000을 열어 결과를 확인할 수 있습니다.

오류 모니터링

프로젝트는 Sentry를 사용하여 오류를 모니터링합니다. 개발 환경에서는 추가 설정이 필요하지 않습니다. NextJS SaaS Boilerplate는 Sentry 및 Spotlight(Sentry for Development)를 사용하도록 사전 구성되어 있습니다. 모든 오류는 자동으로 로컬 Spotlight 인스턴스로 전송되므로 로컬에서 Sentry를 경험할 수 있습니다.

프로덕션 환경의 경우 Sentry 계정과 새 프로젝트를 생성해야 합니다. 그런 다음 next.config.mjs 에서 withSentryConfig 함수의 org 및 project 속성을 업데이트해야 합니다. 또한 sentry.client.config.ts , sentry.edge.config.ts 및 sentry.server.config.ts 에 Sentry DSN을 추가하세요.

코드 적용 범위

Next.js SaaS 템플릿은 코드 적용 범위 보고 솔루션을 위해 Codecov를 사용합니다. Codecov를 활성화하려면 Codecov 계정을 생성하고 GitHub 계정에 연결하세요. 귀하의 리포지토리가 Codecov 대시보드에 나타나야 합니다. 원하는 저장소를 선택하고 토큰을 복사하세요. GitHub Actions에서 CODECOV_TOKEN 환경 변수를 정의하고 토큰을 붙여넣습니다.

CODECOV_TOKEN GitHub Actions 비밀로 생성하고 소스 코드에 직접 붙여넣지 마세요.

벌채 반출

프로젝트는 로깅을 위해 Pino.js를 사용합니다. 개발 환경에서는 기본적으로 로그가 콘솔에 표시됩니다.

프로덕션의 경우 프로젝트는 이미 Better Stack과 통합되어 SQL을 사용하여 로그를 관리하고 쿼리합니다. Better Stack을 사용하려면 Better Stack 계정을 생성하고 새 소스를 생성해야 합니다. Better Stack 로그 대시보드 > 소스 > 소스 연결로 이동하세요. 그런 다음 소스에 이름을 지정하고 Node.js를 플랫폼으로 선택해야 합니다.

소스를 생성한 후에는 소스 토큰을 보고 복사할 수 있습니다. 환경 변수에서 토큰을 LOGTAIL_SOURCE_TOKEN 변수에 붙여넣습니다. 이제 모든 로그는 자동으로 Better Stack으로 전송되어 수집됩니다.

꼼꼼히 모니터링

프로젝트에서는 Checkly를 사용하여 프로덕션 환경이 항상 실행되고 있는지 확인합니다. 정기적으로 Checkly는 *.check.e2e.ts 확장자로 끝나는 테스트를 실행하고 테스트가 실패할 경우 이를 알려줍니다. 또한 애플리케이션을 전 세계적으로 사용할 수 있도록 여러 위치에서 테스트를 유연하게 실행할 수 있습니다.

Checkly를 사용하려면 먼저 해당 웹사이트에서 계정을 만들어야 합니다. 계정을 만든 후 Checkly 대시보드에서 새 API 키를 생성하고 GitHub Actions에서 CHECKLY_API_KEY 환경 변수를 설정하세요. 또한 사용자 설정 > 일반 아래 Checkly 대시보드에서도 찾을 수 있는 CHECKLY_ACCOUNT_ID 를 정의해야 합니다.

설정을 완료하려면 checkly.config.ts 파일을 자신의 이메일 주소와 프로덕션 URL로 업데이트하세요.

유용한 명령

번들 분석기

Next.js SaaS 스타터 키트에는 내장 번들 분석기가 포함되어 있습니다. JavaScript 번들의 크기를 분석하는 데 사용할 수 있습니다. 시작하려면 다음 명령을 실행하십시오.

npm run build-stats

명령을 실행하면 결과가 포함된 새 브라우저 창이 자동으로 열립니다.

데이터베이스 스튜디오

데이터베이스를 탐색하기 위해 프로젝트는 이미 Drizzle Studio로 구성되어 있습니다. 다음 명령을 실행하여 데이터베이스 스튜디오를 열 수 있습니다.

npm run db:studio

그런 다음 즐겨 사용하는 브라우저로 https://local.drizzle.studio를 열어 데이터베이스를 탐색할 수 있습니다.

VSCode 정보(선택사항)

VSCode 사용자인 경우 .vscode/extension.json 에 제안된 확장을 설치하여 VSCode와 더 효과적으로 통합할 수 있습니다. 시작 코드는 VSCode와의 원활한 통합을 위한 설정과 함께 제공됩니다. 프런트엔드 및 백엔드 디버깅 환경을 위한 디버그 구성도 제공됩니다.

VSCode에 플러그인을 설치하면 ESLint와 Prettier가 자동으로 코드를 수정하고 오류를 표시할 수 있습니다. 테스트에도 동일하게 적용됩니다. VSCode Vitest 확장을 설치하여 테스트를 자동으로 실행할 수 있으며 상황에 맞는 코드 적용 범위도 표시합니다.

전문가 팁: TypeScript를 사용한 프로젝트 와이드 유형 검사가 필요한 경우 Mac에서 Cmd + Shift + B를 사용하여 빌드를 실행할 수 있습니다.