SaaS dengan Claude Code

SaaSボイラープレート dengan Claude Code: 作る

SaaSaplikasi 新しく始めるたび 、認証・課金・dashboard・メールpengiriman dan いった共通機能 ゼロ dari implementasi 非効率.Claude Code 使えば、再pemanfaatandimungkinkanなSaaSボイラープレート pembangunanし、proyekご dan カスタマイズ だけ 済み.

構成 ボイラープレート

> Next.js App Router dengan SaaSボイラープレート buatkan.
> 認証（NextAuth.js）、Stripe課金、dashboard、
> チームmanajemen、メールpengiriman（Resend） 含めて。
> Prisma + PostgreSQL dengan database manajemenして。

proyekstruktur

src/
├── app/
│ ├── (auth)/ # login・sign up
│ ├── (dashboard)/ # 認証済みpengguna画面
│ ├── (marketing)/ # LP・料金halaman
│ └── api/
│ ├── auth/ # NextAuth.js
│ ├── billing/ # Stripe Webhook
│ └── teams/ # チームmanajemenAPI
├── components/
│ ├── ui/ # 汎用UIkomponen
│ └── features/ # 機能固有komponen
├── lib/
│ ├── auth.ts # 認証pengaturan
│ ├── prisma.ts # DBkoneksi
│ ├── stripe.ts # Stripepengaturan
│ └── email.ts # メールpengiriman
└── types/

pengaturan 認証

// 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;
      // チーム情報 session 含める
      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',
  },
});

チームmanajemenAPI

// 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: '認証 diperlukan す' }, { 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: '認証 diperlukan す' }, { status: 401 });
  }

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

  // 招待メール pengiriman
  await sendInviteEmail(email, teamId);

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

  return NextResponse.json(invite);
}

environment variabletemplate

# .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 juga 同時 generateさせるこ dan 、チームメンバー 環境pembangunan 迷うこ dan 防げ.

Artikel Terkait

認証 implementasipola 認証機能 implementasi、Stripeintegrasi Stripe決済 integrasi dijelaskan secara detail.Prisma pemanfaatanmetode mengenai Prisma ORMpemanfaatanpanduan juga ご覧.

Next.js 公式dokumen（nextjs.org/docs） juga bisa dijadikan referensi.