Déployer des sites web Next.js hybrides sur Azure Static Web Apps

Dans ce tutoriel, vous apprenez à déployer un site web Next.js pour Azure Static Web Apps, en tirant parti de la prise en charge des fonctionnalités de Next.js, comme le rendu côté serveur (SSR, Server-Side Rendering) et les routes d’API.

Prérequis

Fonctionnalités non prises en charge dans la préversion

Pendant la préversion, les fonctionnalités suivantes de Static Web Apps ne sont pas prises en charge pour Next.js avec le rendu côté serveur :

  • Les API utilisant Azure Functions, Azure AppService, Azure Container Apps ou Gestion des API Azure.

  • Le déploiement via l’interface CLI SWA.

  • L’authentification et l’autorisation fournies par Azure Static Web Apps.

    • Au lieu de cela, vous pouvez utiliser la fonctionnalité d’authentification Next.js.
  • Le fichier staticwebapps.config.json.

    • Les fonctionnalités telles que les en-têtes et le routage personnalisés peuvent être contrôlées à l’aide du fichier next.config.js.
  • skip_app_build et skip_api_build ne peuvent pas être utilisées.

  • La taille maximale de l’application Next.js hybride est de 100 Mo. Envisagez d’utiliser des applications Next.js exportées HTML statiques si vos besoins sont supérieurs à 100 Mo.

  • La régénération statique incrémentielle (ISR) ne prend pas en charge la mise en cache des images

Créer une application Next.js

Commencez par initialiser une nouvelle application Next.js.

  1. Initialisez l’application en utilisant npm init. Si vous êtes invité à installer create-next-app, répondez Oui.

    npm init next-app@latest -- --typescript
    
  2. Quand vous êtes invité à donner un nom à l’application, entrez nextjs-app.

  3. Accédez au dossier contenant la nouvelle application :

    cd nextjs-app
    
  4. Démarrez l’application Next.js dans l’environnement de développement :

    npm run dev
    

    Accédez à http://localhost:3000 pour ouvrir l’application, où vous devez voir le site web suivant s’ouvrir dans votre navigateur :

    Capture d’écran d’une application Next.js s’exécutant dans le navigateur.

  5. Arrêtez le serveur de développement en appuyant sur CMD/CTRL+C.

Déployer votre site web statique

La procédure suivante vous indique comment lier votre application Azure Static Web Apps. Puis, une fois dans Azure, vous pourrez déployer l’application dans un environnement de production.

Créer un dépôt GitHub

Avant de déployer sur Azure, vous devez créer un dépôt GitHub et y envoyer (push) l’application.

  1. Accédez à https://github.com/new et nommez-le nextjs-app.

  2. À partir du terminal sur votre machine, initialisez un dépôt git local et commitez vos modifications en utilisant la commande suivante.

    git init && git add -A && git commit -m "initial commit"
    
  3. Ajoutez votre dépôt en tant que dépôt distant et envoyez (push) vos modifications au serveur.

    git remote add origin https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-app && git push -u origin main
    

    Avant d’exécuter cette commande, veillez à remplacer <YOUR_GITHUB_USERNAME> par votre nom d’utilisateur GitHub.

Créer une application web statique

Maintenant que le référentiel est créé, vous pouvez créer une application web statique à partir du Portail Azure.

  1. Accédez au portail Azure.
  2. Sélectionnez Créer une ressource.
  3. Recherchez Static Web Apps.
  4. Sélectionnez Static Web Apps.
  5. Sélectionnez Create (Créer).

Dans la section De base, commencez par configurer votre nouvelle application et liez-la à un référentiel GitHub.

Capture d’écran de l’onglet Informations de base de Static Web Apps dans le portail Azure.

  1. Sélectionnez votre abonnement Azure.
  2. En regard de Groupe de ressources, sélectionnez le lien Créer.
  3. Entrez static-web-apps-test dans la zone de texte.
  4. Sous Détails de l’application web statique, entrez my-first-static-web-app dans la zone de texte.
  5. Sous Azure Functions et détails de la gestion intermédiaire, sélectionnez une région proche de vous.
  6. Sous Détails du déploiement, sélectionnez GitHub.
  7. Sélectionnez le bouton Se connecter avec GitHub et authentifiez-vous auprès de GitHub.

Après vous être connecté à GitHub, entrez les informations relatives au dépôt.

