Mettre le site en ligne

Les deux réglages

Les deux sont facultatifs. Sans Docker, ils vont dans .env.local, ou dans les variables d'environnement de votre hébergeur.

Ce sont deux valeurs NEXT_PUBLIC_ : le build les inscrit dans le JavaScript que charge le navigateur. Définissez-les avant le build, et refaites le build après en avoir modifié une. N'y mettez jamais de secret : chaque visiteur peut les lire.

• Connecter le formulaire de contact

Vercel

1. 01

   Placez le code dans un dépôt Git

   Le téléchargement n'a pas d'historique Git. Créez-en un dans le dossier, créez un dépôt vide sur GitHub, GitLab ou Bitbucket, puis poussez-y le code comme l'indique sa page.

   Terminaldans landing-page-template-1Copier

   git init
   git add .
   git commit -m "First version"
2. 02

   Importez-le dans Vercel

   Dans Vercel, choisissez Add New, puis Project, et importez le dépôt. Vercel détecte Next.js ; gardez ses réglages de build.
3. 03

   Ajoutez les réglages

   Dans Environment Variables, ajoutez NEXT_PUBLIC_SITE_URL avec votre adresse, et NEXT_PUBLIC_API_BASE_URL si vous avez une API pour le formulaire de contact. Ajoutez aussi ENABLE_EXPERIMENTAL_COREPACK avec la valeur 1, pour que Vercel installe avec la version de Yarn 4 fixée par le projet.
4. 04

   Déployez

   Cliquez sur Deploy. Si vous modifiez une variable plus tard, redéployez pour que la nouvelle valeur soit intégrée au build.

   Résultat attendu: Vercel ouvre votre site sur son adresse vercel.app. Ajoutez votre propre domaine dans Settings, puis Domains, et donnez sa valeur à NEXT_PUBLIC_SITE_URL.

   Un problème ?

N'importe quel hébergeur Node.js

Sur un serveur ou un hébergeur avec Node.js 22 ou plus récent : définissez les deux valeurs dans .env.local ou dans l'environnement de l'hébergeur, puis installez, faites le build et démarrez.

corepack enable
yarn install
yarn build
yarn start

• yarn start écoute sur le port 3030, quelle que soit la valeur de PORT. Chez un hébergeur qui donne son port à votre application dans PORT, comme Railway ou Render, réglez la commande de démarrage sur yarn start -p $PORT.
• Gardez le processus en marche avec le gestionnaire de processus de votre hébergeur, et placez devant lui un serveur web comme Nginx ou Caddy pour le HTTPS sur votre domaine.

L'image Docker

L'image lancée en local sert aussi le site en production. Passez vos réglages au build, en omettant l'API si vous n'en avez pas :

docker build -t agency-portfolio --build-arg NEXT_PUBLIC_SITE_URL=https://www.your-domain.com --build-arg NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com .

Puis lancez-la sur le serveur. -d la garde en arrière-plan, et --restart unless-stopped la relance après un redémarrage :

docker run -d --restart unless-stopped -p 3030:3030 agency-portfolio

• docker run -e NEXT_PUBLIC_SITE_URL=… ne change rien : la valeur a été inscrite au moment du build. Refaites le build de l'image avec le nouveau --build-arg.
• Dans le conteneur, le site écoute sur 3030. Faites pointer votre serveur web vers le port à gauche de -p.

Avant la mise en ligne

• Donnez votre adresse à NEXT_PUBLIC_SITE_URL.
• Remplacez le contenu d'exemple : les projets, les témoignages, les prix, l'e-mail, le téléphone et l'adresse sont des exemples.
• Donnez de vraies destinations aux boutons et aux liens sociaux et légaux : ils sont livrés sans destination, ou avec #.
• Connectez le formulaire de contact à votre API, ou retirez-le : sans API, les messages ne vont nulle part.
• Changez l'auteur dans generator dans src/app/[locale]/layout.tsx, les noms dans public/site.webmanifest, et l'image d'aperçu public/image.png.

• Personnalisez-le