Download as Next.js App

PreviousNext

What happens when you click Download as App, including free vs pro pipelines, generated files, dependency resolution, and first-run setup.

Use this path when you want a full runnable project scaffold instead of installing one pattern into an existing app.

Endpoint split

The toolbar routes downloads by pattern type:

  • Free patterns: GET /api/blocks/<name>/download
  • Pro patterns: POST /api/templates/<name>/download

Implementation references:

  • components/block-viewer.tsx
  • app/api/blocks/[name]/download/route.ts
  • app/api/templates/[name]/download/route.ts

Free download behavior

Free downloads create a zip containing:

  • block files from registry
  • a basic README.md with install instructions

This path is intentionally lightweight.

Pro download behavior

Pro downloads build a full app package and zip it:

  • reads pattern files from pro registry
  • rewrites internal preview API paths from /view/<block>/api/* to /api/*
  • auto-includes components/ai-elements/*
  • resolves and includes required components/ui/* files (including nested UI deps)
  • merges npm dependencies into generated package.json
  • adds app defaults and setup files

Generated project files

Typical generated files include:

  • package.json (with merged dependencies)
  • app/layout.tsx
  • app/globals.css
  • app/page.tsx (setup/checklist page if no root page exists)
  • components.json (shadcn CLI config)
  • lib/utils.ts
  • .env.local (when env metadata exists)
  • pattern source files under their target paths

Environment variables

If pattern metadata defines env vars, the download pipeline generates .env.local placeholders and includes a README section with provider URLs.

First run checklist

pnpm install
pnpm dev

Then:

  1. Fill .env.local if required.
  2. Open the default setup page.
  3. Navigate to the generated block route and verify responses.

Troubleshooting

Download starts but app fails at runtime

  • Most common cause: missing env vars or external service credentials.

API calls fail after download

  • Confirm routes now point to /api/* (path rewrite is automatic in pro pipeline).

Missing UI component errors

  • Rare, but usually indicates dependency mismatch in your package manager lockfile.
  • Reinstall from clean lockfile.

When to choose this path

  • You want a full reference app quickly.
  • You want to inspect full-stack implementation details.
  • You are starting a new project from a pattern baseline.