Guide pour créer et déployer une application Next.js

Le développement d'une application Next.js n'est que la première phase. L'étape cruciale suivante est le déploiement. Ce processus consiste à rendre votre application disponible auprès des utilisateurs sur Internet. Une stratégie de déploiement efficace est essentielle pour assurer les performances, l'évolutivité et la fiabilité de votre application. Ce guide vous explique comment déployer votre application Next.js.

Exécuter l'application Next.js sur Cloud Run

Qu'est-ce que le framework Next.js ?

Next.js est un framework React qui s'appuie sur React en intégrant des fonctionnalités qui facilitent la compilation et l'optimisation automatique de sites Web prêts pour la production. 

En résumé, Next.js est un framework qui vous aide à créer des applications modernes avec React. Il prend en charge les serveurs, et propose des images et des composants optimisés permettant d'obtenir des résultats rapides tout en limitant la taille des transferts de fichiers.

Différences entre React (par défaut) et Next.js

Ces deux éléments peuvent se ressembler et exécuter du code JavaScript, mais leurs fonctions et leurs rôles sont très différents.

Caractéristique

React (par défaut)

Next.js

Optimisation pour le SEO

Peut être difficile

Convivial pour le SEO

Performances du chargement initial

Moins rapide

Plus rapide

Extraction de données

Nécessite une implémentation manuelle

Intégration à getServerSideProps et getStaticProps

Routage

Utilise une bibliothèque de routage (par exemple, React Router)

Routage basé sur un système de fichiers

Complexité

Plus simple

Configuration prête à l'emploi

Caractéristique

React (par défaut)

Next.js

Optimisation pour le SEO

Peut être difficile

Convivial pour le SEO

Performances du chargement initial

Moins rapide

Plus rapide

Extraction de données

Nécessite une implémentation manuelle

Intégration à getServerSideProps et getStaticProps

Routage

Utilise une bibliothèque de routage (par exemple, React Router)

Routage basé sur un système de fichiers

Complexité

Plus simple

Configuration prête à l'emploi

Créer une application Next.js

Pour de nombreuses applications React, les étapes sont généralement identiques, mais nous vous recommandons d'utiliser le framework Next.js. Pour des performances élevées et des besoins avancés, ce framework gère un grand nombre de composants qui vous aident à faire évoluer votre application plus efficacement et à optimiser le SEO de votre site React.

Vous devrez générer le modèle à l'aide du terminal pour que tous les détails et les exigences concernant le code soient présents. 

Utilisez le terminal :

npx create-next-app@latest

Vous aurez également besoin de quelques configurations pour poursuivre.

Vous aurez besoin d'instructions concernant les éléments nécessaires, les informations requises (informations sur le serveur ou le client) et l'emplacement de ces éléments. Voici ce à quoi vous pouvez vous attendre dans le build à créer.

"Conçu pour les performances et la vitesse."

Encore une fois, cela peut vous aider à vous assurer que vous disposez des éléments nécessaires pour créer des composants côtés serveur et/ou client.

Maintenant, mettez à jour le code et améliorez la mise en page.

Si vous avez besoin d'informations à ce sujet, consultez cette documentation.

Maintenant que vous avez apporté ces modifications, la configuration est terminée. Autorisez son affichage.

Éléments clés à prendre en compte lors de la création d'une application Next.js

La vitesse de votre site Web est essentielle pour garantir un référencement naturel optimal. JavaScript peut à lui seul ralentir le rendu et avoir un impact négatif sur les performances de recherche. Toutefois, l'utilisation de Next.js peut atténuer ce problème. Privilégiez donc une expérience de chargement rapide et une gestion efficace des données sur votre site. Pour garantir une sécurité robuste et des produits de qualité, il est essentiel d'utiliser avec précaution les données de test, en respectant la confidentialité et les accès.

Routage côté client

La plupart des applications React utilisent une bibliothèque comme react-router-dom pour gérer la navigation. Comme cela se passe dans le navigateur, votre serveur d'hébergement doit être configuré pour la prendre en charge. Cela implique généralement de rediriger toutes les requêtes des pages vers votre fichier racine index.html, ce qui permet à React Router de prendre le relais et d'afficher le composant approprié.

Variables d'environnement

Votre application aura probablement besoin de configurations différentes pour le développement et la production, comme des clés API ou des points de terminaison de base de données. Il est essentiel de les gérer à l'aide de variables d'environnement (par exemple, via des fichiers .env) afin de ne pas exposer d'informations sensibles dans votre code source.

Communication avec l'API backend

Une interface React est responsable de l'UI, mais elle obtient généralement ses données dynamiques à partir d'une API backend. Lors du déploiement, vous devez vous assurer que votre application React connaît l'URL correcte de votre API en production et qu'elle est configurée pour gérer le Cross-Origin Resource Sharing (CORS) si l'API est hébergée dans un autre domaine.


Déployer une application Next.js sur Cloud Run

