Sie sollten Ihre Next.js-App auf GitHub-Seiten veröffentlichen

Kürzlich habe ich meine Open-Source-Version von 2048 Game überarbeitet und beschlossen, sie auf Next.js und React 18 zu migrieren. Das vorhandene Spiel wurde ohne benutzerdefinierte Domain auf GitHub Pages veröffentlicht. Ich habe über eine Bereitstellung auf Vercel nachgedacht, aber es würde den organischen Traffic von Google verlieren, der in den letzten drei Jahren aufgebaut wurde. Das bedeutet, dass ich mit der Bereitstellung auf GitHub Pages experimentieren musste und heute werde ich teilen, was ich gelernt habe.

Wenn Sie das Endergebnis sehen möchten, bevor Sie den gesamten Artikel lesen, können Sie dies tun Überprüfen Sie es hier .

Kurze Einführung

Ich werde zwei GitHub-Funktionen verwenden – GitHub Actions und GitHub Pages. Wenn Sie noch nie davon gehört haben, lassen Sie es mich kurz erklären:

GitHub-Aktionen sind wie kleine Workflows, die Aufgaben in Ihren Projekten erledigen können. Es ist, als hätte man einen Helfer, der automatisch die Dinge tut, die man ihm sagt. Sie können Aktionen zum Ausführen von Tests, für Qualitätsprüfungen oder zum Erstellen Ihrer Anwendung verwenden. In meinem Fall habe ich diese Workflows verwendet, um die Bereitstellungspipeline zu automatisieren.

Was sind GitHub-Seiten ? Betrachten Sie sie als eine Webhosting-Option für Entwickler und Open-Source-Projekte. Sie können GitHub Pages verwenden, um Ihre Portfolios zu teilen, Websites Ihrer Open-Source-Projekte zu hosten oder einfach Ihre Lieblingsprojekte wie meines zu veröffentlichen.

Jetzt fangen wir an.

Schritt 1 – Aktivieren Sie GitHub-Seiten für Ihr Repository

Um unsere Next.js-Anwendung zu veröffentlichen, musste ich GitHub Pages für das Repository des Projekts aktivieren. Sie finden die Registerkarte „Einstellungen“ (1 im Bild unten), wählen dann „Seiten“ aus dem Menü auf der linken Seite (2) und finden das Dropdown-Menü, mit dem wir die Bereitstellungsquelle angeben können (3).

Jetzt müssen Sie die Bereitstellungsquelle in GitHub Actions ändern.

Von nun an verfügt Ihr Projekt über eine eigene Seite. Sie müssen dort lediglich Inhalte veröffentlichen.

Schritt 2 – Konfigurieren Sie den Next.js-Build-Prozess

Vor der Bereitstellung der Next.js-App ist es wichtig, die Build-Ausgabe zu ändern. Standardmäßig verwendet Next.js Node.js, um die Anwendung auszuführen, und dies ist nicht mit GitHub Pages kompatibel.

GitHub Pages ist für das Hosten statischer Dateien konzipiert, was bedeutet, dass wir dort nur HTML, CSS, JavaScript (und andere statische Dateien) veröffentlichen können. Daher müssen wir die statische Seitengenerierung in Next.js aktivieren.

Dazu ändern Sie den Ausgabemodus in export in next.config.js :

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

Nach der Ausführung next build generiert Next.js nun einen out -Ordner mit statischen Assets für Ihre App. In den nächsten Schritten werden wir dieses Verzeichnis nehmen und es auf GitHub Pages hochladen.

Schritt 3 – Fehlende Bilder beheben

Die Seiten werden unter einem Unterpfad einer Domain veröffentlicht und verwenden den Projektnamen als Unterpfad. Verwirrend? Werfen wir als Beispiel einen kurzen Blick auf eine URL meines 2048-Spiels:

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

Github hat für meinen Benutzer eine eigene Subdomain namens mateuszsokola (mein Benutzername) erstellt. Aber das Projekt wird unter dem Unterpfad veröffentlicht, der in meinem Fall /2048-in-react ist. Leider führt dies zu Problemen mit fehlenden Bildern und Stilen.

Standardmäßig ordnet Next.js alle statischen Assets der Domäne zu. Dies bedeutet, dass die Datei favicon.ico in mateuszsokola.github.io/favicon.ico statt in mateuszsokola.github.io/2048-in-react/favicon.icon aufgelöst wird.

Um dies zu beheben, können wir ein Pfadpräfix einrichten, indem wir basePath in die Datei next.config.js einfügen:

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

In meinem Fall ist es /2048-in-react , da mein Projekt 2048-in-react heißt.
Denken Sie daran, das ( / ) am Anfang des Projektverzeichnisses einzufügen .

Schritt 4 – Github-Aktionen erstellen

