Déployer des sites web Next.js au rendu statique sur Azure Static Web Apps (préversion)Deploy static-rendered Next.js websites on Azure Static Web Apps Preview

Ce tutoriel permet d’apprendre à déployer un site web statique généré Next.js sur Azure Static Web Apps.In this tutorial, you learn to deploy a Next.js generated static website to Azure Static Web Apps. Pour commencer, vous apprendrez à créer, configurer et déployer une application Next.js.To begin, you learn to set up, configure, and deploy a Next.js app. Au cours de ce processus, vous apprendrez aussi à gérer les problèmes courants rencontrés lors de la génération de pages statiques avec Next.jsDuring this process, you also learn to deal with common challenges often faced when generating static pages with Next.js

PrérequisPrerequisites

Créer une application Next.jsSet up a Next.js app

Au lieu d’utiliser l’interface CLI Next.js pour créer une application, vous pouvez utiliser un référentiel de démarrage qui comprend une application Next.js existante.Rather than using the Next.js CLI to create an app, you can use a starter repository that includes an existing Next.js app. Ce référentiel contient une application Next.js avec des routages dynamiques, qui met en évidence un problème de déploiement courant.This repository features a Next.js app with dynamic routes, which highlights a common deployment issue. Les routages dynamiques ont besoin d’une configuration de déploiement supplémentaire. Nous verrons cela plus tard.Dynamic routes need an extra deployment configuration which you will learn more about in a moment.

Pour commencer, créez un référentiel sous votre compte GitHub à partir d’un référentiel de modèles.To begin, create a new repository under your GitHub account from a template repository.

  1. Accédez à https://github.com/staticwebdev/nextjs-starter/generateNavigate to https://github.com/staticwebdev/nextjs-starter/generate

  2. Nommez le référentiel nextjs-starterName the repository nextjs-starter

  3. Ensuite, clonez le nouveau référentiel sur votre ordinateur.Next, clone the new repo to your machine. Remplacez <YOUR_GITHUB_ACCOUNT_NAME> par le nom de votre compte.Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your account name.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter
    
  4. Accédez à l’application Next.js qui vient d’être clonée :Navigate to the newly cloned Next.js app:

    cd nextjs-starter
    
  5. Installez des dépendances :Install dependencies:

    npm install
    
  6. Démarrez l’application Next.js dans l’environnement de développement :Start Next.js app in development:

    npm run dev
    

Accédez à http://localhost:3000 pour ouvrir l’application, où le site web suivant devrait s’ouvrir dans votre navigateur favori :Navigate to http://localhost:3000 to open the app, where you should see the following website open in your preferred browser:

Démarrer l’application Next.js

Lorsque vous cliquez sur une infrastructure ou une bibliothèque, vous devez voir une page détaillant des informations sur l’élément sélectionné :When you click on a framework/library, you should see a details page about the selected item:

Page de détails

Générer un site web statique à partir du build Next.jsGenerate a static website from Next.js build

Quand vous générez un site Next.js en utilisant npm run build, l’application est générée comme une application web traditionnelle, et non comme un site statique.When you build a Next.js site using npm run build, the app is built as a traditional web app, not a static site. Pour générer un site statique, utilisez la configuration d’application suivante.To generate a static site, use the following application configuration.

  1. Pour configurer des routages statiques, créez un fichier nommé next.config.js à la racine de votre projet, puis ajoutez le code suivant.To configure static routes, create file named next.config.js at the root of your project and add the following code..

    module.exports = {
      trailingSlash: true,
      exportPathMap: function() {
        return {
          '/': { page: '/' }
        };
      }
    };
    

    Cette configuration mappe / à la page Next.js qui est utilisée pour le routage / et qui est le fichier de la page pages/index.js.This configuration maps / to the Next.js page that is served for the / route, and that is the pages/index.js page file.

  2. Mettez à jour le script de génération du package.json pour générer également un site statique après la génération avec la commande next export :Update the package.json's build script to also generate a static site after building, using the next export command. La commande export génère un site statique.The export command generates a static site.

    "scripts": {
      "dev": "next dev",
      "build": "next build && next export",
    },
    

    Maintenant que cette commande est en place, Static Web Apps exécute le script build chaque fois que vous transmettez (push) une validation (commit).Now with this command in place, Static Web Apps will run the build script every time you push a commit.

  3. Générez un site statique :Generate a static site:

    npm run build
    

    Le site statique est généré et copié dans un dossier out à la racine de votre répertoire de travail.The static site is generated and copied into an out folder at the root of your working directory.

    Notes

    Ce dossier est listé dans le fichier .gitignore, car il doit être généré par CI/CD lors du déploiement.This folder is listed in the .gitignore file because it should be generated by CI/CD when you deploy.

