Schritte zum Bereitstellen Ihrer React Next.js-App mit Github-Seiten

Die Bereitstellung einer Next.js-App auf GitHub Pages kann aufgrund der statischen Natur von GitHub Pages und der dynamischen Funktionen von Next.js etwas schwierig sein. In diesem Artikel werde ich Sie durch die Schritte für eine erfolgreiche Bereitstellung führen.

Voraussetzungen

• Ein GitHub-Konto
• Node.js und npm auf Ihrem Computer installiert
• Ein Next.js-Projekt, das zur Bereitstellung bereit ist

Schritt 1: gh-pages installieren

npm install gh-pages --save-dev

Schritt 2: next.config.mjs aktualisieren

Als nächstes müssen Sie Ihre Datei next.config.js (oder next.config.mjs) aktualisieren, um den Basispfad und das Asset-Präfix korrekt zu verarbeiten.

const isProd = process.env.NODE_ENV === 'production';
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: true, // Disable default image optimization
  },
  assetPrefix: isProd ? '/your-repository-name/' : '',
  basePath: isProd ? '/your-repository-name' : '',
  output: 'export'
};

export default nextConfig;

isProd prüft, ob die Umgebungsvariable NODE_ENV auf „Produktion“ gesetzt ist. Wenn ja, ist isProd wahr; andernfalls ist es falsch.
Bedingtes assetPrefix und basePath werden nur dann auf Ihren Repository-Namen gesetzt, wenn isProd wahr ist. Andernfalls werden sie für die lokale Entwicklung auf eine leere Zeichenfolge gesetzt.
Die Option images.unoptimized ist auf true gesetzt, um die standardmäßige Bildoptimierung zu deaktivieren, die nicht mit statischen Exporten kompatibel ist.

Schritt 3: package.json aktualisieren

Aktualisieren Sie Ihre package.json, um das Homepage-Feld und die Bereitstellungsskripts einzuschließen.

"homepage": "https://<your-github-username>.github.io/<your-repo-name>",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d out"
  },

Ersetzen Sie und durch Ihren GitHub-Benutzernamen und Repository-Namen.

Schritt 4: Stellen Sie Ihre App bereit

Führen Sie NPM Run Predeploy und NPM Run Deploy aus.

Diese Befehle werden:

• Erstellen Sie Ihr Projekt.
• Exportieren Sie es in das Out-Verzeichnis.
• Stellen Sie es im gh-pages-Zweig auf GitHub bereit. Schieben Sie Ihre Arbeit vor dem nächsten Schritt in Ihren GitHub-Zweig

Schritt 5: GitHub-Seiten konfigurieren

Gehen Sie zu Ihrem Repository auf GitHub.
Navigieren Sie zu Einstellungen > Seiten.
Wählen Sie unter Quelle den Zweig gh-pages aus.
Speichern Sie die Einstellungen.
Fügen Sie die .nojekyll-Datei manuell im Stammverzeichnis des gh-pages-Zweigs auf GitHub hinzu. Erfahren Sie hier mehr darüber.

Schritt 6: Bereitstellung überprüfen

Öffnen Sie nach der Bereitstellung Ihre GitHub-Seiten-URL (z. B. https://.github.io/), um zu überprüfen, ob Ihre App live ist.

Und voilà!

Sie können unten gerne Fragen oder Kommentare hinterlassen. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSchritte zum Bereitstellen Ihrer React Next.js-App mit Github-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!