Serverless & Edge Architecture for Full-Stack Apps

// app/api/edge-example/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const country = request.geo?.country || 'US';
  const city = request.geo?.city || 'Unknown';
  
  return NextResponse.json({
    message: `Hello from ${city}, ${country}!`,
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION,
  });
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  
  // Process the data at the edge
  const processed = {
    ...body,
    processedAt: new Date().toISOString(),
    region: process.env.VERCEL_REGION,
  };
  
  return NextResponse.json(processed);
}

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country;
  const pathname = request.nextUrl.pathname;
  
  // Redirect based on geography
  if (pathname === '/pricing' && country === 'IN') {
    return NextResponse.redirect(new URL('/pricing/india', request.url));
  }
  
  // Add custom headers
  const response = NextResponse.next();
  response.headers.set('x-user-country', country || 'unknown');
  response.headers.set('x-pathname', pathname);
  
  return response;
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

// lambda/image-processor.ts
import { APIGatewayProxyHandler } from 'aws-lambda';
import AWS from 'aws-sdk';

const s3 = new AWS.S3();

export const handler: APIGatewayProxyHandler = async (event) => {
  try {
    const { bucket, key } = JSON.parse(event.body || '{}');
    
    // Get image from S3
    const image = await s3.getObject({
      Bucket: bucket,
      Key: key,
    }).promise();
    
    // Process image (resize, optimize, etc.)
    const processedImage = await processImage(image.Body);
    
    // Upload processed image
    const result = await s3.putObject({
      Bucket: bucket,
      Key: `processed/${key}`,
      Body: processedImage,
      ContentType: 'image/webp',
    }).promise();
    
    return {
      statusCode: 200,
      body: JSON.stringify({
        message: 'Image processed successfully',
        location: `s3://${bucket}/processed/${key}`,
      }),
    };
  } catch (error) {
    console.error('Error:', error);
    
    return {
      statusCode: 500,
      body: JSON.stringify({
        error: 'Failed to process image',
      }),
    };
  }
};

async function processImage(imageBuffer: any) {
  // Image processing logic here
  // Could use Sharp, Canvas, or other libraries
  return imageBuffer;
}

# template.yaml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31

Resources:
  ImageProcessorFunction:
    Type: AWS::Serverless::Function
    Properties:
      CodeUri: dist/
      Handler: image-processor.handler
      Runtime: nodejs18.x
      Timeout: 30
      MemorySize: 1024
      Environment:
        Variables:
          NODE_ENV: production
      Events:
        ImageUpload:
          Type: Api
          Properties:
            Path: /process-image
            Method: post

// worker.ts
interface Env {
  KV_NAMESPACE: KVNamespace;
  R2_BUCKET: R2Bucket;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const path = url.pathname;
    
    // Handle different routes
    if (path.startsWith('/api/')) {
      return handleAPI(request, env);
    }
    
    if (path.startsWith('/cache/')) {
      return handleCache(request, env);
    }
    
    return new Response('Hello from Cloudflare Workers!', {
      headers: { 'Content-Type': 'text/plain' },
    });
  },
};

async function handleAPI(request: Request, env: Env): Promise<Response> {
  const url = new URL(request.url);
  const endpoint = url.pathname.replace('/api/', '');
  
  switch (endpoint) {
    case 'user':
      return handleUser(request, env);
    case 'analytics':
      return handleAnalytics(request, env);
    default:
      return new Response('API endpoint not found', { status: 404 });
  }
}

async function handleUser(request: Request, env: Env): Promise<Response> {
  if (request.method === 'GET') {
    const userId = new URL(request.url).searchParams.get('id');
    const user = await env.KV_NAMESPACE.get(`user:${userId}`);
    
    if (!user) {
      return new Response('User not found', { status: 404 });
    }
    
    return new Response(user, {
      headers: { 'Content-Type': 'application/json' },
    });
  }
  
  if (request.method === 'POST') {
    const userData = await request.json();
    const userId = crypto.randomUUID();
    
    await env.KV_NAMESPACE.put(
      `user:${userId}`,
      JSON.stringify({ ...userData, id: userId })
    );
    
    return new Response(JSON.stringify({ id: userId }), {
      headers: { 'Content-Type': 'application/json' },
    });
  }
  
  return new Response('Method not allowed', { status: 405 });
}

