SaaS: 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も同時に생성させることで、チームメンバーが環境구축で迷うことを防げます。

関連글

인증の구현パターンは인증機能の구현、Stripe연동はStripe決済の통합で詳しく解説しています。Prismaの활용方法에 대해서는Prisma ORM활용가이드도 확인하세요.

Next.js의 공식 문서（nextjs.org/docs）도 참고하세요.