Transmettre votre site web statique à GitHubPush your static website to GitHub

Azure Static Web Apps déploie votre application à partir d’un référentiel GitHub et continue à effectuer cette opération pour chaque validation transmise vers une branche désignée.Azure Static Web Apps deploys your app from a GitHub repository and keeps doing so for every pushed commit to a designated branch. Utilisez les commandes suivantes pour synchroniser vos modifications avec GitHub.Use the following commands sync your changes to GitHub.

  1. Pour indexer tous les fichiers modifiés :Stage all changed files

    git add .
    
  2. Pour valider toutes les modifications :Commit all changes

    git commit -m "Update build config"
    
  3. Pour transmettre vos modifications à GitHub :Push your changes to GitHub.

    git push origin main
    

Déployer votre site web statiqueDeploy your static website

La procédure suivante vous indique comment lier Azure Static Web Apps à l’application que vous venez de transmettre à GitHub.The following steps show how to link the app you just pushed to GitHub to Azure Static Web Apps. Puis, une fois dans Azure, vous pourrez déployer l’application dans un environnement de production.Once in Azure, you can deploy the application to a production environment.

Créer une application statiqueCreate a static app

  1. Accéder au portail AzureNavigate to the Azure portal

  2. Cliquez sur Create a Resource (Créer une ressource).Click Create a Resource

  3. Recherchez Static Web Apps.Search for Static Web Apps

  4. Cliquez sur Static Web Apps (Preview) (Static Web Apps (préversion))Click Static Web Apps (Preview)

  5. Cliquez sur CréerClick Create

  6. Sélectionnez un abonnement dans la liste déroulante Subscription (Abonnement) ou utilisez la valeur par défaut.Select a subscription from the Subscription drop-down list or use the default value.

  7. Cliquez sur le lien New (Nouveau) sous la liste déroulante Resource group (Groupe de ressources).Click the New link below the Resource group drop-down. Dans New resource group name (Nouveau nom de groupe de ressources), tapez mystaticsite, puis cliquez sur OK.In New resource group name, type mystaticsite and click OK

  8. Indiquez ensuite un nom unique pour votre application dans la zone Name (Nom).Provide a globally unique name for your app in the Name text box. Les caractères valides sont a-z, A-Z, 0-9 et -.Valid characters include a-z, A-Z, 0-9, and -. Cette valeur est utilisée comme préfixe d’URL pour votre application statique au format https://<APP_NAME>.azurestaticapps.net.This value is used as the URL prefix for your static app in the format of https://<APP_NAME>.azurestaticapps.net.

  9. Dans la liste déroulante Region (Région), choisissez une région la plus proche de vous.In the Region drop-down, choose a region closest to you.

  10. Dans la liste déroulante SKU, sélectionnez Free (Gratuit).Select Free from the SKU drop-down.

    Création d’application web statique

Ajouter un référentiel GitHubAdd a GitHub repository

Le nouveau compte Static Web Apps doit pouvoir accéder au référentiel avec votre application Next.js. Cela lui permet de déployer automatiquement les validations.The new Static Web Apps account needs access to the repository with your Next.js app so it can automatically deploy commits.

  1. Cliquez sur le bouton Sign in with GitHub (Se connecter avec GitHub).Click the Sign in with GitHub button

  2. Sélectionnez l’organisation sous laquelle vous avez créé le référentiel pour votre projet Next.js. Il peut s’agir de votre nom d’utilisateur GitHub.Select the Organization under which you created the repo for your Next.js project, which may be your GitHub username.

  3. Recherchez et sélectionnez le nom du référentiel que vous avez créé précédemment.Find and select the name of the repository you created earlier.

  4. Choisissez main (principale) comme branche dans la liste déroulante Branch (Branche).Choose main as the branch from the Branch drop-down.

    Connexion à GitHub

Configurer le processus de générationConfigure the build process

Azure Static Web Apps est conçu pour effectuer automatiquement des tâches courantes telles que l’installation de modules NPM et l’exécution de npm run build lors de chaque déploiement.Azure Static Web Apps is built to automatically carry out common tasks like installing npm modules and running npm run build during each deployment. Cependant, vous devez configurer vous-même certains paramètres, tels que le dossier source de l’application et le dossier de destination du build.There are, however, a few settings like the application source folder and the build destination folder that you need to configure manually.

  1. Cliquez sur l’onglet Build pour configurer le dossier de sortie statique.Click on the Build tab to configure the static output folder.

    Onglet Build

  2. Dans la zone de texte App artifact location (Emplacement de l’artefact d’application), tapez out.Type out in the App artifact location text box.

