Déployez votre portfolio en production

À la fin du chapitre précédent, vous avez optimisé les performances de votre portfolio avec le composant  Image  , les polices Google Fonts et les metadata SEO. Votre site fonctionne parfaitement en local sur  localhost:3000  , mais il n'est visible que sur votre ordinateur.

Il est temps de le déployer en production pour que recruteurs, clients et collègues puissent le visiter !

En quelques minutes, votre site sera en ligne avec une vraie URL accessible partout dans le monde. 

Préparez votre application pour la production

Avant de déployer, vous devez créer une version de production optimisée de votre application. Cette version est beaucoup plus rapide que la version de développement que vous utilisez actuellement.

Créez un build de production

Dans votre terminal, arrêtez votre serveur de développement (Ctrl+C) et lancez :

npm run build

Cette commande va :

• Compiler tout votre code TypeScript/JavaScript

• Optimiser automatiquement vos images

• Générer les pages statiques avec  generateStaticParams()

• Minifier le code pour réduire sa taille

• Créer les bundles JavaScript optimisés

Vous verrez un résumé dans votre terminal qui ressemble à ça :

Route (app)                               Size     First Load JS
┌ ○ /                                     5.2 kB         92 kB
├ ○ /a-propos                             1.8 kB         89 kB
├ ○ /contact                              2.1 kB         90 kB
├ ● /projets                              3.2 kB         91 kB
├ ● /projets/[slug]                       2.5 kB         90 kB
├ ○ /formations                           2.8 kB         90 kB
└ ● /formations/[slug]                    2.2 kB         89 kB

 Les symboles indiquent le type de rendu :

• ○ : Pages statiques (HTML généré au build)

• ● : Pages avecgenerateStaticParams()(pré-générées)

• λ : Pages dynamiques (générées à la demande, si vous en aviez)

Testez votre build en local

Avant de déployer, vérifiez que tout fonctionne correctement en production :

npm run start

Cette commande lance votre application en mode production sur  localhost:3000.

Testez toutes vos pages pour vous assurer que tout fonctionne correctement. Vous remarquerez que le site est beaucoup plus rapide qu'en développement !

Si tout fonctionne bien, arrêtez le serveur (Ctrl+C). Vous êtes prêt pour le déploiement !

Déployez sur Vercel

• Intégration parfaite avec Next.js : Toutes les fonctionnalités de Next.js fonctionnent automatiquement (Image Optimization, ISR, etc.)

• Déploiement en un clic : Connectez votre repository GitHub et chaque push déploie automatiquement

• HTTPS gratuit : Votre site est automatiquement sécurisé avec un certificat SSL

• CDN global : Votre site est servi depuis des serveurs proches de vos visiteurs partout dans le monde

• Preview deployments : Chaque pull request crée une URL de prévisualisation unique

• Gratuit pour les projets personnels : Parfait pour votre portfolio !

Créez un compte Vercel

1. Rendez-vous sur vercel.com

2. Cliquez sur Sign Up (Inscription)

3. Choisissez Continue with GitHub pour vous connecter avec votre compte GitHub

4. Autorisez Vercel à accéder à vos repositories

Vercel va automatiquement détecter que vous avez des projets Next.js dans votre compte GitHub !

Connectez votre repository GitHub

Une fois connecté, vous arrivez sur votre dashboard Vercel. Pour déployer votre portfolio :

1. Cliquez sur "Add New..." puis "Project"

2. Vercel affiche la liste de vos repositories GitHub

3. Trouvez votre repository de portfolio et cliquez sur "Import"

4. Vercel détecte automatiquement que c'est un projet Next.js !

Vous voyez un écran de configuration avec :

• Project Name : Le nom de votre projet (peut être différent du repo)

• Framework Preset : Next.js (détecté automatiquement)

• Root Directory :./(la racine du projet)

• Build Command :npm run build(automatique)

• Output Directory :.next(automatique)

Vercel va maintenant :

1. Cloner votre repository

2. Installer les dépendances (npm install)

3. Lancer le build (npm run build)

4. Déployer votre application sur son réseau global

Le processus prend généralement 1 à 2 minutes. Vous pouvez suivre l'avancement en temps réel dans l'interface :

