Comment déployer une application Next.js

Le déploiement d’une application Next.js consiste à rendre votre application web Next.js accessible sur Internet pour que les utilisateurs du monde entier puissent interagir avec elle.

Alors que plusieurs options de déploiement sont disponibles, la plateforme Container as a Service (CaaS) de Back4app offre plusieurs avantages. Ces avantages en font un choix incontournable pour tout développeur cherchant à déployer son application web en quelques étapes simples.

Dans cet article, vous allez construire une application Next.js et apprendre comment vous pouvez héberger et déployer cette application en utilisant le service de conteneurisation de Back4app.

Principaux enseignements

• Vous apprendrez à utiliser le modèle Container as a Service pour déployer rapidement et efficacement votre application web Next.js.

• Vous découvrirez les points forts de Next.js tels que le rendu côté serveur, le découpage automatique du code, le routage intégré et la génération de sites statiques qui améliorent l’expérience de l’utilisateur.

• Vous comprendrez les limites potentielles de Next.js telles que sa courbe d’apprentissage, son écosystème limité, la complexité du rendu côté serveur et la flexibilité limitée du routage.

Qu’est-ce que Next.js ?

Next.js est un framework open-source étendu au-dessus de la bibliothèque React pour générer des applications web. Avec Next.js, vous pouvez facilement construire des applications React rendues côté serveur (SSR) et générées statiquement qui sont performantes pour vos besoins.

Il a été créé par Vercel (anciennement connu sous le nom de Zeit) en 2016. Ces dernières années, Next.js a gagné beaucoup de popularité en raison de sa facilité d’utilisation et de ses fonctionnalités puissantes.

Avantages de Next.js

Next.js offre plusieurs avantages qui en font un choix populaire pour le développement web. Voici quelques-uns de ces avantages :

Rendu côté serveur

Le framework Next.js permet le rendu côté serveur pour ses applications web. Le rendu côté serveur permet aux pages d’être pré-rendues sur le serveur avant d’être envoyées au client sous forme de code HTML. Il permet une meilleure optimisation des moteurs de recherche (SEO).

Lorsque vous utilisez le rendu côté serveur, vos pages sont rendues sur le serveur avant d’être envoyées au client, ce qui a pour effet d’augmenter le temps de chargement des pages. Cela est particulièrement avantageux pour les utilisateurs dont les connexions ou les appareils sont plus lents.

En outre, le rendu côté serveur permet de récupérer facilement les données des API ou des bases de données avant de rendre la page.

Fractionnement automatique du code

Le découpage du code se réfère à la technique de décomposition d’une application JavaScript et de tout son code de construction en plus petits morceaux. Next.js divise automatiquement le code en fonction des itinéraires de la page.

La fonction de division automatique du code de Next.js permet d’accélérer le chargement initial des pages. Elle réduit également la quantité de JavaScript envoyée au client, ce qui améliore les performances et l’expérience de l’utilisateur.

Routage intégré

Le système de routage intégré de Next.js est un avantage significatif du framework. Avec le système de routage intégré, il est facile de définir des itinéraires et de naviguer entre les pages. Next.js supporte à la fois le routage côté client et côté serveur.

Ce système de routage prend en charge le routage dynamique, ce qui permet d’améliorer la productivité des développeurs et les performances des applications, et d’offrir une expérience utilisateur fluide et efficace.

Routes API

Les applications Next.js sont livrées avec des routes API par défaut qui permettent aux développeurs de créer des points d’extrémité API sans serveur directement dans leurs applications. Les routes API sont une fonctionnalité puissante de Next.js qui offre plusieurs avantages pour la construction d’applications web.

Ces avantages permettent notamment aux développeurs de créer des fonctions sans serveur, de définir et d’organiser des points d’extrémité d’API et de récupérer des données pendant le rendu côté serveur. Les routes éliminent le besoin d’un serveur dorsal séparé. Elles prennent également en charge les API REST et GraphQL.

Next.js utilise les routes API pour gérer efficacement les requêtes API, ce qui facilite la création d’applications évolutives, performantes et respectueuses de l’optimisation des moteurs de recherche.

Génération de sites statiques

