Creating a full-stack app

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

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.

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

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.

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

1. Start with UI

   Create your component layout and design:

   prompt

   Create a modern task management dashboard with a sidebar, task list, and add task form

   Open inOpen in v0

2. Add data layer

   Prompt v0 to add database schema and API routes:

   prompt

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

3. Implement core features

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

   prompt

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

4. Enhance functionality

   Build on existing features with detailed instructions:

   prompt

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

5. Optimize and polish

   Add performance improvements and advanced features:

   prompt

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

• 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