ShipNowKit 项目架构与核心功能详解

shipnow-boilerplate/
├── app/                    # Next.js App Router 应用目录
│   ├── [locale]/          # 国际化路由
│   │   ├── docs/          # 文档页面
│   │   ├── page.tsx       # 首页
│   │   ├── signin/        # 登录页面
│   │   ├── register/      # 注册页面
│   │   ├── payment/       # 支付相关页面
│   │   └── policies/      # 政策页面
│   ├── api/               # API 路由
│   │   ├── auth/          # 认证 API
│   │   ├── payment/       # 支付 API
│   │   └── search/        # 搜索 API
│   ├── _templates/        # 模板系统
│   │   ├── T1/            # 模板 T1
│   │   └── T2/            # 模板 T2
│   └── layout.tsx         # 根布局
├── components/             # React 组件
│   ├── auth/              # 认证组件
│   ├── payment/           # 支付组件
│   ├── ui/                # shadcn/ui 基础组件
│   ├── feature/           # 功能组件
│   ├── header/            # 头部组件
│   ├── footer/            # 底部组件
│   └── hero/              # 英雄区组件
├── config/                # 配置文件
│   ├── site.ts            # 站点配置
│   ├── index.ts           # 主配置
│   ├── languages.ts       # 语言配置
│   └── types.ts           # 类型定义
├── lib/                   # 工具库
│   ├── actions/           # Server Actions
│   ├── payment/           # 支付集成（Stripe/Paddle）
│   ├── auth-client.ts     # 认证客户端
│   ├── logger.ts          # 日志工具
│   └── utils.ts           # 通用工具
├── db/                    # 数据库
│   ├── prisma/            # Prisma 配置
│   ├── services/          # 数据库服务
│   ├── client.ts          # 数据库客户端
│   └── types.ts           # 数据库类型
├── content/               # 内容管理
│   └── docs/              # 文档内容
├── messages/              # 国际化消息
│   ├── en.json            # 英文消息
│   └── zh.json            # 中文消息
├── public/                # 静态资源
├── styles/                # 样式文件
└── providers/             # React 提供者

import { useSession, signIn, signOut } from "@/lib/auth-client";

export function Protected({ children }: { children: React.ReactNode }) {
  const { data, status } = useSession();
  if (status === "loading") return null;
  if (!data) return <button onClick={() => signIn("google")}>登录</button>;
  return <>{children}</>;
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  
  // 关联关系
  sessions      Session[]
  subscriptions Subscription[]
  payments      OneTimePayment[]
}

model Subscription {
  id                String            @id @default(cuid())
  userId            String
  stripeCustomerId  String?
  paddleCustomerId  String?
  status            SubscriptionStatus
  currentPeriodEnd  DateTime?
  
  user User @relation(fields: [userId], references: [id])
}

// 用户服务示例
export async function createUser(data: CreateUserData) {
  return await prisma.user.create({
    data: {
      email: data.email,
      name: data.name,
      // 其他字段
    },
  });
}

// messages/zh.json
{
  "auth": {
    "signin": "登录",
    "signup": "注册",
    "signout": "退出"
  },
  "payment": {
    "subscribe": "订阅",
    "cancel": "取消订阅"
  }
}

npm run template:t1
npm run template:t2

export function SignInButton({ provider }: { provider: string }) {
  const handleSignIn = async () => {
    await signIn(provider);
  };

  return (
    <button onClick={handleSignIn}>
      使用 {provider} 登录
    </button>
  );
}

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { data: session, status } = useSession();

  if (status === "loading") return <div>加载中...</div>;
  if (!session) redirect("/signin");

  return <>{children}</>;
}

import { PriceBtn } from "@/components/price/PriceBtn";

export function Pricing({ plans }: { plans: any[] }) {
  return (
    <div>
      {plans.map((p) => (
        <PriceBtn key={p.id} btnText="订阅" targetPlan={{ isSubscription: true, priceId: p.priceId }} activePlans={[]} />
      ))}
    </div>
  );
}

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
    >
      {theme === "dark" ? <Sun /> : <Moon />}
    </button>
  );
}

// app/api/payment/stripe/webhook/route.ts
export async function POST(request: Request) {
  const body = await request.text();
  const signature = request.headers.get('stripe-signature')!;

  try {
    const event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );

    await handleStripeEvent(event);
    
    return NextResponse.json({ received: true });
  } catch (error) {
    return NextResponse.json({ error: "Webhook 处理失败" }, { status: 400 });
  }
}

# 数据库
DATABASE_URL="sqlite:./dev.db"

# 身份验证
BETTER_AUTH_SECRET="your-secret-key"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# 支付
STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# 邮件
RESEND_API_KEY="re_..."

// config/site.ts
export const siteConfig = {
  name: "ShipNowKit",
  description: "现代化 SaaS 应用程序脚手架",
  url: "https://shipnowkit.com",
  ogImage: "https://shipnowkit.com/og.jpg",
  links: {
    twitter: "https://twitter.com/shipnowkit",
    github: "https://github.com/shipnowkit",
  },
};

{
  "scripts": {
    "db:generate": "prisma generate",
    "db:studio": "prisma studio",
    "db:migrate": "prisma migrate dev",
    "db:use:mysql": "node scripts/switch-database.js mysql",
    "db:use:postgresql": "node scripts/switch-database.js postgresql"
  }
}

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start