Next.js erstellt Bereitstellungsartefakte, die auf GitHub-Seiten veröffentlicht werden können. Jetzt ist es an der Zeit, Github Actions einzurichten, um sie zu veröffentlichen. Ich habe die Bereitstellung in zwei separate Aktionen unterteilt, um die Wiederverwendbarkeit zu fördern:

Die Aktion setup-node richtet Node.js ein und installiert alle Abhängigkeiten. Wenn ich eine eigenständige Aktion für das Node.js-Setup habe, kann ich sie für andere Pipelines wiederverwenden. Ich habe zum Beispiel Pipelines, die laufen Code-Linter Und Tests . Wahrscheinlich möchten Sie auch mehr als eine Aktion haben.

Die publish erstellt Next.js-Artefakte und veröffentlicht sie jedes Mal auf GitHub-Seiten, wenn wir Code in den main einbinden.

Lassen Sie mich zunächst die Aktion setup-node erläutern. Hier ist der 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

Wichtig : Erstellen Sie diese Datei im Verzeichnis .github/workflows/setup-node in Ihrem Projekt. Stellen Sie sicher, dass Sie es action.yml nennen.

Was macht dieses Snippet?

1. Es wird eine composite Aktion erstellt. Mit der composite können Sie mehrere Workflow-Schritte in einer einzigen Aktion bündeln. Wenn es nicht klar ist, werden Sie es verstehen, sobald wir mit der zweiten Aktion beginnen.

2. Es erstellt eine neue Build-Umgebung mit Node.js 20 und installiert Projektabhängigkeiten.

Dies sind die wichtigsten Teile der setup-node -Aktion. Kommen wir nun zur 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

Erstellen Sie diese Datei im Verzeichnis .github/workflows in Ihrem Projekt. Sie können die Datei nach Belieben benennen – ich habe meine publish.yml genannt.

Was es macht?

1. Diese Aktion wird jedes Mal ausgelöst, wenn der neue Code in den main gepusht oder zusammengeführt wird.

2. Es verwendet die Aktion setup-node um die Umgebung einzurichten. Die composite Aktion, die ich in der vorherigen Aktion erstellt habe. Jetzt wissen Sie, wie Sie Ihre composite Aktionen in andere Aktionen einbinden.

3. Die Aktion besteht aus zwei Phasen: In der ersten Phase wird die Next.js-App erstellt. In der zweiten Phase werden die Artefakte aus der ersten Phase auf GitHub-Seiten hochgeladen.

Dies sind die wichtigsten Aspekte der Bereitstellungspipeline. Ich habe die Einrichtung der Berechtigungen und der Parallelität übersprungen, da sie für alle GitHub Pages-Bereitstellungen unverändert bleiben.

Jetzt ist die Aktion einsatzbereit.

Commit und Push

Nachdem Sie Ihre Änderungen festgeschrieben und in den main übertragen haben, wird GitHub die Bereitstellung automatisch auf GitHub Pages hochfahren.

Um den Prozess zu überprüfen, navigieren Sie zur Registerkarte „Aktionen “ (1 im Bild unten) und wählen Sie die Aktion „Publish-to-github-pages“ aus dem Menü auf der linken Seite (2) aus . Auf dem Bildschirm werden alle Ihre Bereitstellungen angezeigt (sie werden als Workflows bezeichnet).

Wählen Sie nun den ersten dieser Workflows aus und Sie sehen eine zweistufige Bereitstellung. In der Bereitstellungsphase finden Sie auf GitHub Pages einen Link zu Ihrer Website.

Abschluss

Github Pages reicht nicht aus, um Websites mit Millionen Aufrufen zu hosten. Aber es ist eine perfekte Wahl, um Ihr Portfolio oder eine Website für Ihr Open-Source-Projekt zu hosten.

Es gibt viele kostenlose Optionen zum Hosten unserer Websites, wie z. B. Vercel, aber ich wollte Ihnen eine Alternative zeigen. GitHub Pages wurde für Entwickler entwickelt und ich denke, jeder Entwickler sollte damit vertraut sein.

Wenn Ihnen dieser Artikel geholfen hat, teilen Sie ihn bitte in Ihren sozialen Medien.

Und wo stellen Sie Ihre Anwendung bereit? Ist es immer Vercel?

Lernen Sie React 18 und Next.js

Du fühlst dich mit React oder Next.js nicht stark? Nehmen Sie an meinem Online-Kurs auf Udemy teil! Ich helfe Ihnen beim Einstieg in React, indem ich ein voll funktionsfähiges 2048-Spiel erstelle. Ich glaube, dass das Erstellen von Spielen das Lernen unterhaltsamer macht und Sie Ihren Freunden etwas Cooles zeigen können.

👇👇👇👇

🧑‍🎓 Machen Sie mit React 18 und Next.js-Kurs auf Udemy – 80 % RABATT nur diese Woche.