Arquitectura de un SaaS escalable con Next.js, IA ¿Cuál usar y por qué?

// package.json (lo importante)
{
  "dependencies": {
    "next": "14.2.0",
    "react": "^18",
    "typescript": "^5",
    "@prisma/client": "^5.0.0",
    "@clerk/nextjs": "^4.29.0",          // Auth
    "@vercel/analytics": "^1.1.0",       // Analytics
    "@vercel/speed-insights": "^1.0.0",  // Performance
    "ai": "^3.0.0",                      // Vercel AI SDK
    "@upstash/redis": "^1.28.0",         // Rate limiting
    "stripe": "^14.0.0",                 // Pagos
    "resend": "^3.0.0"                   // Emails
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "prisma": "^5.0.0",
    "tailwindcss": "^3.4.0"
  }
}

// prisma/schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}
 
generator client {
  provider = "prisma-client-js"
}
 
model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  clerkId       String    @unique
  
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt
  
  subscription  Subscription?
  projects      Project[]
  apiKeys       ApiKey[]
  usage         Usage[]
}
 
model Subscription {
  id                String   @id @default(cuid())
  userId            String   @unique
  user              User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  
  stripeCustomerId       String   @unique
  stripeSubscriptionId   String?  @unique
  stripePriceId          String?
  stripeCurrentPeriodEnd DateTime?
  
  plan              String   @default("free") // free, pro, enterprise
  status            String   @default("active") // active, canceled, past_due
  
  createdAt         DateTime @default(now())
  updatedAt         DateTime @updatedAt
}
 
model Project {
  id          String   @id @default(cuid())
  name        String
  slug        String   @unique
  userId      String
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  
  settings    Json?
  
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
  
  aiRequests  AiRequest[]
}
 
model AiRequest {
  id          String   @id @default(cuid())
  projectId   String
  project     Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
  
  prompt      String
  response    String
  model       String
  tokens      Int
  cost        Float
  
  createdAt   DateTime @default(now())
}
 
model Usage {
  id          String   @id @default(cuid())
  userId      String
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  
  date        DateTime @default(now())
  requests    Int      @default(0)
  tokensUsed  Int      @default(0)
  cost        Float    @default(0)
  
  @@unique([userId, date])
}
 
model ApiKey {
  id          String   @id @default(cuid())
  userId      String
  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)
  
  name        String
  key         String   @unique
  lastUsedAt  DateTime?
  
  createdAt   DateTime @default(now())
  
  @@index([key])
}

// src/lib/auth.ts
import { auth, currentUser } from '@clerk/nextjs/server'
import { db } from './db'
 
export async function getCurrentUser() {
  const { userId } = auth()
  
  if (!userId) return null
  
  const user = await currentUser()
  
  if (!user) return null
  
  // Sincronizar con tu DB
  const dbUser = await db.user.upsert({
    where: { clerkId: userId },
    update: {
      email: user.emailAddresses[0].emailAddress,
      name: user.firstName + ' ' + user.lastName,
    },
    create: {
      clerkId: userId,
      email: user.emailAddresses[0].emailAddress,
      name: user.firstName + ' ' + user.lastName,
    },
  })
  
  return dbUser
}
 
export async function requireAuth() {
  const user = await getCurrentUser()
  
  if (!user) {
    throw new Error('Unauthorized')
  }
  
  return user
}
 
// Uso en Server Components
export default async function DashboardPage() {
  const user = await requireAuth()
  
  return <div>Welcome {user.name}</div>
}
 
// Uso en API Routes
export async function POST(req: Request) {
  const user = await requireAuth()
  
  // Tu lógica aquí
}

// src/lib/stripe.ts
import Stripe from 'stripe'
 
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-11-20.acacia',
  typescript: true,
})
 
export const plans = {
  free: {
    name: 'Free',
    price: 0,
    limits: {
      requests: 10,
      projects: 1,
    }
  },
  pro: {
    name: 'Pro',
    price: 29,
    priceId: process.env.STRIPE_PRO_PRICE_ID!,
    limits: {
      requests: 1000,
      projects: 10,
    }
  },
  enterprise: {
    name: 'Enterprise',
    price: 99,
    priceId: process.env.STRIPE_ENTERPRISE_PRICE_ID!,
    limits: {
      requests: 10000,
      projects: -1, // unlimited
    }
  }
}
 
// Crear checkout session
export async function createCheckoutSession(
  userId: string,
  priceId: string,
  customerId?: string
) {
  const session = await stripe.checkout.sessions.create({
    customer: customerId,
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    mode: 'subscription',
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing?canceled=true`,
    metadata: {
      userId,
    },
  })
  
  return session
}
 
// Crear portal session (para cancelar subscripción)
export async function createPortalSession(customerId: string) {
  const session = await stripe.billingPortal.sessions.create({
    customer: customerId,
    return_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard/settings`,
  })
  
  return session
}

// src/lib/analytics.ts
import { track } from '@vercel/analytics'
 
export function trackEvent(name: string, properties?: Record<string, any>) {
  track(name, properties)
}
 
// Wrapper para eventos importantes
export const analytics = {
  signup: (userId: string) => {
    trackEvent('user_signup', { userId })
  },
  
  subscription: (userId: string, plan: string) => {
    trackEvent('subscription_created', { userId, plan })
  },
  
  aiRequest: (userId: string, model: string, tokens: number) => {
    trackEvent('ai_request', { userId, model, tokens })
  },
  
  error: (error: Error, context?: Record<string, any>) => {
    console.error(error)
    trackEvent('error', { 
      message: error.message,
      stack: error.stack,
      ...context 
    })
  }
}

# Instala Vercel CLI
npm i -g vercel
 
# Deploy
vercel --prod
 
# Variables de entorno
vercel env add DATABASE_URL production
vercel env add STRIPE_SECRET_KEY production
# etc...

# Dockerfile
FROM node:20-alpine AS base
 
FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci
 
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
 
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
 
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
 
EXPOSE 3000
CMD ["node", "server.js"]

// El stack que realmente uso en producción
const productionStack = {
  // Frontend
  framework: 'Next.js 14 (App Router)',
  styling: 'Tailwind + shadcn/ui',
  state: 'React Server Components + Zustand (client)',
  
  // Backend
  api: 'Next.js API Routes + tRPC',
  database: 'Neon PostgreSQL',
  orm: 'Prisma',
  cache: 'Upstash Redis',
  
  // Features
  auth: 'Clerk',
  payments: 'Stripe',
  emails: 'Resend',
  ai: 'Vercel AI SDK + Claude/GPT-4',
  
  // Infra
  hosting: 'Vercel',
  monitoring: 'Vercel Analytics + Speed Insights',
  errors: 'Sentry',
  
  // Total cost: ~$100-200/mes dependiendo del tráfico
}