Fix: Preview Is Not Supported for This Build in Nuxt - Nuxt Error Fix

What Causes This Error?

This error occurs when you try to run nuxi preview with a build preset that doesn’t support local preview. Some deployment targets (like Cloudflare Workers, Netlify Edge) generate output that can’t be run locally with the standard preview command.

The Problem

# After building for a serverless/edge platform
npx nuxi build

# Trying to preview
npx nuxi preview
# Error: Preview is not supported for this build

Common Presets Without Local Preview

cloudflare-pages
cloudflare-workers
netlify-edge
vercel-edge
deno-deploy
bun

The Fix

Option 1: Use Platform’s Local Dev Tools

Cloudflare Pages

# Install wrangler
npm install -D wrangler

# Build and preview
npx nuxi build
npx wrangler pages dev .output/public

Cloudflare Workers

npx nuxi build
npx wrangler dev .output/server/index.mjs

Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Build and preview
npx nuxi build
netlify dev

Vercel

# Install Vercel CLI
npm install -g vercel

# Build and preview
npx nuxi build
vercel dev

Option 2: Build for Node.js Preview

# Build with node-server preset for preview
NITRO_PRESET=node-server npx nuxi build

# Now preview works
npx nuxi preview

Option 3: Configure Different Presets

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    // Production preset
    preset: process.env.NITRO_PRESET || 'cloudflare-pages'
  }
})

Then:

# For local preview
npx nuxi build  # Uses default or node preset
npx nuxi preview

# For deployment
NITRO_PRESET=cloudflare-pages npx nuxi build

Preset-Specific Preview

Static Generation

# Generate static files
npx nuxi generate

# Serve with any static server
npx serve .output/public
# or
npx http-server .output/public

Node.js Server

# Build for Node
NITRO_PRESET=node-server npx nuxi build

# Preview
npx nuxi preview
# or
node .output/server/index.mjs

Development vs Preview vs Production

# Development (with HMR)
npx nuxi dev

# Preview (production build locally)
npx nuxi build && npx nuxi preview

# Production (deploy to platform)
npx nuxi build  # With production preset
# Deploy .output to platform

Environment-Based Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    preset: process.env.NODE_ENV === 'development'
      ? 'node-server'
      : process.env.DEPLOY_TARGET || 'node-server'
  }
})

Package.json Scripts

{
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "build:preview": "NITRO_PRESET=node-server nuxi build",
    "build:cloudflare": "NITRO_PRESET=cloudflare-pages nuxi build",
    "preview": "nuxi preview",
    "preview:cf": "wrangler pages dev .output/public"
  }
}

Docker Preview

# Dockerfile for preview
FROM node:20-alpine

WORKDIR /app
COPY .output /app/.output

ENV NITRO_PORT=3000
EXPOSE 3000

CMD ["node", ".output/server/index.mjs"]

# Build for node
NITRO_PRESET=node-server npm run build

# Build Docker image
docker build -t my-nuxt-app .

# Run
docker run -p 3000:3000 my-nuxt-app

Testing Production Build

For CI/CD testing:

# .github/workflows/test.yml
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: npm install
      - run: NITRO_PRESET=node-server npm run build
      - run: npm run preview &
      - run: sleep 5 && curl http://localhost:3000

Quick Checklist

Check your build preset
Use platform CLI for edge/serverless previews
Use NITRO_PRESET=node-server for local preview
Use nuxi generate + static server for SSG
Create separate scripts for different build targets
Consider Docker for production-like preview