Détails du référentiel

  1. Entrez les valeurs GitHub suivantes.

    Propriété Valeur
    Organisation Sélectionnez l’organisation GitHub appropriée.
    Dépôt Sélectionnez nextjs-app.
    Branche Sélectionnez principal.
  2. Dans la section Détails de la build, sélectionnez Next.js dans les Présélections de la build et conservez les valeurs par défaut.

Examiner et créer

  1. Pour vérifier que les informations sont correctes, sélectionnez le bouton Vérifier + créer.

  2. Pour démarrer la création de l’application web statique App Service et le provisionnement d’une action GitHub pour le déploiement, sélectionnez Créer.

  3. Une fois le déploiement terminé, sélectionnez Accéder à la ressource.

  4. Dans la fenêtre Vue d’ensemble, cliquez sur le lien URL pour ouvrir l’application que vous avez déployée.

Si le site web n’est pas chargé immédiatement, la build est toujours en cours d’exécution.

Pour vérifier l’état du workflow Actions, accédez au tableau de bord Actions pour votre référentiel :

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

Une fois le workflow terminé, actualisez votre navigateur pour afficher votre application web.

Désormais, toutes les modifications apportées à la branche main démarrent une nouvelle build et un nouveau déploiement de votre site web.

Synchroniser les modifications

Une fois l’application créée, Azure Static Web Apps a créé un fichier GitHub Actions dans votre référentiel. Synchronisez avec le serveur en extrayant la dernière version de votre référentiel local.

Revenez au terminal et exécutez la commande suivante : git pull origin main.

Ajouter des données rendues par le serveur

Pour insérer des données rendues par le serveur de données dans une page Next.js, vous devez d’abord exporter une fonction spéciale.

  1. Ouvrez le fichier pages/index.ts et ajoutez une fonction exportée nommée getServerSideProps.

    export async function getServerSideProps() {
        const data = JSON.stringify({ time: new Date() });
        return { props: { data } };
    }
    
  2. Mettez à jour le composant Home pour recevoir les données rendues par le serveur.

    export default function Home({ data }: { data: { time: string } }) {
        const serverData = JSON.parse(data);
    
        return (
            <div className={styles.container}>
                <Head>
                    <title>Create Next App</title>
                    <meta name="description" content="Generated by create next app" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <main className={styles.main}>
                    <h1 className={styles.title}>
                        Welcome to <a href="https://nextjs.org">Next.js! The time is {serverData.time}</a>
                    </h1>
                // snip
    
  3. Commitez et poussez (push) les changements.

Une fois les modifications envoyées, un nouveau flux de travail GitHub Actions commence et les modifications sont déployées sur votre site.

Ajout d’une route d’API

Next.js a des routes d’API qui sont une alternative à Azure Functions pour créer des API pour l’application cliente Next.js.

Commencez par ajouter une route d’API.

  1. Créez un fichier pages/api/time.ts.

  2. Ajoutez une fonction de gestionnaire pour retourner des données à partir de l’API.

    import type { NextApiRequest, NextApiResponse } from "next";
    
    export default async function handler(req: NextApiRequest, res: NextApiResponse) {
        res.status(200).json({ time: new Date() });
    }
    
  3. Ouvrez pages/index.ts pour ajouter un appel à l’API et affichez le résultat.

    export default function Home({ data }: { data: { time: string } }) {
        const [time, setTime] = useState<Date | null>(null);
        useEffect(() => {
            fetch('/api/time')
            .then(res => res.json())
            .then(json => setTime(new Date(json.time)));
        }, []);
        return (
            <div className={styles.container}>
                <Head>
                    <title>Create Next App</title>
                    <meta name="description" content="Generated by create next app" />
                    <link rel="icon" href="/favicon.ico" />
                </Head>
    
                <main className={styles.main}>
                    <h1 className={styles.title}>
                    Welcome to{" "}
                    <a href="https://nextjs.org">
                        Next.js!{" "}
                        {time &&
                        `The time is ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`}
                    </a>
                    </h1>
                    // snip
    }
    
  4. Le résultat de la route d’API s’affiche sur la page.

Afficher la sortie de la route d’API

Nettoyer les ressources

Si vous ne prévoyez pas de continuer à utiliser cette application, vous pouvez supprimer l’instance Azure Static Web Apps en effectuant les étapes suivantes :

  1. Ouvrez le portail Azure.
  2. Recherchez my-nextjs-group dans la barre de recherche supérieure.
  3. Sélectionnez le nom du groupe.
  4. Sélectionnez le bouton Supprimer.
  5. Sélectionnez Oui pour confirmer la suppression.