SaaS with Claude Code

SaaSボイラープレートをClaude Codeで作る

SaaSアプリを新しく始めるたびに、認証・課金・ダッシュボード・メール送信といった共通機能をゼロから実装するのは非効率です。Claude Codeを使えば、再利用可能なSaaSボイラープレートを構築し、プロジェクトごとにカスタマイズするだけで済みます。

ボイラープレートの構成

> Next.js App RouterでSaaSボイラープレートを作って。
> 認証（NextAuth.js）、Stripe課金、ダッシュボード、
> チーム管理、メール送信（Resend）を含めて。
> Prisma + PostgreSQLでデータベースを管理して。

プロジェクト構造

src/
├── app/
│   ├── (auth)/         # ログイン・サインアップ
│   ├── (dashboard)/    # 認証済みユーザー画面
│   ├── (marketing)/    # LP・料金ページ
│   └── api/
│       ├── auth/       # NextAuth.js
│       ├── billing/    # Stripe Webhook
│       └── teams/      # チーム管理API
├── components/
│   ├── ui/             # 汎用UIコンポーネント
│   └── features/       # 機能固有コンポーネント
├── lib/
│   ├── auth.ts         # 認証設定
│   ├── prisma.ts       # DB接続
│   ├── stripe.ts       # Stripe設定
│   └── email.ts        # メール送信
└── types/

認証の設定

// src/lib/auth.ts
import NextAuth from 'next-auth';
import Google from 'next-auth/providers/google';
import GitHub from 'next-auth/providers/github';
import Credentials from 'next-auth/providers/credentials';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from './prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    Google({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    GitHub({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, user }) {
      session.user.id = user.id;
      // チーム情報をセッションに含める
      const membership = await prisma.teamMember.findFirst({
        where: { userId: user.id },
        include: { team: true },
      });
      if (membership) {
        session.user.teamId = membership.team.id;
        session.user.role = membership.role;
      }
      return session;
    },
  },
  pages: {
    signIn: '/login',
    error: '/login?error=true',
  },
});

チーム管理API

// src/app/api/teams/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { auth } from '@/lib/auth';
import { prisma } from '@/lib/prisma';

export async function POST(request: NextRequest) {
  const session = await auth();
  if (!session?.user) {
    return NextResponse.json({ error: '認証が必要です' }, { status: 401 });
  }

  const { name } = await request.json();

  const team = await prisma.team.create({
    data: {
      name,
      members: {
        create: {
          userId: session.user.id,
          role: 'owner',
        },
      },
    },
  });

  return NextResponse.json(team, { status: 201 });
}

// チームメンバー招待
export async function PATCH(request: NextRequest) {
  const session = await auth();
  if (!session?.user) {
    return NextResponse.json({ error: '認証が必要です' }, { status: 401 });
  }

  const { email, teamId, role } = await request.json();

  // 招待メールを送信
  await sendInviteEmail(email, teamId);

  const invite = await prisma.teamInvite.create({
    data: { email, teamId, role, invitedBy: session.user.id },
  });

  return NextResponse.json(invite);
}

環境変数テンプレート

# .env.example
DATABASE_URL="postgresql://..."
NEXTAUTH_SECRET="your-secret"
NEXTAUTH_URL="http://localhost:3000"
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""
STRIPE_SECRET_KEY=""
STRIPE_WEBHOOK_SECRET=""
RESEND_API_KEY=""

Claude Codeに.env.exampleも同時に生成させることで、チームメンバーが環境構築で迷うことを防げます。

Verwandte Artikel

認証の実装パターンは認証機能の実装、Stripe連携はStripe決済の統合で詳しく解説しています。Prismaの活用方法についてはPrisma ORM活用ガイドもご覧ください。

Next.jsの公式ドキュメント（nextjs.org/docs）も参考にしてください。