Quand vous voyez  Deployment ready  avec un effet de confettis, votre portfolio est en ligne !

Visitez votre site en production

Vercel vous donne automatiquement une URL qui ressemble à :

<https://votre-portfolio-abc123.vercel.app>

Cliquez sur cette URL pour visiter votre portfolio en production, partagez cette URL avec vos collègues ou sur LinkedIn. Votre portfolio est maintenant en ligne.

Configurez un domaine personnalisé (optionnel)

L'URL  .vercel.app  fonctionne parfaitement, mais vous préférerez peut-être avoir votre propre domaine comme votreprenom-portfolio.com. Vercel rend ça très simple !

Connectez votre domaine à Vercel

1. Dans votre projet sur Vercel, allez dans "Settings" > "Domains"

2. Cliquez sur "Add Domain"

3. Entrez votre nom de domaine (par exemplevotre-portfolio.com)

4. Vercel vous donne les paramètres DNS à configurer

Si vous avez acheté votre domaine sur un autre site, vous devrez modifier les paramètres DNS :

• Ajoutez un enregistrementApointant vers l'IP de Vercel

• Ou changez les nameservers pour utiliser ceux de Vercel

Comprenez le déploiement continu

Maintenant que votre projet est connecté à Vercel, chaque fois que vous faites un git push sur GitHub, Vercel va automatiquement :

1. Détecter le nouveau commit sur la branchemain

2. Lancer un nouveau build avec vos dernières modifications

3. Déployer automatiquement si le build réussit

4. Notifier votre ancienne version si le build échoue

Voici comment vous travaillerez désormais :

1. Développez une nouvelle fonctionnalité en local
# ...modifications dans votre code...

2. Testez en local
npm run dev

3. Créez un commit et push vers GitHub
git add .
git commit -m "Ajout d'une nouvelle section blog"
git push

4. Vercel déploie automatiquement !

Quelques secondes après votre push, vous recevrez un email de Vercel avec le lien vers votre nouveau déploiement !

Utilisez les preview deployments

L'une des fonctionnalités les plus puissantes de Vercel, ce sont les preview deployments. Chaque fois que vous créez une branche ou une pull request sur GitHub, Vercel génère automatiquement une URL de prévisualisation unique.

1. Créez une nouvelle branche pour une fonctionnalité :

2. Créez une pull request sur GitHub

3. Vercel commente automatiquement votre PR avec une URL de preview :

Vous pouvez tester vos modifications sur cette URL avant de merger dans main

Une fois mergé, les modifications sont automatiquement déployées en production. C'est parfait pour tester de nouvelles fonctionnalités sans risquer de casser la production !

Gérez les variables d'environnement

Si votre portfolio utilise des clés API ou des secrets (par exemple pour un formulaire de contact avec une API d'envoi d'emails), vous devrez gérer les variables d'environnement.

En local :  .env.local

Créez un fichier.env.local  à la racine de votre projet :

Les variables commençant par  NEXT_PUBLIC_  sont accessibles côté client. Les autres ne sont accessibles que côté serveur (plus sécurisé).

Sur Vercel : Environment Variables

1. Dans votre projet sur Vercel, allez dans "Settings" > "Environment Variables"

2. Ajoutez vos variables une par une :

• Key :NEXT_PUBLIC_API_URL

• Value :https://api.example.com

• Environment : Production (et Development si besoin)

La prochaine fois que vous déployez, ces variables seront disponibles dans votre application !

Surveillez vos performances

Vercel propose des outils de monitoring intégrés pour suivre les performances de votre portfolio en production.

Analytics

Dans votre projet Vercel, l'onglet Analytics vous montre :

• Le nombre de visiteurs uniques

• Les pages les plus visitées

• L'origine géographique de vos visiteurs

• Les performances (Core Web Vitals)

Speed Insights

L'onglet Speed Insights vous montre les scores de performance de votre site en production :

• Score de performance global

• Temps de chargement (LCP, FID, CLS)

• Recommandations d'optimisation

Si votre score baisse, Vercel vous alerte automatiquement pour que vous puissiez réagir rapidement.

Sachez qu'il existe des alternatives à Vercel

