Um deinen echten FiveM Server einzubinden und Live-Spielerzahlen anzuzeigen, gibt es zwei Methoden:

Methode 1: FiveM API (Empfohlen)

Dein FiveM Server hat eine eingebaute API. Du brauchst:

• Deine Server-IP (z.B. 123.456.789.0)
• Deinen Server-Port (z.B. 30120)

Die API liefert Live-Daten über:

• http://DEINE-IP:PORT/players.json - Liste aller Spieler
• http://DEINE-IP:PORT/info.json - Server-Informationen
• http://DEINE-IP:PORT/dynamic.json - Dynamische Daten (Spielerzahl, etc.)

Methode 2: CFX.re API (Falls Server auf CFX.re registriert)

Wenn dein Server auf cfx.re registriert ist, kannst du die offizielle API nutzen: https://servers-frontend.fivem.net/api/servers/single/YOUR_SERVER_CODE

Lass mich die Server Status Komponente anpassen, damit du einfach deine Server-Daten einbinden kannst:

Perfekt! Ich habe die FiveM Server Integration mit drei verschiedenen Methoden eingebaut. Um deine echten Server-Daten anzuzeigen, musst du jetzt in Vercel die Environment Variables setzen:

In Vercel Dashboard:

1. Gehe zu deinem Projekt → Settings → Environment Variables

2. Füge hinzu:

   • NEXT_PUBLIC_CFX_SERVER_CODE = Dein Server-Code von cfx.re (z.B. "abc123")
   • ODER NEXT_PUBLIC_FIVEM_SERVER_IP = Deine Server IP (z.B. "123.456.789.0")
   • NEXT_PUBLIC_FIVEM_SERVER_PORT = Dein Server Port (z.B. "30120")

Die Komponente versucht automatisch alle drei API-Methoden und zeigt dann die Live-Spielerzahlen an, die alle 30 Sekunden aktualisiert werden.

Perfekt! Du hast alles richtig gemacht. Die Environment Variables sind korrekt eingetragen. Hier ist die Bestätigung und die nächsten Schritte:

Deine Einstellungen sind korrekt!

Du hast alle drei benötigten Variablen richtig eingetragen:

• NEXT_PUBLIC_CFX_SERVER_CODE = cfxk_1Kd0eV2LPEl3kfs273s2P_1U8oMp
• NEXT_PUBLIC_FIVEM_SERVER_IP = 185.254.96.245
• NEXT_PUBLIC_FIVEM_SERVER_PORT = 40120

Nächste Schritte:

1. Speichern

• Klicke unten rechts auf den "Save" Button

2. Neu deployen

• Nach dem Speichern musst du dein Projekt neu deployen
• Gehe zu "Deployments" (im Menü oben)
• Klicke auf die letzte Deployment
• Klicke auf die drei Punkte (⋯) → "Redeploy"
• Oder pushe einfach eine kleine Änderung zu GitHub, dann deployed Vercel automatisch

3. Warten

• Nach 1-2 Minuten ist das neue Deployment fertig
• Die Website lädt die Environment Variables automatisch

4. Überprüfen

• Gehe auf deine Website
• Die Server Status Card sollte jetzt die echten Live-Spielerzahlen anzeigen
• Die Zahlen aktualisieren sich alle 30 Sekunden automatisch

Hinweis: Falls die Spielerzahlen nicht sofort angezeigt werden, öffne die Browser-Konsole (F12) und schau nach Fehlermeldungen. Die Komponente probiert automatisch alle drei API-Methoden durch und nimmt die erste, die funktioniert.

Ist das Deployment abgeschlossen und funktioniert alles?