async function handleCache(request: Request, env: Env): Promise<Response> {
  const cache = caches.default;
  const cacheKey = new Request(request.url, request);
  
  // Check cache first
  let response = await cache.match(cacheKey);
  
  if (!response) {
    // Generate response
    response = new Response(JSON.stringify({
      timestamp: new Date().toISOString(),
      cached: false,
    }), {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'max-age=300', // 5 minutes
      },
    });
    
    // Store in cache
    await cache.put(cacheKey, response.clone());
  }
  
  return response;
}

// Vercel: api/process-queue.ts
import { NextRequest, NextResponse } from 'next/server';
import { Queue } from 'bullmq';
import Redis from 'ioredis';

const redis = new Redis(process.env.REDIS_URL!);
const emailQueue = new Queue('email', { connection: redis });

export async function POST(request: NextRequest) {
  const { email, template, data } = await request.json();
  
  // Add job to queue
  await emailQueue.add('send-email', {
    to: email,
    template,
    data,
  }, {
    delay: 1000, // 1 second delay
    attempts: 3,
    backoff: {
      type: 'exponential',
      delay: 2000,
    },
  });
  
  return NextResponse.json({ success: true });
}

// Worker process (separate deployment)
export async function processEmailQueue() {
  const worker = new Worker('email', async (job) => {
    const { to, template, data } = job.data;
    
    // Send email using your preferred service
    await sendEmail(to, template, data);
    
    return { sent: true, timestamp: new Date().toISOString() };
  }, { connection: redis });
  
  worker.on('completed', (job) => {
    console.log(`Email sent: ${job.id}`);
  });
  
  worker.on('failed', (job, err) => {
    console.error(`Email failed: ${job.id}`, err);
  });
}

// api/webhooks/stripe.ts
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';

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

export async function POST(request: NextRequest) {
  const body = await request.text();
  const signature = request.headers.get('stripe-signature')!;
  
  let event: Stripe.Event;
  
  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (error) {
    console.error('Webhook signature verification failed:', error);
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
  }
  
  // Process different event types
  switch (event.type) {
    case 'payment_intent.succeeded':
      await handlePaymentSuccess(event.data.object as Stripe.PaymentIntent);
      break;
      
    case 'customer.subscription.created':
      await handleSubscriptionCreated(event.data.object as Stripe.Subscription);
      break;
      
    case 'invoice.payment_failed':
      await handlePaymentFailed(event.data.object as Stripe.Invoice);
      break;
      
    default:
      console.log(`Unhandled event type: ${event.type}`);
  }
  
  return NextResponse.json({ received: true });
}

async function handlePaymentSuccess(paymentIntent: Stripe.PaymentIntent) {
  // Update database, send confirmation email, etc.
  console.log(`Payment succeeded: ${paymentIntent.id}`);
}

async function handleSubscriptionCreated(subscription: Stripe.Subscription) {
  // Provision access, send welcome email, etc.
  console.log(`Subscription created: ${subscription.id}`);
}

async function handlePaymentFailed(invoice: Stripe.Invoice) {
  // Send dunning email, update account status, etc.
  console.log(`Payment failed: ${invoice.id}`);
}

// lib/db-strategies.ts

// 1. Vercel Postgres (Neon)
import { sql } from '@vercel/postgres';

export async function getUsersWithVercelPostgres() {
  try {
    const result = await sql`
      SELECT id, name, email, created_at 
      FROM users 
      ORDER BY created_at DESC 
      LIMIT 10
    `;
    return result.rows;
  } catch (error) {
    console.error('Database error:', error);
    throw error;
  }
}

// 2. PlanetScale (Serverless MySQL)
import mysql from 'mysql2/promise';

const planetscale = mysql.createConnection({
  host: process.env.DATABASE_HOST,
  username: process.env.DATABASE_USERNAME,
  password: process.env.DATABASE_PASSWORD,
  ssl: {
    rejectUnauthorized: false,
  },
});

export async function getUsersWithPlanetScale() {
  const [rows] = await planetscale.execute(
    'SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 10'
  );
  return rows;
}

// 3. Supabase (Serverless Postgres)
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

export async function getUsersWithSupabase() {
  const { data, error } = await supabase
    .from('users')
    .select('id, name, email, created_at')
    .order('created_at', { ascending: false })
    .limit(10);
    
  if (error) throw error;
  return data;
}

// 4. DynamoDB (NoSQL)
import { DynamoDBClient } from '@aws-sdk/client-dynamodb';
import { DynamoDBDocumentClient, ScanCommand } from '@aws-sdk/lib-dynamodb';