Vercel est parfait pour Next.js, mais vous avez d'autres options si vous préférez :

Netlify

Netlify est une excellente alternative :

• Déploiement similaire à Vercel

• Gratuit pour les projets personnels

• Bon support pour Next.js

• Fonctionnalités supplémentaires (forms, identity)

Railway

Railway est idéal si vous avez une base de données :

• Hébergement de l'application + base de données

• Support Docker

• Bon pour les projets full-stack

• 5$ de crédit gratuit par mois

L'avantage ? Tout est au même endroit (app + DB + services)

VPS (DigitalOcean, OVH, etc.)

Pour plus de contrôle, vous pouvez déployer sur un serveur privé :

• Contrôle total de l'infrastructure

• Plus complexe à configurer

• Nécessite des connaissances en DevOps

• Coût mensuel (à partir de 5-10€/mois)

À vous de jouer !

Si vous n’avez pas suivi le pas a pas de ce chapitre, c’est le moment de mettre en ligne votre portfolio :

1. Créez un build de production et testez-le en local

2. Déployez votre portfolio sur Vercel avec votre compte GitHub

3. Testez votre site en production sur l'URL.vercel.app

4. Partagez votre portfolio sur LinkedIn avec le hashtag #NextJS

5. (Optionnel) Configurez un domaine personnalisé

Avant de partager votre portfolio, vérifiez que :

• Toutes les pages s'affichent correctement

• Les images se chargent rapidement

• Le formulaire de contact fonctionne

• Les metadata SEO sont présentes (clic droit > Afficher le code source)

• Le site est responsive (testez sur mobile)

• Les liens externes s'ouvrent dans un nouvel onglet

• Il n'y a pas d'erreurs dans la console du navigateur

Si tout est bon, félicitations ! 

Vous avez maintenant un portfolio complet et professionnel avec :

• Page d'accueil avec hero section

• Pages de projets avec routes dynamiques

• Section formations

• Page à propos

• Formulaire de contact interactif

• Navigation responsive avec menu burger

• Images et polices optimisées

• SEO optimisé avec metadata

• Déployé en production avec HTTPS

• Performances optimales (90+ sur Lighthouse)

Allez plus loin

Voici quelques pistes pour aller plus loin avec Next.js :

Enrichissez votre portfolio :

• Ajoutez un blog avec des articles techniques

• Intégrez une section "Témoignages"

• Créez une page "CV téléchargeable"

• Ajoutez des animations avec Framer Motion

Approfondissez Next.js :

• Explorez les Route Handlers pour créer des APIs

• Découvrez les Server Actions pour les formulaires

• Apprenez l'internationalisation (i18n)

• Maîtrisez les Middleware pour l'authentification

Connectez des services :

• Utilisez un CMS (Sanity, Strapi, Contentful)

• Intégrez une base de données (PostgreSQL, MongoDB)

• Ajoutez l'authentification (NextAuth.js)

• Connectez des APIs tierces (GitHub, LinkedIn)

Continuez à apprendre :

• Suivez le blog officiel de Next.js

• Participez à la communauté sur Discord

• Contribuez à des projets open source

• Créez vos propres projets !

En résumé

• Générez un build de production avec npm run build pour optimiser votre application (code minifié, images compressées, pages statiques générées).

• Testez le site localement en mode production avec npm run start pour vérifier qu’il fonctionne parfaitement avant le déploiement.

• Vous pouvez déployer sur Vercel en connectant votre repo GitHub : Vercel détecte automatiquement Next.js et configure le projet.

• Vous pouvez configurer un domaine personnalisé si vous le souhaitez, et surveiller les performances via les outils d’analytics et speed insights intégrés.

• Exploitez le déploiement continu : chaque push sur GitHub déclenche automatiquement un nouveau déploiement sur Vercel.

Vous avez construit bien plus qu'un simple portfolio : vous avez acquis des compétences professionnelles en Next.js qui sont recherchées par les entreprises. Ce portfolio est votre carte de visite numérique, prenez-en soin et faites-le évoluer au fil de votre parcours !

Bravo pour avoir terminé ce cours et bonne chance dans votre carrière de développeur web !