La génération de sites statiques est un avantage clé du framework Next.js. Next.js utilise la génération de sites statiques pour pré-rendre les pages au moment de la construction et les servir en tant que fichiers statiques. Cette fonctionnalité garantit des temps de chargement de page rapides en pré-rendant chaque page dans des fichiers HTML.

Les sites statiques sont très favorables au référencement et ont des vecteurs d’attaque réduits, ce qui les rend plus sûrs. Les sites statiques générés par Next.js sont intrinsèquement évolutifs, car ils peuvent gérer des charges de trafic élevées sans solliciter l’infrastructure du serveur.

Next.js permet la prise en charge hors ligne des sites statiques, de sorte que les utilisateurs peuvent continuer à naviguer et à accéder aux pages précédemment visitées sans connexion internet.

Limites de Next.js

Bien que Next.js soit un framework puissant et populaire pour construire des applications React rendues côté serveur, voici quelques limitations dont vous devez être conscient :

Courbe d’apprentissage

Next.js introduit des concepts et des conventions supplémentaires qui ne sont pas familiers au développement React traditionnel. Passer à la construction avec Next.js peut nécessiter du temps pour comprendre et s’adapter à son architecture et à ses fonctionnalités spécifiques.

Next.js offre une gamme d’options de configuration qui peuvent être personnalisées en fonction des exigences du projet. Avec ses outils, ses bibliothèques et ses options de plugins, vous devez prendre le temps de vous familiariser avec l’écosystème Next.js.

Écosystème limité

Next.js est un framework relativement nouveau par rapport aux frameworks/librairies établis comme React et Angular. Par conséquent, son écosystème est encore en pleine croissance et à ses débuts. Il n’a pas la même étendue de bibliothèques et de plugins que les frameworks plus établis.

Il se peut que vous deviez vous appuyer sur des logiciels communautaires ou élaborer des solutions personnalisées pour répondre à des besoins spécifiques.

Complexité du rendu côté serveur

Bien que le rendu côté serveur soit une fonctionnalité puissante de Next.js, il peut également introduire de la complexité dans le processus de développement.

La plupart du temps, il faut beaucoup plus de temps pour l’apprendre et le mettre en œuvre. L’utilisation du rendu côté serveur peut entraîner des erreurs de rendu côté serveur ou des incohérences entre le rendu côté serveur et le rendu côté client.

Il est préférable d’être prudent lors de la mise en œuvre de ce rendu. Vous devez être en mesure de gérer efficacement la récupération des données et l’état de l’application, car le serveur et le client doivent synchroniser leurs états.

Flexibilité de routage limitée

Next.js dispose d’un système de routage intégré qui suit une approche de routage basée sur les fichiers. Cela vise à simplifier le routage dans de nombreux cas. Cependant, il peut ne pas fournir le même niveau de flexibilité que des bibliothèques de routage plus avancées.

Personnaliser le comportement du routage au-delà des conventions par défaut peut nécessiter des solutions de contournement supplémentaires, qui ne sont pas toujours pratiques.

Options de déploiement de Next.js

Différentes options de déploiement sont disponibles pour les applications Next.js, y compris les conteneurs en tant que service (CaaS) et l’infrastructure en tant que service (IaaS).

Vous devez savoir quelles sont ces options, comment elles fonctionnent et comment elles se comparent les unes aux autres pour s’adapter au mieux à votre application Next.js.

Infrastructure en tant que service (IaaS)

L’IaaS est un modèle d’informatique en nuage qui fournit des ressources informatiques virtualisées sur l’internet. En utilisant l’IaaS, les développeurs peuvent déployer et gérer leurs applications sur des machines virtuelles (VM) hébergées par un fournisseur d’informatique en nuage.

Le déploiement d’une application Next.js sur une plateforme IaaS offre de nombreux avantages, notamment en termes de contrôle et de flexibilité. Les plateformes IaaS sont également rentables puisqu’elles suivent un programme de paiement à l’utilisation. Cela signifie que vous êtes facturé en fonction des ressources que votre application finit par utiliser.

Voici quelques plateformes IaaS populaires que vous pouvez utiliser pour déployer vos applications Next.js :

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Conteneur en tant que service (CaaS)

