Déploiement d’une application évolutive Next.js sur Vercel – un guide étape par étape / blogs / perficient

Dans cette ère du développement Web, Next.js et Vercel sont le couple puissant. Next.js offre des performances, une évolutivité et une flexibilité dans la création d’applications Web tandis que Vercel offre l’expérience de déploiement facile et fluide adaptée à cela.

Aujourd’hui, dans ce blog, nous couvrirons le processus étape par étape de déploiement d’une application Next.js sur Vercel. Nous couvrirons également certaines meilleures pratiques et configurations clés pour assurer les performances optimales de la production.

Pourquoi Vercel + Next.js?

• Déploiement de configuration zéro pour les projets suivants.js
• Le soutien à l’ISR (régénération statique incrémentale) est construit dans
• Prise en charge de la fonction sans serveur de première classe
• Réseau Global Edge soutenu par CDN pour la livraison rapide
• Échelle automatique sans maux de tête d’infrastructure

Condition préalable

Avant de commencer, assurez-vous d’avoir:

• Un travail Next.js project (npx create-next-app @ dernier si vous souhaitez en créer un)
• UN Girub, Gitlabou Bitbucket compte
• UN compte de Vercel (Inscrivez-vous à vercel.com)

Étape 1: Ajouter et pousser votre application Next.js vers Git

Assurez-vous que votre code Next.js est contrôlé par version et hébergé sur un fournisseur GIT comme GitHub.

git init

git add .

git commit -m "Initial commit"

git remote add origin https://github.com/your-username/your-repo.git

git push -u origin main

Étape 2: Connectez-vous à Vercel

1. Visite https://vercel.com
2. Faire un clic «Nouveau projet»
3. Connectez votre compte GitHub / GitLab / Bitbucket (si cela n’est pas déjà fait)
4. Sélectionnez maintenant le référentiel qui contient l’application suivante.js
5. Vercel détectera automatiquement c’est un projet JS. Aucune configuration supplémentaire nécessaire.

Vous trouverez ci-dessous la capture d’écran que vous obtiendrez après ces étapes:

Étape 3: Configurer les paramètres de construction (facultatif)

Vercel définit automatiquement les paramètres par défaut pour next.js:

• Preset de cadre: Next.js
• Build Command: construction suivante
• Répertoire de sortie: .suivant

Vous pouvez les remplacer selon les besoins. Vous pouvez également définir des variables d’environnement sous le Variables d’environnement Section (par exemple, pour les clés API). Après avoir cliqué sur le projet que vous souhaitez importer, vous pouvez voir ceci:

Étape 4: Déploiement!

Faire un clic « Déployer » Et laissez Vercel s’occuper du reste.

• En quelques secondes ou en minutes, votre application sera en direct dans un domaine .vercel.app.
• Chaque engagement que vous poussez à la branche connectée déclencher automatiquement un nouveau déploiement.

Vous verrez le tableau de bord ci-dessous dans lequel les détails seront mentionnés.

Et c’est à quoi le site hébergé Vercel sera apparenté sur le navigateur.

Étape 5: Configurez un domaine personnalisé

Vous pouvez ajouter votre propre domaine:

1. Accédez au tableau de bord Project → Paramètres → Domaines
2. Entrez votre nom de domaine et suivez les instructions DNS
3. Activer HTTPS avec un certificat SSL géré par Vercel gratuit

Échelle avec Vercel

Vercel Auto-échelles avec trafic à l’aide de fonctions sans serveur et de mise en cache Edge, mais voici quelques conseils pour l’échelle intelligemment:

• Utilisez la prochaine / image pour un chargement d’image optimisé
• Préférez la génération statique dans la mesure du possible
• Utilisez des fonctions de middleware et de bord pour le routage et l’autheure au bord
• Utiliser l’analyse et la surveillance des performances via les intégrations Vercel

Récapitulatif des avantages sociaux

Réflexions finales

Le déploiement de l’application évolutive Next.js sur Vercel est un processus facile et fluide. Que vous donniez la prise de vue à un blog ou à un site, Vercel assure des performances optimales avec des déploiements zéro config.

Alors, qu’attendez-vous? Poussez et déployez votre code sur Vercel et profitez de la tranquillité d’esprit qui vient avec cette approche moderne.