const client = new DynamoDBClient({ region: 'us-east-1' });
const docClient = DynamoDBDocumentClient.from(client);

export async function getUsersWithDynamoDB() {
  const command = new ScanCommand({
    TableName: 'users',
    Limit: 10,
  });
  
  const response = await docClient.send(command);
  return response.Items;
}

// lib/db-pool.ts
import { Pool } from 'pg';

// Create connection pool (outside handler for reuse)
const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  max: 1, // Serverless: keep connections low
  idleTimeoutMillis: 1000,
  connectionTimeoutMillis: 1000,
});

export async function query(text: string, params?: any[]) {
  const start = Date.now();
  
  try {
    const result = await pool.query(text, params);
    const duration = Date.now() - start;
    
    console.log('Query executed', { text, duration, rows: result.rowCount });
    return result;
  } catch (error) {
    console.error('Query error', { text, error });
    throw error;
  }
}

// Graceful shutdown
process.on('SIGINT', () => {
  pool.end(() => {
    console.log('Database pool closed');
    process.exit(0);
  });
});

// Architecture example
const services = {
  // Edge: Global, low-latency
  auth: 'edge-function',           // User auth, sessions
  cdn: 'edge-function',            // Asset delivery, caching
  
  // Serverless: Scalable, event-driven  
  api: 'serverless-function',      // REST API, CRUD operations
  webhooks: 'serverless-function', // Payment processing, integrations
  jobs: 'serverless-function',     // Background jobs, email sending
  
  // Traditional: Long-running, stateful
  database: 'traditional-server', // Primary database
  analytics: 'traditional-server', // Data processing, reporting
  websocket: 'traditional-server', // Real-time connections
};

// middleware.ts - Route requests to appropriate services
import { NextRequest, NextResponse } from 'next/server';

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  
  // Edge-handled routes
  if (pathname.startsWith('/auth/') || pathname.startsWith('/cdn/')) {
    return NextResponse.next(); // Handle at edge
  }
  
  // Serverless API routes  
  if (pathname.startsWith('/api/')) {
    // Add correlation ID for tracing
    request.headers.set('x-correlation-id', crypto.randomUUID());
    return NextResponse.next();
  }
  
  // WebSocket connections - redirect to traditional server
  if (pathname.startsWith('/ws/')) {
    return NextResponse.redirect(
      new URL(pathname, process.env.WEBSOCKET_SERVER_URL)
    );
  }
  
  return NextResponse.next();
}

// vercel.json - Function configuration
{
  "functions": {
    "app/api/quick-operations/route.ts": {
      "memory": 256,
      "maxDuration": 10
    },
    "app/api/heavy-processing/route.ts": {
      "memory": 1024,
      "maxDuration": 60
    },
    "app/api/background-jobs/route.ts": {
      "memory": 512,
      "maxDuration": 300
    }
  }
}

// lib/warm-up.ts
let isWarm = false;

export function markWarm() {
  isWarm = true;
}

export function checkWarm(): boolean {
  return isWarm;
}

// Usage in API routes
export async function GET(request: NextRequest) {
  if (!checkWarm()) {
    // First request - do minimal setup
    markWarm();
    console.log('Cold start detected');
  }
  
  // Your handler logic
  return NextResponse.json({ warm: checkWarm() });
}

// lib/monitoring.ts
import { trace, context, SpanStatusCode } from '@opentelemetry/api';

const tracer = trace.getTracer('my-serverless-app');

export async function withTracing<T>(
  name: string,
  fn: () => Promise<T>
): Promise<T> {
  const span = tracer.startSpan(name);
  
  try {
    const result = await fn();
    span.setStatus({ code: SpanStatusCode.OK });
    return result;
  } catch (error) {
    span.setStatus({
      code: SpanStatusCode.ERROR,
      message: error instanceof Error ? error.message : 'Unknown error',
    });
    throw error;
  } finally {
    span.end();
  }
}

// Usage
export async function processOrder(orderId: string) {
  return withTracing('process-order', async () => {
    const order = await withTracing('fetch-order', () => 
      fetchOrderFromDB(orderId)
    );
    
    const result = await withTracing('payment-processing', () => 
      processPayment(order)
    );
    
    await withTracing('send-confirmation', () => 
      sendConfirmationEmail(order.email)
    );
    
    return result;
  });
}