Migrate Bolt.new to Production Next.js

You built something real in Bolt.new. The AI agent scaffolded your Next.js app, wired up Supabase, dropped in TailwindCSS components, and gave you a working preview in minutes. That's genuinely impressive.

But here's the thing: what runs in StackBlitz WebContainers and what survives real users at scale are two very different applications. Bolt.new is a prototyping tool — a brilliant one — but the code it generates has loose TypeScript types, no test coverage, no error boundaries, hardcoded values where environment variables should be, and architectural decisions optimized for speed-of-generation rather than speed-of-execution.

We take Bolt.new exports and turn them into production-grade Next.js applications. Real TypeScript. Real architecture. Real deployment infrastructure.

Why Bolt.new Prototypes Break in Production

Loose TypeScript and Missing Type Safety

Bolt's AI generates TypeScript that compiles, but it leans heavily on any types, loose inference, and missing interface definitions. The moment you need to refactor a data model or onboard another developer, you're fighting the codebase instead of building features. We've audited dozens of Bolt exports — roughly 45% fail initial production type checks under strict mode.

No Error Handling or Edge Cases

AI-generated code follows the happy path. There's no retry logic on API calls, no graceful degradation when Supabase is unreachable, no loading states that account for slow 3G connections. In a prototype demo, this is invisible. In production with real users, it's a support ticket avalanche.

Flat Architecture That Doesn't Scale

Bolt dumps components, API routes, and utilities into a structure that works fine for a solo prototype. There's no separation of concerns, no shared type layer, no service abstraction. Adding a feature means touching six files that shouldn't know about each other.

No Testing Infrastructure

Bolt.new has zero native testing support. No unit tests, no integration tests, no E2E coverage. You're deploying blind. For a demo, that's fine. For a product handling payments or user data, it's negligent.

Security Gaps

Hardcoded API keys in client components. Missing CORS configuration. No rate limiting on API routes. Prisma queries without input sanitization. These aren't hypothetical — they're patterns we see in every Bolt export we audit.

What Production Next.js Actually Looks Like

Strict TypeScript Throughout

Every API response gets a typed interface. Every component prop is explicitly defined. We enable strict: true in tsconfig and eliminate every any. Bugs surface at compile time instead of in your users' browsers — which is exactly where you want to find them.

App Router Architecture Done Right

Next.js 15's App Router with Turbopack gives you up to 700% faster cold starts in development and optimized server-side rendering in production. We structure your app with proper route groups, parallel routes where they make sense, and Server Components by default — Client Components only where interactivity demands it.

// Production route handler with proper error handling
import { NextRequest, NextResponse } from 'next/server';
import { z } from 'zod';
import { prisma } from '@/lib/db';

const EventSchema = z.object({
  type: z.string(),
  payload: z.record(z.unknown()),
});

export async function POST(req: NextRequest) {
  try {
    const body = EventSchema.parse(await req.json());
    const result = await prisma.event.create({ data: body });
    return NextResponse.json({ id: result.id }, { status: 201 });
  } catch (error) {
    if (error instanceof z.ZodError) {
      return NextResponse.json({ error: 'Invalid payload' }, { status: 400 });
    }
    return NextResponse.json({ error: 'Internal error' }, { status: 500 });
  }
}

That's the difference between prototype code and production code. Input validation. Error boundaries. Proper HTTP status codes. Type-safe database operations.

Edge-Optimized Deployment

We deploy to Vercel's Edge Network or Cloudflare, giving you sub-300ms TTFB globally. Your Bolt prototype running in WebContainers had artificial latency hiding behind localhost. Production means CDN-cached static assets, ISR for dynamic content, and streaming SSR for personalized pages.

Proper Environment and Secret Management

Every secret moves to environment variables with runtime validation. We set up separate .env.local, .env.staging, and .env.production configurations. No more NEXT_PUBLIC_ prefixed secrets leaking to the client bundle.

Our Bolt-to-Production Migration Process

Phase 1: Audit and Architecture (Week 1)

We export your Bolt.new project — either via GitHub integration or ZIP download — and run a full audit. Lighthouse scores, TypeScript strict-mode compilation, dependency vulnerability scan, and architectural review. You get a detailed report of what needs to change and why.

Phase 2: Foundation Rebuild (Weeks 2-3)

We restructure the codebase into a scalable architecture:

• src/app/ — Route segments with proper layouts and error boundaries
• src/components/ — Shared UI with Storybook documentation
• src/lib/ — Database clients, auth utilities, API helpers
• src/types/ — Shared TypeScript interfaces and Zod schemas
• src/services/ — Business logic separated from transport layer

We rewrite TypeScript types from scratch, add Zod validation on every API boundary, and implement proper auth middleware using Clerk or NextAuth.

Phase 3: Testing and Hardening (Week 3-4)

Jest for unit tests on business logic. Playwright for E2E flows covering signup, core features, and payment if applicable. We target 80%+ coverage on critical paths. We add Sentry for error monitoring, set up structured logging, and implement rate limiting on public API routes.

Phase 4: Deployment and CI/CD (Week 4)

GitHub Actions pipeline: lint, type-check, test, build, deploy. Preview deployments on every PR. Automatic production deploys on merge to main. We configure your Vercel or Netlify project with proper environment scoping, custom domains, and SSL.

SEO Preservation Strategy

If your Bolt prototype was already indexed (unlikely for most, but it happens), we implement 301 redirects for every URL that changes. We set up proper meta tags using Next.js Metadata API, generate a dynamic sitemap, add structured data markup, and configure canonical URLs. Your new site launches with better Core Web Vitals scores, which directly impacts search rankings.

Timeline and Pricing

A typical Bolt-to-production migration takes 3-5 weeks depending on complexity:

• Simple app (landing page + auth + basic CRUD): 3 weeks, starting at $8,000
• Mid-complexity (multi-role auth, payments, real-time features): 4 weeks, starting at $15,000
• Complex SaaS (multi-tenant, integrations, admin dashboard): 5-6 weeks, starting at $25,000

Every engagement starts with a free migration audit. We'll review your Bolt export and tell you exactly what the production version requires — no commitment needed.

The Bottom Line

Bolt.new is the best prototyping tool available right now. It lets you validate ideas in hours instead of weeks. But the gap between "it works in the demo" and "it works at scale" is where products succeed or fail. We bridge that gap with production-grade Next.js architecture, proper TypeScript, real testing, and deployment infrastructure built for growth.