Cloud Run peut être un bon choix pour déployer une application React si vous souhaitez utiliser un workflow basé sur des conteneurs, qui offre un maximum de cohérence et de portabilité. Pour commencer, consultez le guide de démarrage rapide pour créer et déployer des applications React Next.js sur Cloud Run. 

Étape 1 : Vérifiez votre application

Pour transférer correctement l'application, assurez-vous d'avoir implémenté tous les détails pertinents dans les paramètres de données et de transfert.

Étape 2 : Build suivant, création Docker

En suivant ces étapes, assurez-vous que chaque phase contient tous les détails nécessaires au projet.

# N'installez les dépendances qu'en cas de besoin

FROM node:16-alpine AS deps

# Consultez https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# En cas d'utilisation de turbo, annulez également la mise en commentaire de cette section :

# COPY turbo.json ./

# COPY .gitignore ./


# Ajoutez une variable d'environnement

ENV NEXT_TELEMETRY_DISABLED 1


# La recompilation du hook permet de vérifier ce qui est inclus ou non

RUN npm run build


###############

#### Étape 2 : Image de production ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# Variables d'environnement NEXT_PUBLIC_... lors de la compilation

ENV NODE_ENV production


# Vous ne devez copier next.config.js que si vous utilisez un fichier de configuration personnalisé

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# Consultez les informations de la page https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

# N'installez les dépendances qu'en cas de besoin

FROM node:16-alpine AS deps

# Consultez https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# En cas d'utilisation de turbo, annulez également la mise en commentaire de cette section :

# COPY turbo.json ./

# COPY .gitignore ./


# Ajoutez une variable d'environnement

ENV NEXT_TELEMETRY_DISABLED 1


# La recompilation du hook permet de vérifier ce qui est inclus ou non

RUN npm run build


###############

#### Étape 2 : Image de production ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# Variables d'environnement NEXT_PUBLIC_... lors de la compilation

ENV NODE_ENV production


# Vous ne devez copier next.config.js que si vous utilisez un fichier de configuration personnalisé

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# Consultez les informations de la page https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

Vous devez maintenant procéder au déploiement. Utilisez une plate-forme comme Cloud Build et associez les fichiers de configuration.

Étape 3 : Mettez le cloud de votre côté et utilisez-le pour le déploiement

Cloud Run est la dernière méthode à envisager. Réfléchissez à son utilité et à sa pertinence. Assurez-vous de maîtriser les principaux outils et le code, et de pouvoir les exécuter sans problème.

Déployer une application Next.js sur Firebase

Firebase est également une excellente plate-forme de déploiement. N'oubliez pas ces étapes simples. Prêt à intégrer Next.js à Firebase ? Consultez la documentation complète.

Étape 1 : Préparation pour les paramètres du serveur public

Suivez les configurations requises pour cette image ou ce document (SSL requis) afin que tout fonctionne de manière sécurisée.

Étape 2 : Configuration et installation (CMD)

Découvrez ensuite comment installer et utiliser la CLI Firebase.

npm install -g firebase-tools

Étape 3 : Connectez et configurez le projet

Poursuivez avec "Firebase Init - Hosting".

Vérifiez que l'URL est réécrite et qu'elle est correcte dans la ligne de commande.

Utilisez "no" (non) pour vous assurer qu'il n'y aura aucun problème lors du déploiement.

Relevez vos plus grands défis avec Google Cloud

Les nouveaux clients bénéficient de 300 $ de crédits à dépenser sur Google Cloud.

Bonnes pratiques pour vos tests

Vous aurez besoin d'effectuer des tests locaux, ce qui nécessite le code d'un hôte local.

Après avoir authentifié la CLI, transférez-la vers ce dépôt :

  • gcloud auth configure-docker

Vous importez maintenant :

  • docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
  • Images de conteneurs gcloud à transférer vers le dépôt

Pour obtenir la liste complète des conseils de développement généraux dans Cloud Run, consultez cette documentation.

Passez à l'étape suivante

Profitez de 300 $ de crédits gratuits et de plus de 20 produits Always Free pour commencer à créer des applications sur Google Cloud.

Google Cloud
DocumentationAssistance
Console
Se connecter
  • Accélérez votre transformation numérique
  • Votre entreprise a déjà bien amorcé son processus de transformation numérique ? Vous n'en êtes qu'aux premiers stades ? Dans les deux cas, Google Cloud peut vous aider à relever vos défis les plus complexes.
  • Produits Google Cloud
  • Parcourez plus de 100 produits. Les nouveaux clients bénéficient de 300 $ de crédits gratuits pour exécuter, tester et déployer des charges de travail. Tous les clients peuvent utiliser plus de 25 produits gratuitement, dans les limites mensuelles spécifiées.
  • Faites des économies grâce à notre approche transparente concernant la tarification
  • Le paiement à l'usage de Google Cloud permet de réaliser des économies automatiques basées sur votre utilisation mensuelle et des tarifs réduits pour les ressources prépayées. Contactez-nous dès aujourd'hui afin d'obtenir un devis.
Google Cloud