Skip to content

Latest commit

 

History

68 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Slipway — AI-first SaaS Boilerplate

CI License: MIT README: English | 日本語

Next.js TypeScript Prisma PostgreSQL Node

English | 日本語

A Next.js SaaS starter built to be developed with AI. Most boilerplates give you code; Slipway also gives you the Claude Code workspace — a CLAUDE.md that teaches the architecture, agents that review and build to the house style, and slash commands for the repetitive work. Your AI pair programmer is productive from the very first prompt.

A slipway is the ramp a ship launches from. That is the job of this repo: get your product into the water fast.

What's inside

  • Next.js 16 — App Router, React Server Components, Server Actions, Turbopack
  • Auth.js v5 (NextAuth) — email/password + optional Google OAuth, JWT sessions, two-layer route protection
  • Prisma 7 + Postgres — Rust-free client via the pg driver adapter; one-command local stack via Docker Compose; the same containerized app + Postgres in production
  • Tailwind CSS v4 — landing page (hero / features / FAQ) and a dashboard shell with settings
  • TypeScript strict modenpm run build, npm run lint, and npx tsc --noEmit all pass clean
  • Tested — Vitest unit tests over the lib/ logic + a Playwright smoke suite for the public pages, both wired into CI
  • Claude Code workspaceCLAUDE.md, 3 agents, 3 slash commands, sane permissions (see below)

Quick start

Requirements: Docker (with Compose). No local Node or Postgres needed.

git clone <repo-url> my-app && cd my-app
cp .env.example .env
# set AUTH_SECRET in .env — generate one with: openssl rand -base64 32
docker compose up             # Postgres + the app with hot reload

Open http://localhost:3000 — email/password signup works immediately, no external services required. Edits reload live. From clone to a signed-in dashboard in well under 30 minutes (typically under 5).

Prefer the host? With Node.js 22+ and the compose Postgres running (docker compose up db), point DATABASE_URL at localhost:5432 in .env, then npm install && npx prisma db push && npm run dev.

