Le moyen le plus simple de préparer Next.js pour la production est d’utiliser Plateforme Vercel des créateurs de Next.js. Vercel est une plate-forme cloud pour les sites Web statiques, les applications hybrides et les fonctions sans serveur.

A débuté

Si vous ne l’avez pas déjà fait, soumettez votre application Next.js à un fournisseur git de votre choix: GitHub, GitLab, ou alors Seau à embouts. Votre référentiel peut être privé ou public.

Ensuite, procédez comme suit:

  1. Connectez-vous à Vercel (Pas de carte de crédit nécessaire).
  2. Après l’inscription, vous arriverez sur « Importer un projet » Page. Sous «À partir du référentiel Git», sélectionnez le fournisseur Git que vous utilisez et configurez une intégration. (Manuel: GitHub /. GitLab /. Seau à embouts).
  3. Une fois que cela est configuré, cliquez sur « Importer le projet de … » et importez votre application Next.js. Il détectera automatiquement que votre application utilise Next.js et configurera la configuration de construction pour vous. Vous n’avez rien à changer – tout devrait bien fonctionner!
  4. Une fois importée, votre application Next.js sera déployée et vous recevrez une URL de déploiement. Cliquez sur Visiter pour voir votre application en production.

Toutes nos félicitations! Vous venez de déployer votre application Next.js! Si vous avez des questions, jetez un œil Documentation Vercel.

Si vous en utilisez un Serveur personnaliséNous vous recommandons vivement de vous en éloigner (par exemple en utilisant routage dynamique). Si vous ne pouvez pas migrer, envisagez autres options d’hébergement.

DPS: développer, prévisualiser, envoyer

Parlons du flux de travail que nous recommandons. Vercel prend en charge ce que nous appelons cela DPS Flux de travail: RÉ.evelop, P.vérifier et S.Hanche:

  • Développer: Écrivez le code dans Next.js. Gardez le serveur de développement en marche et profitez-en Répondez à une mise à jour rapide.
  • Aperçu: Chaque fois que vous apportez des modifications à une branche dans GitHub / GitLab / BitBucket, Vercel crée automatiquement un nouveau déploiement avec une URL unique. Vous pouvez les afficher sur GitHub lorsque vous ouvrez une pull request, ou sous « Preview Deployments » sur la page de votre projet dans Vercel. Apprenez-en plus ici.
  • Bateau: Lorsque vous êtes prêt à expédier, fusionnez la demande d’extraction dans votre branche standard (ex. main). Vercel crée automatiquement un déploiement de production.

En plus d’utiliser le flux de travail DPS Notes de code, tu peux faire Aperçu du déploiement. Chaque déploiement crée une URL unique qui peut être partagée ou utilisée pour les tests d’intégration.

Optimisé pour Next.js

Vercel est créé par les créateurs de Next.js et prend en charge Next.js.

Par exemple le Sites hybrides L’approche est prise en charge immédiatement.

Domaines personnalisés, variables d’environnement, HTTPS automatique, etc.

  • Domaines personnalisés: Une fois déployé sur Vercelvous pouvez attribuer un domaine personnalisé à votre application Next.js. Regarde ça notre documentation ici.
  • Variables d’environnement: Vous pouvez également définir des variables d’environnement dans Vercel. Regarde ça notre documentation ici. Vous pouvez alors Utilisez ces variables d’environnement dans votre application Next.js.
  • HTTPS automatique: HTTPS est activé par défaut (y compris les domaines personnalisés) et ne nécessite aucune configuration supplémentaire. Nous renouvelons automatiquement les certificats SSL.
  • Suite: Lisez notre documentation pour en savoir plus sur la plateforme Vercel.

Lorsque vous déployez votre application Next.js, vous souhaiterez voir la dernière version sans avoir à la recharger.

Next.js charge automatiquement la dernière version de votre application en arrière-plan lors du routage. Pour la navigation côté client next/link fonctionnera temporairement comme d’habitude <a> Étiqueter.

Lorsqu’une nouvelle page (avec une ancienne version) a déjà été récupérée à partir de next/linkNext.js utilise l’ancienne version. Après une actualisation complète de la page ou plusieurs transitions côté client, Next.js affichera la dernière version.

Serveur Node.js

Next.js peut être déployé sur n’importe quel fournisseur d’hébergement prenant en charge Node.js. C’est l’approche à adopter lors de l’utilisation d’un Serveur personnalisé.

Assurez-vous que votre package.json a la "build" et "start" Scripts:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

next build crée l’application de production dans le .next Dossier. Après la construction, next start Démarre un serveur Node.js qui prend en charge Sites hybrideset sert à la fois les pages générées statiquement et rendues côté serveur.

Image Docker

Exemples

Next.js peut être déployé sur n’importe quel fournisseur d’hébergement pris en charge docker Récipient. Vous pouvez utiliser cette approche lorsque vous comptez sur des orchestrateurs de conteneurs tels que Gouverneurs ou alors Nomade HashiCorpou s’ils s’exécutent dans un seul nœud dans un fournisseur de cloud.

En voici un à plusieurs niveaux Dockerfile Avec node:alpine que vous pouvez utiliser:


FROM node:alpine AS deps

RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile


FROM node:alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build && yarn install --production --ignore-scripts --prefer-offline


FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001



COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000






CMD ["yarn", "start"]

Assurez-vous de placer ce fichier Docker dans le dossier racine de votre projet.

Vous pouvez aider à construire votre conteneur docker build . -t my-next-js-app et emportez-le avec vous docker run -p 3000:3000 my-next-js-app.

Export HTML statique

Si vous souhaitez effectuer une exportation HTML statique de votre application Next.js, suivez les instructions ci-dessous notre documentation.



Source link

Recent Posts