Playbook: Next.js & Firebase Deployment

Phase 1

Voraussetzungen

Stelle sicher, dass die folgenden Punkte erfüllt sind, bevor du beginnst. Sie sind das Fundament für den gesamten Prozess.

Eine Domain: Deine eigene Adresse im Internet (z.B. `albo.systems`), gekauft bei einem Anbieter wie Namecheap.
Ein Firebase-Projekt: Ein kostenloser Container bei Google, der dein Hosting, deine Datenbanken etc. verwaltet. Erstellt in der Firebase Console.
Ein Next.js-Projekt: Der Quellcode deiner Webseite, idealerweise bereits in einem GitHub Repository.
Lokale Software:
- Node.js: Die Laufzeitumgebung, die benötigt wird, um deine Webseite zu "bauen".
- Firebase CLI: Das Kommandozeilen-Werkzeug, um mit Firebase zu interagieren (npm install -g firebase-tools im Terminal).

Phase 2

Domain mit Firebase Hosting verbinden

Warum dieser Schritt?

Deine Domain ist wie eine Adresse auf einer Landkarte. Dieser Schritt sorgt dafür, dass die Adresse auf das richtige "Haus" zeigt – nämlich auf die Server von Firebase, wo deine Webseite wohnen wird. Das SSL-Zertifikat (https) ist das Türschloss, das die Verbindung sicher macht.

Firebase Konfigurieren: Gehe zum Hosting-Bereich in deinem Firebase-Projekt, klicke auf "Jetzt starten" und dann auf "Benutzerdefinierte Domain hinzufügen". Gib deine Domain ein, um einen TXT-Record für die Verifizierung zu erhalten.
DNS-Einträge setzen: Logge dich bei deinem Domain-Anbieter ein und füge den TXT-Record hinzu. Nach der Verifizierung gibt dir Firebase zwei A-Records. Lösche alle alten A-Records und füge diese beiden hinzu.
Warten und überprüfen: Nach einigen Stunden sollte der Status in Firebase auf "Verbunden" wechseln und ein SSL-Zertifikat automatisch ausgestellt werden.

Phase 3

Lokales Projekt für das Deployment vorbereiten

Warum dieser Schritt?

Dein Next.js-Projekt ist wie ein Bausatz. Bevor es online gehen kann, muss es "gebaut" werden – also in einfaches HTML, CSS und JavaScript umgewandelt werden, das jeder Browser versteht. Diese Schritte konfigurieren den Bausatz so, dass das Ergebnis mit Firebase kompatibel ist.

1. Projekt korrekt klonen

Ein ZIP-Download enthält nicht die notwendige Git-Historie. Klone das Projekt sauber im Terminal, um eine funktionierende lokale Kopie zu erhalten:

git clone <URL deines GitHub-Repos> mein-projekt
cd mein-projekt

2. Konfigurationsdateien anpassen

Passe `next.config.ts` an, um eine statische Seite zu exportieren und die Bildoptimierung für diesen Zweck korrekt einzustellen:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Weist Next.js an, eine statische HTML-Seite zu erstellen
  output: 'export',
  // Verhindert Probleme mit der Bildoptimierung auf statischen Hosts
  images: {
    unoptimized: true,
  },
};
export default nextConfig;

3. Firebase-Konfiguration erstellen

Führe `firebase init hosting` aus und beantworte die Fragen: Wähle dein Projekt, gib als "public directory" **`out`** an (der Ordner der gebauten Seite) und konfiguriere es als "single-page app". Dadurch wird eine `firebase.json` erstellt.

Phase 4

Automatisiertes Deployment mit GitHub Actions

Warum dieser Schritt?

Dies ist das Herzstück der Automatisierung. Anstatt die Seite jedes Mal manuell hochzuladen, richten wir einen "Roboter" (GitHub Action) ein, der bei jeder Code-Änderung die Arbeit für dich erledigt. Der Service-Account ist der Ausweis, den der Roboter braucht, um auf dein Firebase-Projekt zugreifen zu dürfen.

Service-Account-Schlüssel erstellen: Gehe zur Google Cloud Console, erstelle ein neues Dienstkonto, gib ihm die Rolle "Firebase Hosting-Administrator" und lade den zugehörigen JSON-Schlüssel herunter.
GitHub Secret erstellen: Gehe in deinem GitHub-Repo zu "Settings" > "Secrets and variables" > "Actions". Erstelle ein neues Secret mit dem Namen `FIREBASE_SERVICE_ACCOUNT` und füge den gesamten Inhalt der heruntergeladenen JSON-Datei als Wert ein.

GitHub Workflow-Datei erstellen: Erstelle in deinem Repo die Datei `.github/workflows/deploy.yml` und füge den folgenden Code ein:

name: Deploy to Firebase Hosting
on:
  push:
    branches:
      - master # Oder 'main'
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      # Schritt 1: Code herunterladen
      - uses: actions/checkout@v4
      # Schritt 2: Webseite bauen
      - run: npm ci && npm run build
      # Schritt 3: Gebaute Seite auf Firebase hochladen
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '$'
          firebaseServiceAccount: '$'
          channelId: live
          projectId: deine-firebase-projekt-id

Phase 5

Der tägliche Workflow

Das Setup ist abgeschlossen. Dein Workflow ist jetzt extrem einfach und professionell:

Mache deine Code-Änderungen (z.B. in Firebase Studio).
Lade die Änderungen auf GitHub hoch (`git push` oder über die Sync-Funktion deines Editors).
Gehe zum **"Actions"**-Tab in deinem GitHub-Repository und beobachte, wie deine Webseite automatisch gebaut und live gestellt wird. ✅