How I Built a SaaS Boilerplate with Next.js and Edge Workers

I still remember the exact moment my excitement for a new SaaS idea completely evaporated. It was day four of the project. I had the UI mocked out and the database schema designed, but I was stuck configuring Stripe webhooks for the third time that month. Between setting up NextAuth providers, wrestling with CORS on edge functions, and writing the same boilerplate API routes, the fun was gone. I was doing plumbing instead of building a product.

I realized I was spending weeks just getting to the "hello world" of actual business logic. So I decided to build something.

The Plumbing Tax in SaaS Development

Every SaaS application needs a core set of features before it can even test its actual value proposition: authentication, subscription billing, and a fast, responsive frontend. When you build these from scratch every time, you pay a heavy "plumbing tax."

The cost of ignoring this isn't just lost time; it's lost momentum. Context switching between configuring OAuth callback URLs, verifying webhook signatures, and optimizing serverless cold starts kills your creative flow. Worse, when you rush through the boilerplate to get to the "fun part," you often ship with insecure webhook handling, unoptimized API routes, or missing type safety.

I wanted a foundation where the boring stuff was already solved, secure, and type-safe, so I could focus entirely on the unique features of the app.

The Technical Approach

When I started putting together SaaSLaunch, I knew I wanted to use Next.js 14+ with the App Router. It offers a great balance of server components for performance and client components for interactivity. For billing, Stripe is the industry standard, but integrating it correctly requires careful handling of checkout sessions and webhook events. For global performance, I decided to push some of the heavier API tasks to the edge using Cloudflare Workers.

Here is how I structured the Stripe checkout flow using the Next.js App Router. The key here is passing the client_reference_id so we can map the Stripe session back to our internal user when the webhook fires later.

// Next.js API route for Stripe checkout (App Router)
import { NextResponse } from 'next/server';
import Stripe from 'stripe';

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

export async function POST(req: Request) {
  const { priceId, userId } = await req.json();

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

  return NextResponse.json({ url: session.url });
}

This route handles the session creation cleanly. But the real magic happens on the backend when Stripe sends the webhook to update the user's subscription status in the database. By standardizing this flow, I no longer have to guess if my webhook verification logic is secure.

Beyond billing, I wanted to include some built-in utility tools, specifically an SEO checker. Fetching and analyzing external URLs can be slow if your serverless functions are pinned to a single region. To solve this, I offloaded the SEO analysis to a Cloudflare Worker, which runs at the edge.

Here is the edge function that powers the analyzer. It fetches the target HTML with edge caching and uses regex to extract basic SEO metrics without needing a heavy DOM parser in the worker environment.

// Cloudflare Worker for edge SEO analysis
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    if (url.pathname !== '/api/analyze') {
      return new Response('Not found', { status: 404 });
    }

    const targetUrl = url.searchParams.get('url');
    if (!targetUrl) {
      return new Response(JSON.stringify({ error: 'Missing url' }), {
        status: 400,
        headers: { 'Content-Type': 'application/json' },
      });
    }

    // Fetch target page at the edge (low latency worldwide)
    const response = await fetch(targetUrl, {
      cf: { cacheTtl: 300, cacheEverything: true },
    });
    const html = await response.text();

    // Run SEO checks (regex-based, no DOM needed)
    const title = html.match(/<title[^>]*>([^<]*)<\/title>/i)?.[1] || '';
    const desc = html.match(/<meta[^>]*name=["']description["'][^>]*content=["']([^"']*)["']/i)?.[1] || '';
    const h1Count = (html.match(/<h1[ >]/gi) || []).length;

    return new Response(JSON.stringify({ title, desc, h1Count }), {
      headers: { 'Content-Type': 'application/json' },
    });
  },
};

By keeping the parsing regex-based, the worker remains incredibly lightweight and executes in milliseconds, regardless of where the user is making the request from.

Practical Results and Takeaways

Building this out and using it for my own projects has been a massive relief. The TypeScript-first approach was a game-changer. Having full type safety across the NextAuth sessions, Stripe objects, and edge worker responses caught so many edge-case bugs before they ever reached production.

What surprised me the most was how much the one-click deployment to Vercel and Cloudflare Pages streamlined the workflow. Setting up environment variables and routing for edge functions used to take hours of reading documentation; now it's handled out of the box.

If I were to change one thing, it would be my initial approach to the webhook handlers. I originally tried to handle every possible Stripe event type, which bloated the code. I eventually stripped it down to only handle the core subscription lifecycle events (checkout.session.completed, customer.subscription.updated, etc.), which made the logic much easier to reason about and test.

Testing Your Landing Page

If you are working on a SaaS idea and want to make sure your landing page is technically sound before you launch, I extracted the edge logic from the boilerplate into a standalone tool. You can run your URL through the free SEO Checker at saaslaunch.dev/free-tools/seo-checker to instantly check your title tags, meta descriptions, and heading structure from an edge node.

---

Full disclosure: I'm the developer of SaaSLaunch. I built this because I needed it myself.