Claude Code के साथ SaaS

SaaSボイラープレートको Claude Code सेबनाना

SaaSアプリを新しく始めるたびに、authentication・課金・dashboard・メール送信といった共通featuresをゼロ सेimplement करनाのは非効率 है।Claude Code का उपयोग करके、再利用possibleなSaaSボイラープレート buildし、Projectごとにcustomizeする से ही済み है।

ボイラープレートの構成

> Next.js App RouterでSaaSボイラープレートを作って。
> authentication（NextAuth.js）、Stripe課金、dashboard、
> チームmanagement、メール送信（Resend）を含めて。
> Prisma + PostgreSQLでdatabaseをmanagementして。

Project構造

src/
├── app/
│   ├── (auth)/         # logイン・サインアップ
│   ├── (dashboard)/    # authentication済みuser画面
│   ├── (marketing)/    # LP・料金page
│   └── api/
│       ├── auth/       # NextAuth.js
│       ├── billing/    # Stripe Webhook
│       └── teams/      # チームmanagementAPI
├── components/
│   ├── ui/             # 汎用UIcomponent
│   └── features/       # features固有component
├── lib/
│   ├── auth.ts         # authenticationsettings
│   ├── prisma.ts       # DB接続
│   ├── stripe.ts       # Stripesettings
│   └── email.ts        # メール送信
└── types/

authenticationのsettings

// 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',
  },
});

チームmanagementAPI

// 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: 'authenticationがज़रूरीです' }, { 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: 'authenticationがज़रूरीです' }, { 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);
}

environment variablestemplate

# .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も同時にgenerateさせる बातで、チームメンバーが環境buildで迷う बातを防げ है।

関連記事

authenticationのimplementationpatternはauthenticationfeaturesのimplementation、StripeintegrationはStripe決済のintegrationमें विस्तार सेबताया गया है。Prismaのutilization方法के बारे मेंはPrisma ORMutilizationガイドもदेखें。

Next.jsのofficial documentation（nextjs.org/docs）भी reference के लिए देखें。