7天打造你的第一个AI Micro SaaS：零基础完整教程

<!-- 30 分钟 Carrd 落地页骨架 -->
<section>
  <h1>面向 Shopify 的 AI 元描述生成器</h1>
  <p>30 秒内生成 SEO 优化的元描述。<br>成为首批 50 位用户。</p>
  <a href="#" class="button">预购 — $50 终身</a>
</section>

前端: Next.js 15 + React 19 + Tailwind CSS 4
后端: Next.js API Routes（或独立 FastAPI）
数据库: Supabase（Postgres）或 Neon（Serverless Postgres）
认证: Clerk（或 NextAuth.js）
支付: Stripe（Checkout + Webhooks）
AI API: OpenRouter（单 Key 调用 Claude、GPT、DeepSeek）
托管: Vercel（前端）+ Railway/Render（后端）
域名: Namecheap 或 Porkbun（$10-15/年）

# 1. 创建 Next.js 项目
npx create-next-app@latest ai-saas-mvp --typescript --tailwind --app
cd ai-saas-mvp

# 2. 安装核心依赖
npm install @clerk/nextjs openai stripe @supabase/supabase-js
npm install -D @types/node

# 3. 初始化 Supabase（先在 supabase.com 创建项目）
npx supabase init
npx supabase link --project-ref your-project-ref

# 4. 配置环境变量 (.env.local)

# CLERK 密钥、OpenRouter Key、Stripe 密钥、Supabase URL 和 Service Role Key

我需要一个 /api/generate-meta-description 路由，要求：
1. 接收 POST { product_name, product_description, target_keyword }
2. 调用 OpenRouter（Claude Haiku）处理
3. 返回 { meta_description, seo_title, character_count }
4. 将每次生成记录保存到 Supabase，关联当前认证用户

// app/api/generate-meta-description/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';
import OpenAI from 'openai';
import { createClient } from '@supabase/supabase-js';

const client = new OpenAI({
  baseURL: 'https://openrouter.ai/api/v1',
  apiKey: process.env.OPENROUTER_API_KEY!,
  defaultHeaders: {
    'HTTP-Referer': process.env.NEXT_PUBLIC_APP_URL!,
  },
});

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);

export async function POST(req: NextRequest) {
  const { userId } = await auth();
  if (!userId) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const { product_name, product_description, target_keyword } = await req.json();

  const prompt = `生成一条 SEO 优化的元描述：
产品：${product_name}
描述：${product_description}
目标关键词：${target_keyword}

规则：
- 150-160 字符
- 自然融入关键词
- 突出用户利益
- 结尾加软性行动号召

以 JSON 格式返回：{ "meta_description": "...", "seo_title": "..." }`;

  const completion = await client.chat.completions.create({
    model: 'anthropic/claude-3.5-haiku',
    messages: [{ role: 'user', content: prompt }],
    response_format: { type: 'json_object' },
    temperature: 0.3,
  });

  const result = JSON.parse(completion.choices[0].message.content!);

  // 持久化到数据库
  await supabase.from('generations').insert({
    user_id: userId,
    product_name,
    target_keyword,
    meta_description: result.meta_description,
    created_at: new Date().toISOString(),
  });

  return NextResponse.json({
    meta_description: result.meta_description,
    seo_title: result.seo_title,
    character_count: result.meta_description.length,
  });
}

创建一个 /dashboard 页面，包含：
1. 表单（产品名称、描述、关键词输入框）
2. 「生成」按钮，调用 /api/generate-meta-description
3. 在卡片中展示结果，带复制到剪贴板按钮
4. 生成过程中显示骨架屏加载动画
5. 历史记录区域展示 Supabase 中的过往生成

> 我在 DashboardPage 第 42 行看到
> "TypeError: Cannot read properties of undefined (reading 'map')"
> [粘贴堆栈信息]

// app/api/create-checkout-session/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(req: NextRequest) {
  const { userId } = await auth();
  if (!userId) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

  const session = await stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: process.env.STRIPE_PRICE_ID!, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing?canceled=true`,
    client_reference_id: userId,
    metadata: { userId },
  });

  return NextResponse.redirect(session.url!, 303);
}

// app/api/webhooks/stripe/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';
import { createClient } from '@supabase/supabase-js';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
);

export async function POST(req: NextRequest) {
  const body = await req.text();
  const sig = req.headers.get('stripe-signature')!;

  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
  } catch (err) {
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
  }

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object as Stripe.Checkout.Session;
    if (session.metadata?.userId) {
      await supabase.from('subscriptions').upsert({
        user_id: session.metadata.userId,
        stripe_customer_id: session.customer as string,
        plan: 'pro', status: 'active',
        current_period_end: new Date(Date.now() + 30*24*60*60*1000).toISOString(),
      });
    }
  }

  if (event.type === 'customer.subscription.deleted') {
    const sub = event.data.object as Stripe.Subscription;
    await supabase.from('subscriptions').update({ status: 'canceled' })
      .eq('stripe_customer_id', sub.customer as string);
  }

  return NextResponse.json({ received: true });
}

- [ ] API 错误返回用户友好提示（UI 绝不展示原始 JSON）
- [ ] AI 端点频率限制（如每用户 10 次/分钟）
- [ ] 新用户空状态有引导设计
- [ ] 超过 500ms 的操作使用骨架屏
- [ ] 移动端适配（375px 视口，iPhone SE）
- [ ] 前后端双重表单校验
- [ ] 隐私政策和用户协议页面
- [ ] Favicon 和 OpenGraph 社交分享标签