CaaS est un modèle d’informatique en nuage similaire à une plateforme IaaS. Cependant, en plus de fournir des ressources informatiques, ils offrent un environnement entièrement géré pour le déploiement et la gestion d’applications conteneurisées.

Cela signifie qu’il y a peu de configuration et de travail pour gérer le fonctionnement de l’application. Cela signifie également qu’il y a très peu de contrôle sur les personnalisations.

Lors du déploiement d’une application Next.js en tant que conteneur, le code de l’application, le runtime et les dépendances sont regroupés dans une image de conteneur. Cette image peut ensuite être déployée et exécutée sur une plateforme CaaS.

Voici quelques plateformes CaaS populaires sur lesquelles vous pouvez déployer vos applications Next.js :

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

Les plateformes CaaS simplifient le déploiement. Elles améliorent également l’évolutivité, la portabilité et la sécurité de vos applications. Elles font abstraction de la gestion de l’infrastructure et fournissent une orchestration et une mise à l’échelle intégrées.

Construire et déployer une application Next.js sur Back4App

Dans cette section, nous allons discuter de ce qu’il faut faire pour construire une application web en utilisant le framework Next.js et déployer l’application sur la plateforme Back4app en utilisant le service de conteneur Back4app.

Vous apprendrez à naviguer sur la plateforme et à utiliser le service de conteneur pour rendre votre application web accessible à travers les serveurs de Back4app. Après avoir lu cette section, vous saurez comment déployer une application Next.js.

Qu’est-ce que Back4app Containers ?

La plateforme Back4app CaaS est une plateforme qui vous fournit un modèle de service basé sur le cloud, vous permettant de gérer et de déployer des conteneurs et des applications sur ces conteneurs.

Les conteneurs Back4App sont une fonctionnalité puissante de la plateforme Back4App qui vous fournit un environnement flexible, évolutif et sécurisé pour exécuter vos applications.

Ces conteneurs prennent en charge plusieurs langages de programmation tels que PHP, Python, Node.js, etc. Certains développeurs estiment qu’il s’agit d’une excellente plateforme d’hébergement gratuite pour Next.js.

Les conteneurs de Back4app peuvent être automatiquement mis à l’échelle pour répondre à vos besoins. Chaque conteneur est isolé des autres, ce qui garantit la protection des données de votre application. Les conteneurs s’intègrent facilement à l’écosystème Back4App.

Cela vous permet de connecter facilement vos conteneurs à d’autres services Back4App, tels que les bases de données et les fonctions cloud.

Introduction du projet

Dans ce tutoriel, vous allez construire une application de base en utilisant Next.js. Cette application récupérera des conseils aléatoires à partir d’une API externe en utilisant l’API fetch. L’application affichera ensuite les conseils sur l’interface de l’application web que vous allez construire.

Vous pouvez passer de la construction de l’application Next.js au déploiement de l’application sur Back4app. Vous trouverez le code source final de l’application dans ce dépôt GitHub.

Conditions préalables

Pour suivre ce tutoriel et déployer votre application Next.js sur Back4app, vous devez satisfaire les pré-requis suivants.

Assurez-vous que vous avez :

• Compréhension des concepts de la bibliothèque React
• Expérience avec Docker, y compris l’installation de Docker
• Familiarité avec Node.js et NPM
• Git installé sur votre ordinateur et un compte GitHub.

Coder votre application Next.js

Pour créer l’échafaudage pour l’application Next.js, exécutez la commande suivante dans votre terminal node.js :

npx create-next-app@latest

En exécutant la commande ci-dessus, vous obtiendrez une série d’invites affichées dans votre terminal. Ces invites sont destinées à configurer votre application Next.js.

Les invites seront similaires à cette capture d’écran du terminal.

Next.js configure votre application pour qu’elle corresponde à vos réponses. Vous n’aurez pas besoin d’App Router et de Tailwind CSS dans cette application. Sélectionnez No pour ces options.

Lorsque votre application est créée, commencez à construire l’interface.

Tout d’abord, ajoutez les styles globaux suivants au fichier globals.css:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

