Eine Website für deinen FiveM Server erstellen

Die meisten FiveM Communities starten mit einer Discord Einladung und einer Tebex Seite und schieben die Website so lange auf, bis jemand fragt, wo eigentlich die Regeln stehen. Diese Anleitung ist die kurze Fassung davon, diese Website zu bauen: Vorlage konfigurieren, auf deinen Server zeigen lassen, eigene Seiten schreiben, veröffentlichen. Beim ersten Mal dauert das etwa eine Stunde, und an keiner Stelle musst du React schreiben.

Die Schritte unten verwenden RPWebsite, also die Vorlage, die diese Seite verkauft. Wo ein Schritt eher über FiveM als über diese Vorlage handelt, ist das gekennzeichnet, damit die Anleitung auch dann nützlich bleibt, wenn du deine Seite anders baust.

Was du vorher brauchst

Vier Dinge, und nur die ersten beiden sind wirklich zwingend.

Node.js 20 oder neuer, und pnpm. Die Vorlage ist eine Next.js Anwendung. node --version sollte v20 oder höher ausgeben.
Eine Domain. Sie muss noch nirgendwo hinzeigen, aber die Seite muss ihre eigene Adresse schon beim Build kennen, also entscheide dich jetzt.
Deinen cfx.re Join Code, wenn du die Live Spielerzahl und einen funktionierenden Beitreten Button willst. Das sind die sechs Zeichen in cfx.re/join/xxxxxx, und du kannst sie auch in der F8 Konsole im Spiel ablesen.
Einen Ort zum Veröffentlichen. Vercel ist der Weg des geringsten Widerstands und hat einen kostenlosen Tarif, der für eine Community Seite reicht. Alles, was next start ausführt, geht genauso.

Du brauchst keine Datenbank, kein CMS, kein Login System und kein Backend. Die Seite liest den Status deines Servers zur Laufzeit aus einer öffentlichen API und alles andere aus Dateien im Repository.

Installieren und lokal starten

Entpacke die Vorlage und führe dann im Ordner aus:

pnpm install
cp .env.example .env.local
pnpm dev

Öffne http://localhost:3000. Du siehst eine vollständige Seite mit Platzhalterinhalten: Startseite, Regeln, FAQ, News und Rechtsseiten, in vier Sprachen.

Lass pnpm dev für den Rest dieser Anleitung in diesem Terminal laufen. Es lädt beim Bearbeiten neu, jede Änderung unten ist also in ein bis zwei Sekunden sichtbar.

Die Seite auf deinen FiveM Server zeigen lassen

Öffne .env.local, die Datei, die du gerade kopiert hast. Zwei Werte sind jetzt wichtig.

NEXT_PUBLIC_SITE_URL=https://deine-domain.example
NEXT_PUBLIC_CFX_JOIN_CODE=abc123

NEXT_PUBLIC_SITE_URL ist die öffentliche Adresse der fertigen Seite. Jede absolute URL wird daraus gebaut: der Canonical Link, die hreflang Tags, die Sitemap, die Vorschaukarte für soziale Netzwerke. Es ist der eine Wert, ohne den pnpm build sich weigert, und das ist Absicht. Eine Seite, die Google erzählt, sie wohne auf localhost, ist schlimmer als eine Seite, die nicht baut.

NEXT_PUBLIC_CFX_JOIN_CODE versorgt sowohl den Live Status Bereich als auch den Beitreten Button. Speichere die Datei, starte pnpm dev neu, damit die neuen Variablen gelesen werden, und der Status Bereich sollte deine echte Spielerzahl zeigen.

Wenn dort steht, dein Server sei offline, obwohl er offensichtlich läuft, spring zum letzten Abschnitt.

Die Identität deines Servers setzen

Öffne src/config/site.ts. Hier wird die Vorlage konfiguriert, und es ist ein einfaches TypeScript Objekt mit Kommentaren an jedem Feld. Die, die am ersten Tag wichtig sind:

