Vous devez publier votre application Next.js sur les pages GitHub

Récemment, j'ai réorganisé ma version open source de 2048 Game et j'ai décidé de la migrer vers Next.js et React 18. Le jeu existant a été publié sur les pages GitHub sans aucun domaine personnalisé. J'envisageais de déployer sur Vercel mais cela perdrait le trafic organique de Google qui s'est accumulé au cours des 3 dernières années. Cela signifie que je devais expérimenter le déploiement sur les pages GitHub et aujourd'hui, je partagerai ce que j'ai appris.

Si vous souhaitez voir le résultat final avant de lire l'intégralité de l'article, vous pouvez vérifiez-le ici .

Introduction rapide

J'utiliserai deux fonctionnalités GitHub : GitHub Actions et GitHub Pages. Si vous n'en avez pas entendu parler, laissez-moi vous expliquer rapidement :

Les actions GitHub sont comme de petits workflows qui peuvent effectuer des tâches sur vos projets. C'est comme avoir un assistant qui fait automatiquement les choses que vous lui dites de faire. Vous pouvez utiliser des actions pour exécuter des tests, pour des contrôles de qualité ou pour créer votre application. Dans mon cas, j'ai utilisé ces workflows pour automatiser le pipeline de déploiement.

Que sont les pages GitHub ? Considérez-les comme une option d'hébergement Web pour les développeurs et les projets open source. Vous pouvez utiliser les pages GitHub pour partager vos portefeuilles, héberger des sites Web de vos projets open source ou simplement publier vos projets préférés comme le mien.

Maintenant, commençons.

Étape 1 – Activez les pages GitHub pour votre référentiel

Pour publier notre application Next.js, je devais activer les pages GitHub pour le référentiel du projet. Vous pouvez trouver dans l'onglet Paramètres (1 dans l'image ci-dessous), puis sélectionner Pages dans le menu de gauche (2), et trouver le menu déroulant qui nous permet de spécifier la source de déploiement (3).

Vous devrez maintenant modifier la source de déploiement en GitHub Actions .

Désormais, votre projet dispose d'une page dédiée. Il vous suffit d'y publier du contenu.

Étape 2 – Configurer le processus de construction Next.js

Avant de déployer l'application Next.js, il est important de modifier la sortie de build. Par défaut, Next.js utilise Node.js pour exécuter l'application, ce qui est incompatible avec les pages GitHub.

Les pages GitHub sont conçues pour héberger des fichiers statiques, ce qui signifie que nous ne pouvons y publier que du HTML, CSS, JavaScript (et autres fichiers statiques). Nous devrons donc activer la génération de pages statiques dans Next.js.

Pour ce faire, vous allez changer le mode de sortie pour export dans next.config.js :

 /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig;

Maintenant, après avoir exécuté next build , Next.js générera un dossier out contenant des actifs statiques pour votre application. Dans les prochaines étapes, nous prendrons ce répertoire et le téléchargerons sur les pages GitHub.

Étape 3 – Corriger les images manquantes

Les Pages sont publiées sous un sous-chemin d'un domaine et prennent le nom du projet comme sous-chemin. Déroutant? Jetons un coup d'œil à une URL de mon jeu 2048 à titre d'exemple :

 https://mateuszsokola.github.io/2048-in-react/

