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）也可以参考。