Deploiement Vercel

Vercel est une alternative a Cloudflare Workers, particulierement adaptee pour les projets Next.js ou les sites necessitant du SSR (Server-Side Rendering).

Quand utiliser Vercel plutot que Cloudflare Workers ?

Configuration pour un site statique

vercel.json

{
  "buildCommand": null,
  "outputDirectory": ".",
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

Configuration pour Next.js

Variables d'environnement

Dans le dashboard Vercel > Settings > Environment Variables :

NEXT_PUBLIC_API_URL=https://api.zoddev.site/api/blog/v1/public
NEXT_PUBLIC_API_TOKEN=zb_votre_token_ici
NEXT_PUBLIC_PROJECT_ID=1

Note : Les variables prefixees NEXT_PUBLIC_ sont exposees cote client. Pour du SSR pur, utilisez des variables sans prefix.

Fetch cote serveur (SSR)

// app/blog/page.tsx (Next.js App Router)
async function getPosts() {
  const res = await fetch(
    'https://api.zoddev.site/api/blog/v1/public/posts',
    {
      headers: {
        'x-api-key': process.env.API_TOKEN!, // variable serveur
        'X-Project-Id': '1',
      },
      next: { revalidate: 60 }, // ISR: revalider toutes les 60s
    },
  );
  const json = await res.json();
  return json.data;
}

export default async function BlogPage() {
  const posts = await getPosts();
  return <div>{/* render posts */}</div>;
}

L'avantage du SSR : le token n'est jamais expose cote client.

Auto-deploy via GitHub

1. Connectez votre repo GitHub dans le dashboard Vercel
2. Selectionnez la branche main et le framework (Next.js ou Other)
3. Chaque git push declenche un deploiement automatique

Point important : identite Git

Vercel (tier Hobby) bloque les deploys si l'auteur du commit ne correspond pas a un membre du projet GitHub.

Configuration requise :

git config user.email "votre-email@github.com"
git config user.name "votre-username-github"

Domaine personnalise

Dans Vercel Dashboard > Settings > Domains :

1. Ajoutez votre domaine (ex: app.zoddev.site)
2. Configurez les records DNS selon les instructions de Vercel
3. Le SSL est automatique

Differences cle avec Cloudflare Workers

• Variables d'env : Vercel supporte les env vars cote serveur (le token peut rester secret)
• Build step : Vercel execute un build (bun install, bun build, etc.)
• Edge functions : Vercel supporte les Edge Functions pour du compute cote CDN
• Monorepo : Vercel gere nativement les monorepos (ex: frontend ZodBack est dans un monorepo)