Next.js et Vercel

Vercel est créé par les auteurs de Next.js et offre un support de première classe pour Next.js. Lorsque vous déployez votre application Next.js sur Vercel, les éléments suivants se produisent par défaut :

• Les pages utilisant la Génération statique et les ressources (JS, CSS, images, polices, etc.) seront automatiquement servies depuis le CDN Vercel, qui est extrêmement rapide.
• Les pages utilisant le Rendu côté serveur (SSR) et les routes API deviendront automatiquement des Fonctions Serverless isolées. Cela permet au rendu des pages et aux requêtes API de s'adapter à l'infini.

Vercel offre bien d'autres fonctionnalités, telles que :

• Domaines personnalisés : Une fois déployé sur Vercel, vous pouvez attribuer un domaine personnalisé à votre application Next.js. Consultez notre documentation à ce sujet.

• Variables d'environnement : Vous pouvez également définir des variables d'environnement sur Vercel. Consultez notre documentation à ce sujet. Vous pouvez ensuite utiliser ces variables d'environnement dans votre application Next.js.

• HTTPS automatique : HTTPS est activé par défaut (y compris pour les domaines personnalisés) et ne nécessite aucune configuration supplémentaire. Nous renouvelons automatiquement les certificats SSL.

Vous pouvez en apprendre davantage sur la plateforme dans la documentation Vercel.

Déploiement de prévisualisation pour chaque push

Les étapes ci-dessous sont optionnelles — vous pouvez les essayer ou simplement les lire.

Après avoir déployé sur Vercel, essayez de faire ce qui suit si possible :

• Créez une nouvelle branche dans votre application.
• Effectuez quelques modifications et poussez-les sur GitHub.
• Créez une nouvelle pull request (page d'aide GitHub).

Vous devriez voir un commentaire du bot vercel sur la page de la pull request.

Essayez de cliquer sur l'URL Preview dans ce commentaire. Vous devriez voir les modifications que vous venez d'apporter.

Lorsqu'une pull request est ouverte, Vercel crée automatiquement un déploiement de prévisualisation pour cette branche à chaque push. L'URL de prévisualisation pointera toujours vers le dernier déploiement de prévisualisation.

Vous pouvez partager cette URL de prévisualisation avec vos collaborateurs et obtenir des retours immédiats.

Si votre déploiement de prévisualisation semble correct, fusionnez-le dans main. Lorsque vous faites cela, Vercel crée automatiquement un déploiement en production.

Développer, Prévisualiser, Livrer

Nous venons de parcourir le workflow que nous appelons DPL : Développer, Prévisualiser et Livrer.

• Développer : Nous avons écrit du code dans Next.js et utilisé le serveur de développement Next.js pour profiter de sa fonctionnalité de rechargement à chaud.
• Prévisualiser : Nous avons poussé des modifications vers une branche sur GitHub, et Vercel a créé un déploiement de prévisualisation disponible via une URL. Nous pouvons partager cette URL de prévisualisation avec d'autres pour obtenir des retours. En plus des revues de code, vous pouvez faire des revues de déploiement.
• Livrer : Nous avons fusionné la pull request dans main pour livrer en production.

Nous recommandons fortement d'utiliser ce workflow lors du développement d'applications Next.js — cela vous aidera à itérer plus rapidement sur votre application.