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
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:
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!
