Vercel

What Is Vercel?

Vercel is a cloud platform optimized for front-end developers. It provides seamless deployment and hosting for modern web frameworks like Next.js, React, and Vue. When integrated with Strapi, Vercel enhances the development process, offering zero-configuration deployments and automatic preview deployments for easy collaboration.

Vercel supports static and serverless deployments, with features like environment variables and serverless functions for API routes. Vercel’s global edge network ensures faster load times by serving applications from locations closest to users. While ideal for front-end projects, Vercel typically pairs with a separately deployed Strapi back-end for full-stack applications.

Why Integrate Vercel with Strapi

Integrating Vercel with Strapi combines the strengths of both platforms to create an efficient content management and deployment workflow. Strapi’s customizable APIs and content management capabilities complement Vercel’s powerful deployment features, offering developers a streamlined process for building dynamic applications.

Customizable APIs and Content Management

Strapi allows developers to tailor APIs through an intuitive interface and offers flexibility in content structuring. This customization enhances development and SEO performance, as content can be optimized for search engines. Strapi’s granular user permissions system provides precise access control, which makes it ideal for large teams or external integrations.

Vercel’s Deployment Capabilities

Vercel’s Git-based workflow automates continuous deployment, syncing front-end updates with Strapi content changes. Preview environments create unique URLs for every update, enabling content staging before going live. Vercel’s global edge network ensures fast content delivery, while its caching system maintains up-to-date content.

Seamless Integration Workflow

The strapi-plugin-vercel-deploy plugin triggers Vercel deployments directly from the Strapi admin panel, while webhooks automatically deploy content updates to live sites. Strapi also integrates with Vercel’s Visual Editing feature and allows content editors to modify content on the live website directly.

Developer Experience

Integrating Vercel with Strapi empowers developers to build lightning-fast front-ends, enhances team collaboration, and creates a flexible, scalable architecture for modern web applications. This integration streamlines content management and deployment, making it easier to create dynamic, content-driven apps easier.

Step-by-Step Guide to Integrate Vercel with Strapi

This guide will walk you through integrating Vercel with Strapi. We’ll cover back-end and front-end setup separately, then connect them for seamless content delivery.

Back-end Setup and Configuration

1. Deploy Strapi Back-end:
   • For the simplest experience, deploy Strapi on Strapi Cloud.
   • Alternatively, use platforms like Heroku, DigitalOcean, or AWS that support persistent processes.
2. Configure CORS:
   • In your Strapi project, navigate to ./config/middleware.js.
   • Add your Vercel domain to the CORS allowed origins:

module.exports = {
  settings: {
    cors: {
      enabled: true,
      origin: ['https://your-vercel-domain.vercel.app']
    },
  },
};

3. Set Up API Permissions:
   • In the Strapi admin panel, go to Settings > Roles & Permissions.
   • Configure permissions for public or authenticated access to your content types.
4. Create API Tokens (optional):
   • If you need programmatic access, generate API tokens in the Strapi admin panel.
   • These can be used for automated deployments or data fetching.

Front-end Development and Deployment

1. Prepare Your Front-end:
   • Create a Next.js (or other framework) project that will consume data from Strapi.
   • Set up API routes to fetch data from your Strapi back-end.
2. Environment Variable Management:
   • Create a .env.local file in your project root.
   • Add your Strapi API URL:

NEXT_PUBLIC_STRAPI_API_URL=https://your-strapi-api.com

3. Implement Data Fetching:
   • Use getStaticProps or getServerSideProps to fetch data from Strapi:

export async function getStaticProps() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/articles`);
  const data = await res.json();
  return { props: { articles: data } };
}

4. Push to GitHub:
   • Create a new repository on GitHub.
   • Push your front-end code to this repository.
5. Import to Vercel:
   • Log in to your Vercel account.
   • Click "Add New Project" and select your GitHub repository.
6. Configure Vercel Project:
   • Choose a project name.
   • Select the appropriate framework preset (e.g., Next.js).
   • Set the root directory if your project is in a subfolder.
7. Set Environment Variables:
   • In Vercel's project settings, add the NEXT_PUBLIC_STRAPI_API_URL environment variable with your Strapi API URL.
8. Deploy:
   • Click "Deploy" to start the build process.
   • Vercel will provide a unique URL for your deployed front-end.

Follow these steps to integrate Vercel with Strapi, and you will have a Strapi back-end serving content to a front-end application hosted on Vercel. This separation allows you to leverage the strengths of both platforms: Strapi's powerful content management and Vercel's optimized front-end hosting.

Project Example: Corporate Website When You Integrate Vercel with Strapi

To see how to integrate Vercel with Strapi in practice, let's examine a real-world example you can use as inspiration or a starting point for your project.

Project Overview

The Strapi Next.js Corporate Website Starter demonstrates how these technologies work together effectively. It's a production-ready template featuring:

• A pre-configured Strapi back-end with common content types for a corporate site.
• A Next.js front-end optimized for performance and SEO.
• Ready-to-use deployment configuration for Vercel.

Key Features

1. Dynamic Content Management: The Strapi back-end gives content creators control over:
   • Pages with flexible layouts.
   • Blog posts and categories.
   • Team member profiles.
   • Company information and contact details.
2. API-Driven Architecture: The Next.js retrieves content from Strapi's API with:
   • Server-side rendering for SEO optimization.
   • Static site generation for performance.
   • Incremental Static Regeneration to keep content fresh.
3. Automated Deployment Workflow: Content updates in Strapi trigger rebuilds on Vercel, ensuring the website always displays the latest content without manual intervention.

Implementation Highlights

Back-end (Strapi)

• Content Modeling: Pre-defined content types cover most corporate website needs, including pages, blog posts, team members, and more.
• API Configuration: REST and GraphQL APIs work right out of the box, with proper permissions and authentication.
• Media Management: Images and other assets are handled efficiently through Strapi's media library.

Front-end (Next.js)

• Dynamic Routing: Pages are generated based on Strapi content, with clean, SEO-friendly URLs.
• SEO Optimization: Each page includes customizable meta tags and structured data.
• Responsive Design: The site looks great on phones and desktop monitors.

Deployment (Vercel)

• Environment Variables: API keys and other secrets stay secure through Vercel's environment variable system.
• Preview Deployments: Every pull request generates a preview, making it easy to review changes before they go live.
• Performance Optimization: Vercel's edge network delivers content quickly around the globe.

Getting Started

To try this example yourself:

1. Visit the Template:
   • Go to the Strapi Next.js Corporate Starter template on Vercel.
2. Deploy the Project:
   • Click "Deploy" to clone the repository and set up the project on Vercel.
3. Configure Your Strapi Back-end:
   • Follow the setup instructions to configure your Strapi back-end.
4. Customize the Content:
   • Add your brand elements, adjust the content, and make it your own.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Vercel documentation.