name ist der Name deines Servers, den Browsertab, Kopfzeile und Social Card gemeinsam lesen.
platform ist fivem oder ragemp. Es entscheidet, welcher Status Adapter läuft und was der Beitreten Button tut.
theme ist noir, crimson oder azure. Ein unbekannter Wert lässt den Build absichtlich scheitern, denn ein Tippfehler in einem Hosting Dashboard bleibt sonst unsichtbar, bis jemand die falschen Farben screenshotet.
features enthält die Schalter für ganze Seiten. Schalte ab, was du nicht pflegen wirst. Eine leere News Seite ist schlimmer als gar keine News Seite.
legal enthält deine Betreiberangaben. Wer eine Community Seite gewerblich betreibt, muss sie in aller Regel veröffentlichen, und leer gelassen wird hier gar nichts ausgegeben.

Eigene Seiten schreiben

Zwei Verzeichnisse enthalten alles, was ein Besucher liest.

messages/de.json enthält den Oberflächentext: Überschriften, Buttonbeschriftungen, Einleitungen. Es gibt eine Datei pro Sprache. Ein Schlüssel, der in einer Sprache existiert und in einer anderen nicht, ist ein Build Fehler statt eines stillen Fallbacks, die vier Dateien bleiben also von selbst im Gleichschritt.

content/de/ enthält die langen Seiten als Markdown: deine Regeln, dein FAQ, deine News Beiträge, dein Impressum und deine Datenschutzerklärung. Eine Datei anzulegen veröffentlicht eine Seite. Es gibt keine Route zu registrieren und keinen Konfigurationseintrag zu merken, denn wo eine Seite in der Navigation landet, steht in ihrem eigenen Frontmatter.

Fang mit content/de/rules.mdx an. Das ist die Seite, die neue Spieler tatsächlich lesen, und der Platzhaltertext darin ist nicht dein Regelwerk.

Veröffentlichen

Führe vor dem Veröffentlichen die Prüfung aus, die auch die CI ausführt:

pnpm check

Das baut, typprüft und lintet, in dieser Reihenfolge, weil next build die Routentypen erzeugt, gegen die TypeScript die Seiten danach prüft. Wenn das durchläuft, ist die Seite veröffentlichbar.

Auf Vercel: Repository importieren, dieselben Variablen, die du in .env.local gesetzt hast, in den Projekteinstellungen eintragen, veröffentlichen. Es gibt keinen Build Schritt außer next build und keinen Dienst einzurichten.

Auf einem VPS, Coolify, Docker oder Railway: alles, was next start ausführt, funktioniert identisch. Setze die Umgebungsvariablen im Dashboard deines Hosters, statt .env.local einzuchecken.

Eine Sache vorweg, damit du nicht danach suchst: statischer Export wird so, wie die Vorlage ausgeliefert wird, nicht unterstützt. Bei jedem Aufruf läuft ein Proxy, der die Sprache des Besuchers auflöst, und ein statischer Export hat keine Request Phase. Die README der Vorlage beschreibt das vierstufige Rezept, um trotzdem statisch zu werden, und was du dafür aufgibst: die erzeugte Social Card, den RAGE:MP Lookup Helfer und die Bildoptimierung.

Wenn die Spielerzahl offline anzeigt

Das ist die häufigste Supportfrage, und sie hat meistens eine von drei Ursachen.

Der Join Code ist falsch oder fehlt. Prüfe ihn gegen cfx.re/join/xxxxxx für deinen Server. Der Code unterscheidet Groß und Kleinschreibung.

Dein Server lehnt die Anfrage ab. FiveMs Einstellung sv_requestParanoia sorgt ab 2 dafür, dass die eingebauten JSON Endpunkte jeden abweisen, auch deine eigene Website. Die Lösung ist nicht, sie herunterzusetzen. Richte stattdessen die Status Ressource ein, die in integrations/fivem-status/ mitgeliefert wird, und zeig mit der Seite darauf:

CUSTOM_STATUS_URL=http://dein-server:30120/fivem-status/?token=dein-geheimnis

Über diesen Weg bekommst du außerdem den Tagesspitzenwert, den die Cfx API überhaupt nicht liefern kann.

Du versuchst es mit txAdmin. txAdmin liefert keine öffentliche REST API, und der eine umgebungsgeschützte Endpunkt meldet Hostmetriken hinter dem Adminport statt Spieler. Die Ressource oben ist der unterstützte Weg.

Wenn die Zahl lokal stimmt und in Produktion nicht, prüfe, ob die Umgebungsvariable im Dashboard deines Hosters wirklich gesetzt ist. .env.local wird nicht mit veröffentlicht, und das ist Absicht.