Vous trouverez le fichier globals.css dans le dossier styles du répertoire src. Après avoir ajouté les styles globaux, pour les appliquer à votre application, importez le fichier globals.css dans votre fichier _app.tsx dans le répertoire pages.

Avant d’importer le fichier globals.css dans le fichier _app.tsx, vous devez d’abord créer un composant de mise en page pour définir la mise en page de votre application.

Pour ce faire, créez un dossier de composants dans le répertoire src et un fichier Layout.tsx dans ce dossier. Dans le fichier Layout.tsx, écrivez le code suivant :

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

Le bloc de code ci-dessus définit un composant Layout. Dans ce composant, vous importez vos styles du fichier Home.module.css et la fonction Comforter du module next/font/google.

À l’aide de la fonction Comforter, vous configurez la police comforter et l’appliquez à l’élément h1 de votre en-tête en définissant la propriété className à comforter.className.

L’expression props.children rendra les composants enfants à l’intérieur du composant Layout.

Vous devez également définir votre style d’en-tête dans le fichier Home.module.css et les autres styles nécessaires.

Par exemple :

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Importez maintenant le fichier global.css et le composant Layout dans le fichier _app.tsx et intégrez votre application dans le composant Layout:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Vous avez défini la présentation de votre application. Ensuite, vous pouvez récupérer l’avis de l’API et l’afficher dans l’application. Pour ce faire, vous utiliserez le fichier index.tsx dans le répertoire pages.

Dans le fichier index.tsx, remplacez le code existant par le code suivant :

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

Le bloc de code définit la page d’accueil. Il importe la bibliothèque React, le module Home.css pour le style et la police Google Montserrat de la bibliothèque de polices Next.js.

Le hook useEffect est un outil puissant qui vous permet d’effectuer des effets de bord dans les composants React. Dans cette application, vous avez utilisé le hook useEffect pour récupérer les conseils de votre API. L’avis récupéré de l’API est ensuite mis à l’état d’avis.

Le crochet useEffect sera exécuté initialement lors du rendu du composant, puis à chaque fois que la valeur de l’état de comptage changera. Cela est dû au fait que vous avez défini l’état de comptage comme valeur du tableau de dépendance.

Lorsque vous cliquez sur le bouton de génération, la fonction handleClick s’exécute et incrémente l’état de comptage de 1. Cela entraîne l’exécution du crochet useEffect, la récupération de nouveaux conseils de l’API et la mise à jour de l’état des conseils. Chaque fois que vous cliquez sur le bouton “Générer”, un nouvel avis s’affiche à l’écran.

Votre application Next.js est terminée !

Pour démarrer l’application, exécutez la commande suivante :

npm run dev

L’application doit tourner sur votre serveur local http://localhost:3000.

En cliquant sur le bouton “Générer”, vous récupérez et affichez un nouvel avis. Il incrémentera également le “numéro de conseil” de 1 à chaque fois.

Dockeriser l’application

Avant de déployer l’application Next.js sur Back4app, vous devez dockeriser l’application. Dockeriser une application permet d’empaqueter votre application et ses dépendances dans des conteneurs Docker.

Les conteneurs Docker constituent un moyen léger, isolé et portable d’exécuter vos applications avec les bibliothèques et configurations nécessaires.

Cela facilite le déploiement de vos applications sur n’importe quelle machine sur laquelle Docker est installé. La dockérisation de votre application permet de simplifier le déploiement, d’améliorer la portabilité, l’évolutivité, etc.

Vous trouverez ci-dessous un guide étape par étape sur la façon dont vous pouvez dockeriser votre application Next.js :

Etape 1 : Créer un Dockerfile à la racine de votre projet
Créez un nouveau fichier nommé Dockerfile dans le répertoire racine de votre projet Next.js. Ce fichier contiendra les instructions pour que Docker construise une image de votre application.

Étape 2 : Définir votre Dockerfile
Dans le fichier Docker, entrez le code suivant :

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Ce fichier Docker effectue les opérations suivantes :

• Démarre à partir du runtime officiel Node.js 14.
• Définit le répertoire de travail à /app.
• Copie package.json et package-lock.json dans l’image Docker et installe les dépendances.
• Copie le reste du code de l’application dans l’image Docker.
• Construit l’application Next.js.
• Expose le port 3000 pour l’application.
• Définit la commande de démarrage de l’application.

