Building the Future Web: Best Practices with Strapi, Nextjs, & v0

Introduction

This article explores the process, tools, prompts, challenges, outcomes, and guide for developers, designers, and product teams embracing AI in modern web development.

In this guide, we’ll walk through how to use Vercel v0 to design and prototype frontend applications. Then, we will learn how to connect your v0 project or any frontend project to Strapi AI to structure, manage content, and transform your project to a CMS structure.

Let's get started!

Video Resource: Best Practices with Strapi, Next.js, and v0

You can view the complete YouTube video for this article below by Alexandre Bodin (Strapi) & Alice De Mauro (Vercel).

Introduction to Vercel v0 and its Amazing Features

Vercel's v0 is not just another AI tool. v0 is your personal coding companion that understands the intricacies of web development. With v0, you can:

• Generate code snippets based on natural language prompts
• Create entire web applications from scratch
• Refactor existing code to improve performance
• Connect to APIs and databases with ease

Let's explore some v0 features that can enhance productivity and creativity in different roles.

Creating a Slide with v0 through Vibe Coding

Let's build something with AI, v0, and prompting. The goal is to create a project and Strapi AI will figure out the schema.

We will create a presentation slide through vibe coding.

Here is the prompt:

1Can you make some slides based on vercel.com describing how great is v0, 
2showing information about v0 policy: https://v0.dev/policy, 
3pick the theme of vercel.com, make 6 slides

v0 can also navigate the web when necessary. With v0, you can also create content directly. It is also your expert in Next.js and Vercel.

Here is the slide it was able to create.

Of course, we could add more information in the prompt such as text, PDFs images, and so on. The good news is that with v0, we could do more for example ask v0 to explain more about a concept to beginners as we will see shortly.

Enriching Inputs Using v0

With improved prompts and more input files, prompt results can be enriched further.

Thus we can enhance the slides created earlier by using additional materials such as:

• TXT files
• PDFs
• Images
• CSS themes

Visualizing Concepts with Animation

V0 can also be used to generate conceptual blurbs when too lazy to write from scratch. For example, using V0 to summarize complex technical ideas (e.g., rendering strategies) thus highlighting V0's versatility in educational content creation.

Take a look at this example of an interactive animation sequence made with v0:

You can create further animations to explain concepts to someone else which could be Vercel, Next.js, Rendering strategies, etc.

Generating a Game Engine Documentation Site

You can upload a .txt spec and global CSS to generate a documentation website for a game engine. The prompt:

1can you build a web application that is a documentation website on a game engine, 
2you find the specs in the Txt file and use all the theming from global.css

v0 will go ahead to generate a complete site using the structure and theming

Note that uploading CSS allows the reuse of design systems, thus giving you dynamic CSS-based theming, design consistency, options to select/fork versions, and tweak UI elements.

v0 currently does not fully integrate design systems except primitives like Tailwind or Shadcn. However, there are plans to support design systems on the roadmap.

Connecting v0 to External APIs

v0 allows you to connect to external REST APIs, databases, and other integrations.

You can connect V0 to a REST API by:

• Saving API tokens in project environment variables
• Prompting the AI to use those secrets to connect to the API

Multiple integrations (Neon, Supabase, etc.) are supported, and knowledge within the project evolves dynamically.

When you create a new project, and you navigate to the project settings, you can set the environment variable, authentication token, data source URL, etc.

Say I want to fetch data from an external API: mockapi.io API as shown below. It is a public API that displays user data with fields createdAt, name, avatar, and id.

After adding my API URL as an environment variable as shown below:

I can add the following prompt.

1Can you connect to a REST API data source using the API_URL in the environment variable? 
2Fetch the names in an array of objects with this schema: [{name:string, id:string}]

This is the result of v0 creating a component to display the fetched data.

v0 and Cursor Integration (Sneak Peek)

Although, still in the Alpha version, v0 will be integrated into Cursor. This means that in your Cursor IDE, you are going to have a Next.js expert, a Vercel expert, and so on.

According to internal chats, v0 integration with Cursor achieved a 98% score in high compatibility with outcomes.

The benchmark for v0 says that, compared to other very famous solutions, v0 has a 98% pass rate on model performance.

So, this is an improvement to the way you will use Cursor and v0 integration for your Next.js applications that you are currently working on by giving you the best it can be. These could be questions for best performance optimization, best rendering strategies, use of App router instead of Pages router, etc.

Deployment and Downloading of v0 Output

You can download the output of your v0 project in two ways.

1. Through your console: npx shadcn@latest add <link to project>
2. As a ZIP file.

Also, you can quickly deploy to Vercel.

Background tasks are also supported; Developers get notified upon completion.

Below is a summary of v0's capabilities.

👉 Visit the v0 docs to learn more: https://v0.dev/docs

Strapi AI: AI-Powered Backend Modeling with Strapi

The idea of Strapi AI was because when we start building from a design or vibe coding with v0, at some point we need to get to production. As such, we need to connect to a CMS since we will be managing a lot of content.

With Strapi AI, we want to streamline that transformation from your project to a CMS structure.

To see Strapi AI in action, you can start by importing a project, say the zip file download of the Game Engine Documentation Site project above.

Let us discover some cool capabilities of Strapi AI.

1. Strapi AI Project Import and Schema Generation

Here are some cool things the Strapi AI does upon project import

• You have multiple ways of importing a project. This could be from the chat or directly from the home page if you don't have any content types.
• Your project could be a zip folder, frontend code, JSON schema, etc.
• Strapi AI detects content types from imported code.
• It respects the .gitignore file to avoid unnecessary files.
• It parses JSON files and JS objects for schema inference.
• It detects modules, metadata, changelogs, navigation, dependencies, etc.

2. Strapi AI Auto-Save and Schema Navigation

The Strapi AI supports:

• Side panel navigation across multiple content types without saving and switching pages.
• Real-time schema changes with undo/redo (Cmd-Z, discard all) without refreshing the page.
• Drag-and-drop field rearrangement which has been so requested by a lot of people.
• Manual or AI-assisted component creation.

3. AI-Assisted Iteration and Documentation for Developers

Developers can:

• Ask the AI to split complex JSON into multiple components.
• Use the Strapi AI to explain schema relationships (great for onboarding new team members). For example, if you are new and get to see about 200 content types and components. You can ask AI to explain better.
• Add/edit fields or relations through AI or UI.

4. Incremental Imports and Schema Diffing

Users can import newer versions of frontend code to:

• Automatically diff schema changes.
• Match existing content models with updated code.
• Evolve CMS structure in sync with frontend updates like v0.
• Import project from Figma.

5. Strapi AI Comes with Additional Highlights

Some little but amazing highlights that come with Strapi AI include:

• Mix-and-match manual + AI changes.
• Prompt for best practices (e.g., dynamic zones vs relations).
• UI improvements: collapsible sections, label status (new, modified).
• Integration with Figma and other design systems in progress.

Strapi API Release Info

The new CTB UI (without AI) will launch as a free update. Strapi AI integration will be part of the Growth plan.

👉 Register to get early access to Strapi AI Private beta: https://strapi.io/ai

Conclusion

We have gotten a clear glimpse into the future of web development:

• Vercel v0 empowers frontend engineers to prototype, reason, and build entire apps using text prompts and contextual files.
• Strapi AI brings seamless structure and understanding to content modeling, with both power-user and onboarding-friendly features.

Together, they form a stack for building modern, dynamic, and scalable web applications with AI as a reliable co-pilot.