Déploiement d'un site web Next.js avec Vercel

Qu'est-ce que Vercel ?

Vercel est une plateforme cloud conçue pour le déploiement et l'hébergement de sites web et d'applications web modernes. Elle se distingue par sa facilité d'utilisation et sa configuration minimaliste, permettant aux développeurs de déployer leurs projets en quelques clics ou commandes. Vercel se concentre particulièrement sur les applications Jamstack, les sites statiques et les applications à page unique (SPA), offrant une intégration sans couture avec des frameworks front-end populaires comme React, Vue, et Angular.

Pourquoi utiliser Vercel avec Next.js est avantageux ?

Vercel est la compagnie qui a développé et qui maintien le framework Next.js. Les avantages de Vercel sont donc particulièrement alignés avec les besoins des projets Next.js, ce qui en fait une plateforme de déploiement idéale pour ces applications. 

Voici pourquoi :

1. Performance optimisée : Vercel et Next.js sont conçus pour fonctionner de manière intégrée, utilisant un CDN global pour minimiser les temps de chargement. Cette intégration native assure une distribution efficace du contenu généré par Next.js, offrant une performance de pointe indispensable pour les applications web modernes.

    

2. API Routes : Next.js facilite la création d'APIs au sein de l'application grâce à ses fonctionnalités d'API routes. Vercel supporte cette fonctionnalité de manière native, permettant aux développeurs de déployer des applications fullstack sans serveurs avec une configuration minimale et une intégration transparente.

    

3. Mise à jour des changements instantanés : Vercel automatise le déploiement des mises à jour pour les projets Next.js, réduisant le délai de mise en ligne grâce à une intégration Git étroite, maintenant ainsi les applications à jour sans interruption.

Déploiement d'un site Next.js sur Vercel

Déployer votre site sur Vercel à partir d'un projet GitHub est incroyablement simple et ne prend que 5 minutes. Voici les étapes que j'ai prises pour déployer nextnews, le sujet des blogs précédents :

Cette image ci-haut montre la sélection de votre projet Next.js depuis votre compte GitHub directement dans l'interface Vercel, prêt pour l'importation avec un simple clic sur 'Import'.

À cette étape ci-haut, nous configurons notre projet Next.js en définissant le nom du projet et en ajoutant des variables d'environnement si nécessaire avant de cliquer sur 'Deploy'.

Cette image montre la phase de construction sur Vercel où le site est en plein processus de déploiement, installant les dépendances et progressant vers la mise en ligne du projet Next.js.

Dernièrement, ici, nous voyons le tableau de bord de déploiement de production sur Vercel, où votre application Next.js vient d'être déployée, prête à être partagée avec le monde entier.

Source: 

Guillaume David, « Pourquoi Vercel est la solution parfaite pour héberger votre projet React rapidement? », Medium, https://guillaumedaavid.medium.com/pourquoi-vercel-est-la-solution-parfaite-pour-héberger-votre-projet-react-rapidement-c32cd7b4bab2#:~:text=Vercel%20est%20une%20plate-forme,Vercel%20est%20le%20choix%20parfait. (Page consultée le 21 mars 2024)

Justin Gage, « What does Vercel do? », Vercel, https://vercel.com/blog/what-is-vercel (Page consultée le 21 mars 2024)