Github a créé un sous-domaine dédié pour mon utilisateur appelé mateuszsokola (mon nom d'utilisateur) . Mais le projet est publié sous le sous-chemin, qui dans mon cas est /2048-in-react . Malheureusement, cela entraînera des problèmes d'images et de styles manquants.

Par défaut, Next.js mappe tous les actifs statiques du domaine. Cela signifie que le fichier favicon.ico sera résolu en mateuszsokola.github.io/favicon.ico au lieu de mateuszsokola.github.io/2048-in-react/favicon.icon .

Pour résoudre ce problème, nous pouvons configurer un préfixe de chemin en ajoutant basePath dans le fichier next.config.js :

 /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig;

Dans mon cas, il s'agit /2048-in-react puisque mon projet s'appelle 2048-in-react .
N'oubliez pas d'inclure le ( / ) au début du répertoire du projet.

Étape 4 – Créer des actions Github

Next.js produit des artefacts de déploiement qui peuvent être publiés sur les pages GitHub. Il est maintenant temps de configurer Github Actions pour les publier. J'ai décidé le déploiement en deux actions distinctes pour favoriser la réutilisabilité :

L'action setup-node configurera Node.js et installera toutes les dépendances. Avoir une action autonome pour la configuration de Node.js me permettra de la réutiliser pour d'autres pipelines. Par exemple, j'ai des pipelines qui s'exécutent linter de code et essais . Vous souhaitez probablement également effectuer plusieurs actions.

L'action publish créera des artefacts Next.js et les publiera sur les pages GitHub chaque fois que nous fusionnerons le code dans la branche main .

Permettez-moi de commencer par expliquer l'action du setup-node . Voici le code :

 # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci

Important : Créez ce fichier dans le répertoire .github/workflows/setup-node de votre projet. Assurez-vous de l'appeler action.yml .

À quoi sert cet extrait ?

1. Cela crée une action composite . L'action composite vous permet de regrouper plusieurs étapes de flux de travail en une seule action. Si ce n'est pas clair, vous le comprendrez une fois que nous passerons à la deuxième action.

2. Il crée un nouvel environnement de construction à l'aide de Node.js 20 et installe les dépendances du projet.

Ce sont les parties les plus importantes de l’action du setup-node . Passons maintenant à l'action publish :

 # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4

Créez ce fichier dans le répertoire .github/workflows de votre projet. Vous pouvez nommer le fichier comme vous le souhaitez – j’ai appelé le mien publish.yml .

Ce qu'il fait?

1. Cette action est déclenchée à chaque fois que le nouveau code est poussé ou fusionné dans la branche main .

2. Il utilise l'action setup-node pour configurer l'environnement. L'action composite que j'ai créée dans l'action précédente. Vous savez désormais comment inclure vos actions composite dans d'autres actions.

3. L'action comporte deux étapes : dans la première étape, l'application Next.js est en cours de création. Dans la deuxième étape, les artefacts de la première étape sont téléchargés sur les pages GitHub.

Ce sont les aspects les plus importants du pipeline de déploiement. J'ai ignoré les autorisations et la configuration de la concurrence car elles restent inchangées pour tous les déploiements de pages GitHub.

Désormais, l’action est prête à être utilisée.

S'engager et pousser

Après avoir validé et poussé vos modifications vers la branche main , GitHub lancera automatiquement le déploiement sur les pages GitHub.

Pour inspecter le processus, accédez à l'onglet Actions (1 dans l'image ci-dessous) et sélectionnez l'action de publication sur les pages Github dans le menu de gauche (2) . Vous verrez tous vos déploiements à l'écran (ils sont appelés workflows ).

Sélectionnez maintenant le premier de ces flux de travail et vous verrez un déploiement en deux étapes. Lors de la phase de déploiement , vous pouvez trouver un lien vers votre site Web sur les pages GitHub.

Conclusion

Les pages Github ne suffisent pas pour héberger des sites Web avec des millions de vues. Mais c'est un choix parfait pour héberger votre portfolio ou un site Web pour votre projet open source.

Il existe de nombreuses options gratuites pour héberger nos sites Web comme Vercel, mais je voulais vous montrer une alternative. GitHub Pages est conçu pour les développeurs et je pense que chaque développeur devrait le connaître.

Si cet article vous a aidé, partagez-le sur vos réseaux sociaux.

Et où déployez-vous votre application ? Est-ce toujours Vercel ?

Apprenez React 18 et Next.js

Vous ne vous sentez pas fort avec React ou Next.js ? Rejoignez mon cours en ligne sur Udemy ! Je vais vous aider à démarrer avec React en créant un jeu 2048 entièrement fonctionnel. Je pense que créer des jeux rend l'apprentissage plus amusant et que vous aurez quelque chose de sympa à montrer à vos amis.

👇👇👇👇

🧑‍🎓 Rejoignez Cours React 18 et Next.js sur Udemy – 80% de réduction seulement cette semaine.