Examiner et créerReview and create

  1. Pour vérifier que les informations sont correctes, cliquez sur le bouton Review + Create (Vérifier + créer).Click the Review + Create button to verify the details are all correct.
  2. Pour démarrer la création de la ressource et la configuration d’une action GitHub pour le déploiement, cliquez sur Create (Créer).Click Create to start the creation of the resource and also provision a GitHub Action for deployment.
  3. Une fois le déploiement terminé, cliquez sur Go to resource (Accéder à la ressource).Once the deployment is completed, click Go to resource
  4. Dans la fenêtre Overview (Présentation), cliquez sur le lien URL pour ouvrir l’application que vous avez déployée.On the Overview window, click the URL link to open your deployed application.

Si le site web ne se charge pas immédiatement, c’est que le workflow GitHub Actions est toujours en cours d’exécution en arrière-plan.If the website does note immediately load, then the background GitHub Actions workflow is still running. Lorsqu’il sera terminé, actualisez votre navigateur pour afficher votre application web.Once the workflow is complete you can then click refresh the browser to view your web app. Si le site web ne se charge pas immédiatement, c’est que le workflow GitHub Actions est toujours en cours d’exécution en arrière-plan.If the website does note immediately load, then the background GitHub Actions workflow is still running. Lorsqu’il sera terminé, actualisez votre navigateur pour afficher votre application web.Once the workflow is complete you can then click refresh the browser to view your web app.

Vous pouvez vérifier l’état des workflow Actions en accédant aux actions de votre référentiel :You can check the status of the Actions workflows by navigating to the Actions for your repository:

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

Synchroniser les modificationsSync changes

Une fois l’application créée, Azure Static Web Apps a créé un fichier de workflow GitHub Actions dans votre référentiel.When you created the app, Azure Static Web Apps created a GitHub Actions workflow file in your repository. Vous devez placer ce fichier dans votre référentiel local pour synchroniser votre historique git.You need to bring this file down to your local repository so your git history is synchronized.

Revenez au terminal et exécutez la commande suivante : git pull origin main.Return to the terminal and run the following command git pull origin main.

Configurer des routages dynamiquesConfigure dynamic routes

Accédez au site qui vient d’être déployé et cliquez sur l’un des logos de l’infrastructure ou de la bibliothèque.Navigate to the newly-deployed site and click on one of the framework or library logos. Au lieu d’obtenir une page détaillant des informations, vous obtenez une page d’erreur 404.Instead of getting a details page, you get a 404 error page.

Erreur 404 sur les routages dynamiques

Cette erreur se produit, car la configuration de l’application fait que Next.js ne génère que la page accueil.The reason for this error is because Next.js only generated the home page based on the application configuration.

Générer des pages statiques à partir de routages dynamiquesGenerate static pages from dynamic routes

  1. Mettez à jour le fichier next.config.js, pour que Next.js utilise une liste de toutes les données disponibles afin de générer des pages statiques pour chaque infrastructure/bibliothèque :Update the next.config.js file so that Next.js uses a list of all available data to generate static pages for each framework/library:

    const data = require('./utils/projectsData');
    
    module.exports = {
      trailingSlash: true,
      exportPathMap: async function () {
        const { projects } = data;
        const paths = {
          '/': { page: '/' },
        };
    
        projects.forEach((project) => {
          paths[`/project/${project.slug}`] = {
            page: '/project/[path]',
            query: { path: project.slug },
          };
        });
    
        return paths;
      },
    };
    

    Notes

    La fonction exportPathMap est asynchrone. Vous pouvez donc effectuer une requête vers un API dans cette fonction, puis utiliser la liste retournée pour générer les chemins d’accès.The exportPathMap function is an async function, so you can make a request to an API in this function and use the returned list to generate the paths.

  2. Transmettez les nouvelles modifications à votre référentiel GitHub, puis patientez quelques minutes pendant que GitHub Actions génère à nouveau votre site.Push the new changes to your GitHub repository and wait for a few minutes while GitHub Actions builds your site again. Une fois la génération terminée, l’erreur 404 disparaît.After the build is complete, the 404 error disappears.

    Résolution de l’erreur 404 sur les routages dynamiques