Full-stack apps

v0 can transform prototypes into full-stack applications. In a new chat or existing generation, ask v0 to implement features that require data persistence, API calls, or backend logic.

v0 defaults to Next.js, which offers advantages like server actions and API routes for colocating frontend and backend code. While v0 can use other frameworks, Next.js provides the most reliable results.

When building full-stack applications, v0 can:

• Leverage React Server Components (RSCs) for improved performance and SEO
• Create backend endpoints using Next.js App Router conventions
• Connect to databases like Supabase, Neon, and Upstash without ORMs by default

Integrations

Leveraging the Vercel marketplace, v0 has access to a variety of integrations that enable it to add databases, queues, blob storage, AI models, and more through the integrations tab of the project settings. You can either prompt v0 to add integrations, add them manually, or v0 can prompt you to create the resource when necessary, depending on the feature you are building.

Supported integrations

• Databases: Supabase, Blob, Neon, Upstash.
• AI: Grok, Groq, fal, Deep Infra.

Environment variables

In each project, you can configure secure environment variables that v0 will have access to. These can be used for external integrations with LLM providers and APIs.

Client-side environment variables must be prefixed with NEXT_PUBLIC_ to be accessible in browser code.

Incremental development workflow

When building full-stack applications, take an incremental approach with v0.

Start with UI

Create your component layout and design:

Add data layer

Prompt v0 to add database schema and API routes:

"Add a Supabase database with tables for tasks, users, and projects. Include API routes for managing tasks."

Implement core features

Add authentication, CRUD operations, or real-time updates:

"Add user authentication so users can only see and manage their own tasks."

Enhance functionality

Build on existing features with detailed instructions:

"Add the ability to edit and delete tasks, plus real-time updates when team members make changes."

Optimize and polish

Add performance improvements and advanced features:

"Add task filtering by status and due date, plus optimize with caching and image optimization."

Best practices

• Fork existing generations to add logic instead of combining UI and logic in a single prompt
• Use popular, well-documented libraries in your prompts
• Provide detailed implementation instructions to avoid incorrect assumptions