Ces spécifications décrivent l’environnement dans lequel votre application fonctionnera.

Étape 3 : Construire l’image Docker

Exécutez la commande suivante dans votre terminal pour construire l’image Docker :

docker build -t advice-generator .

Vous pouvez remplacer “advice-generator” par le nom que vous souhaitez donner à votre image Docker.

Exécuter le conteneur Docker

Une fois l’image construite, vous pouvez l’exécuter en tant que conteneur à l’aide de la commande suivante :

docker run -p 3000:3000 advice-generator 

Cette commande permet de faire correspondre le port 3000 du conteneur Docker au port 3000 de votre machine.

En suivant ces étapes, votre application Next.js sera exécutée dans un conteneur Docker. Vous pouvez y accéder en naviguant vers http://localhost:3000 dans votre navigateur web.

Pousser votre application Next.js sur GitHub

Après avoir dockerisé l’application, vous devez pousser l’application vers un dépôt GitHub. Pour pousser l’application vers un dépôt GitHub, créez un nouveau dépôt dans votre compte GitHub et exécutez les commandes suivantes dans le répertoire de votre application sur votre terminal :

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Cette commande permet d’initialiser un nouveau dépôt Git dans le répertoire courant.
• git add: Cette commande ajoute tous les fichiers de votre répertoire actuel à la zone de transit.
• git remote add origin : Cette commande lie votre dépôt local à un dépôt distant. Remplacez le par l’URL de votre dépôt distant.
• git commit -m ‘initial commit’: Cette commande prend toutes les modifications écrites dans la zone de transit et les stocke dans un nouveau commit.
• git branch -M main: Cette commande crée une nouvelle branche nommée main et y bascule.
• git push -u origin main: Cette commande pousse les commits de votre branche principale vers le dépôt distant origin.

Déployer l’application sur Back4app

Pour déployer votre application sur Back4app, vous devez d’abord créer un compte Back4app. Pour ce faire, suivez les étapes suivantes :

1. Visitez le site web de Back4app.
2. Cliquez sur le bouton “S’inscrire”.
3. Remplissez le formulaire d’inscription et envoyez-le.

Si vous avez déjà un compte Back4app, vous pouvez simplement vous connecter et passer à l’étape suivante.

Après avoir créé un compte, connectez-vous à votre compte et cliquez sur “Nouvelle application”

bouton. Ce bouton se trouve dans le coin supérieur droit de l’écran.

Un écran similaire à celui présenté ci-dessous s’affiche.

Sélectionnez l’option Conteneur en tant que service pour créer et déployer votre application à l’aide de conteneurs. La construction ne devrait pas prendre longtemps. Une fois que c’est terminé, reliez votre compte GitHub à l’application CaaS construite.

Sélectionnez ensuite le dépôt que vous souhaitez déployer à partir de votre compte GitHub dans l’application Back4app.

Maintenant que vous avez sélectionné un référentiel, il ne vous reste plus qu’à déployer l’application. Avant cela, vous devez lui donner un nom et configurer son déploiement.

Cliquez sur le bouton “Create App” pour déployer votre application.

Félicitations, vous avez déployé avec succès votre application sur Back4app. Vous pouvez accéder à l’application sur le web en naviguant vers le lien fourni par Back4app sur l’écran ci-dessus.

Conclusion

Next.js est un framework open-source permettant de construire des applications React rendues côté serveur (SSR). Il offre également de nombreux avantages, notamment la génération de sites statiques, le fractionnement automatique du code, le routage intégré, les routes API, etc. Ces avantages font de Next.js un framework puissant.

Déployer une application Next.js en utilisant le CaaS de Back4pp simplifie le processus de développement. La plateforme CaaS de Back4app est une solution évolutive, sécurisée et rentable pour le déploiement d’applications Next.js.

Son interface conviviale, ses mises à jour en temps réel, la prise en charge des API GraphQL et REST, les sauvegardes automatisées et l’environnement sans serveur en font un choix parfait pour les développeurs.

FAQ