To enable Google sign-in later, create OAuth credentials in the Google Cloud Console (redirect URI: http://localhost:3000/api/auth/callback/google) and set AUTH_GOOGLE_ID / AUTH_GOOGLE_SECRET. The button enables itself.

Working with Claude Code

This is the part other boilerplates don't ship:

What it does
CLAUDE.md Teaches the AI the architecture, conventions, and gotchas of this codebase
agents/feature-builder Implements multi-file features end to end, following the house style
agents/code-reviewer Reviews diffs for auth, validation, and Next.js 16 pitfalls before you commit
agents/db-expert Owns Prisma schema changes: edit → push → regenerate → fix fallout
/new-page Scaffolds a protected dashboard page wired into the sidebar
/add-model Adds a Prisma model with conventions and validation wired through
/preflight Runs lint + types + build and reports before you ship

Open the repo with Claude Code and try: /new-page projects — list the user's projects with a create form.

Project structure

app/
  (auth)/                  login & signup pages + server actions
  api/auth/[...nextauth]/  Auth.js route handler
  dashboard/               protected app shell: overview, settings
  page.tsx                 landing page (hero, features, FAQ)
components/                landing, auth, dashboard, ui primitives
lib/                       auth.ts, prisma.ts, site.ts, validations.ts, utils.ts
prisma/schema.prisma       User / Account / Session / VerificationToken
proxy.ts                   cookie check for /dashboard (authoritative check in layout)
.claude/                   CLAUDE.md companion: agents, commands, settings

Going to production

The stack is already Postgres. Two paths:

  • Docker anywhere — build the standalone image and run it against a managed Postgres. Verify the production build locally first:

    docker compose -f docker-compose.prod.yml up --build

    This runs the schema push, then serves the slim next start (standalone) image on http://localhost:3000. Point DATABASE_URL at your real database and deploy the same image to Fly.io / Railway / Cloud Run / a VPS.

  • Vercel — works out of the box; set DATABASE_URL (managed Postgres) plus the env vars below.

    Deploy with Vercel

Then:

  1. Set AUTH_SECRET, NEXT_PUBLIC_APP_URL, DATABASE_URL, and (optionally) the Google OAuth vars.
  2. Add your production domain to the Google OAuth client redirect URIs.
  3. For a real migration history, adopt prisma migrate (migrate dev locally, migrate deploy in the container) instead of the db push default.

Known limitations (deliberate scope cuts)

  • No email verification or password reset flow (requires an email provider — Resend/Postmark is the natural next step).
  • Tests cover lib/ logic (Vitest) and a public-page smoke run (Playwright); there is no DB-backed signup → dashboard e2e flow yet.
  • Placeholder stats on the dashboard overview.

License

MIT © 2026 skipbit


Slipway — AI-first SaaS ボイラープレート

English | 日本語

AI と一緒に開発することを前提に設計された Next.js SaaS スターターです。多く のボイラープレートはコードだけを提供しますが、Slipway は Claude Code ワー クスペースも同梱しています — アーキテクチャを AI に教える CLAUDE.md、設 計規約に沿ってレビュー・実装するエージェント、繰り返し作業のためのスラッシュ コマンド。AI ペアプログラマーが最初のプロンプトから戦力になります。

Slipway(進水台)は船を水に降ろすための斜路のこと。このリポジトリの役割もそ れと同じ — あなたのプロダクトを最速で水に浮かべることです。

含まれるもの

  • Next.js 16 — App Router、React Server Components、Server Actions、Turbopack
  • Auth.js v5 (NextAuth) — メール/パスワード + Google OAuth(任意)、JWT セッション、二層のルート保護
  • Prisma 7 + Postgres — pg ドライバアダプタ経由の Rust-free クライアント。Docker Compose で1コマンドのローカル環境。本番も同じコンテナ + Postgres
  • Tailwind CSS v4 — ランディングページ(ヒーロー / 機能 / FAQ)と設定ページ付きダッシュボード
  • TypeScript strict モードnpm run build / npm run lint / npx tsc --noEmit すべてクリーン
  • テスト付きlib/ ロジックの Vitest 単体テスト + 公開ページの Playwright スモークテスト。どちらも CI に組み込み済み
  • Claude Code ワークスペースCLAUDE.md、エージェント3体、スラッシュコマンド3個、適切な権限設定

クイックスタート

必要環境: Docker(Compose 同梱)。ローカルの Node や Postgres は不要。

git clone <repo-url> my-app && cd my-app
cp .env.example .env
# .env の AUTH_SECRET を設定 — 生成コマンド: openssl rand -base64 32
docker compose up             # Postgres とアプリをホットリロードで起動

http://localhost:3000 を開けば、メール/パスワードでのサインアップが外部サー ビスなしで即座に動きます。ファイル編集は即座に反映されます。クローンからダッ シュボードへのログインまで30分以内(通常は5分以内)。

ホストで直接動かしたい場合は、Node.js 22+ と compose の Postgres (docker compose up db)を用意し、.envDATABASE_URLlocalhost:5432 に向けて npm install && npx prisma db push && npm run dev

Google ログインを有効にするには、Google Cloud Console で OAuth 認証情報を作成し(リダイレクト URI: http://localhost:3000/api/auth/callback/google)、AUTH_GOOGLE_ID / AUTH_GOOGLE_SECRET を設定してください。ボタンは自動で有効になります。

Claude Code との開発

ここが他のボイラープレートにはない部分です:

役割
CLAUDE.md このコードベースのアーキテクチャ・規約・落とし穴を AI に教える
agents/feature-builder 複数ファイルにまたがる機能を設計規約に沿って一気通貫で実装
agents/code-reviewer コミット前に認証・バリデーション・Next.js 16 の落とし穴をレビュー
agents/db-expert Prisma スキーマ変更を担当: 編集 → push → 再生成 → 影響箇所の修正
/new-page サイドバーに組み込まれた保護済みダッシュボードページを scaffold
/add-model 規約とバリデーション込みで Prisma モデルを追加
/preflight lint + 型チェック + ビルドを実行して出荷前レポート

Claude Code でリポジトリを開いて、 /new-page projects — ユーザーのプロジェクト一覧と作成フォーム を試してみて ください。

プロジェクト構成

app/
  (auth)/                  ログイン・サインアップページ + Server Actions
  api/auth/[...nextauth]/  Auth.js ルートハンドラ
  dashboard/               保護されたアプリシェル: 概要、設定
  page.tsx                 ランディングページ(ヒーロー、機能、FAQ)
components/                landing、auth、dashboard、ui プリミティブ
lib/                       auth.ts、prisma.ts、site.ts、validations.ts、utils.ts
prisma/schema.prisma       User / Account / Session / VerificationToken
proxy.ts                   /dashboard の Cookie チェック(正式な検証は layout 側)
.claude/                   CLAUDE.md と対になる agents、commands、settings

本番運用へ

スタックは既に Postgres。経路は2つ:

  • Docker でどこへでも — standalone イメージをビルドし、マネージド Postgres に対して起動。まずローカルで本番ビルドを検証:

    docker compose -f docker-compose.prod.yml up --build

    スキーマ適用の後、スリムな standalone イメージが http://localhost:3000 で起動。 DATABASE_URL を本番 DB に向ければ、同じイメージを Fly.io / Railway / Cloud Run / VPS へデプロイできます。

  • Vercel — そのまま動作。DATABASE_URL(マネージド Postgres)と下記の環境 変数を設定するだけ。

    Deploy with Vercel

その上で:

  1. AUTH_SECRETNEXT_PUBLIC_APP_URLDATABASE_URL、(必要なら)Google OAuth の環境変数を設定。
  2. Google OAuth クライアントのリダイレクト URI に本番ドメインを追加。
  3. 正式なマイグレーション履歴が欲しい場合は、既定の db push に代えて prisma migrate(ローカルは migrate dev、コンテナは migrate deploy)を採用。

既知の制限(意図的なスコープ)

  • メール認証・パスワードリセットなし(メールプロバイダが必要 — Resend / Postmark の導入が自然な次の一歩)。
  • テストは lib/ ロジック(Vitest)と公開ページのスモーク(Playwright)をカバー。 DB を伴うサインアップ → ダッシュボードの e2e フローはまだ未整備。
  • ダッシュボード概要の統計はプレースホルダー。

ライセンス

MIT © 2026 skipbit

About

AI-first SaaS boilerplate — Next.js 16 + Auth.js v5 + Prisma (Postgres), with a Claude Code workspace (agents, slash commands, CLAUDE.md). MIT.

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages