So installierst du Next.js auf Saplo

Next.js ist heute die erste Wahl, wenn du eine Website oder Anwendung in React erstellst, die schnell laden und in den Suchergebnissen gut abschneiden soll. Serverseitiges Rendering und der App Router machen einen Unterschied, den eine klassische SPA-Anwendung, die nur aus einem statischen Build besteht, nicht leisten kann. Das Problem ist, dass eine solche Anwendung einen laufenden Node.js-Prozess im Hintergrund benötigt, nicht nur ein Verzeichnis mit HTML-Dateien. Daher lässt sie sich auf einem normalen Shared Hosting in der Regel nicht installieren. Bei Saplo kannst du Next.js wie jede andere Anwendung aus dem Katalog installieren, und Saplo startet es sofort als verwalteten Dienst mit automatischem Neustart. Im Folgenden zeigen wir dir, wie du das von Grund auf machst, inklusive der Anbindung deines eigenen Git-Repositorys.

Für wen Next.js bei Saplo geeignet ist

Bevor du mit der Installation beginnst, prüfe, ob es die richtige Wahl für dein Projekt ist:

• Du hast oder baust ein Projekt in Next.js mit App Router - Saplo erkennt die Projektstruktur und startet next start als Dienst, du musst keine pm2- oder systemd-Konfiguration selbst schreiben.
• Du benötigst SSR oder ISR, nicht nur einen statischen Build - Wenn deine Seite vollständig statisch ist, ist ein React- oder Astro-Stack aus demselben App-Katalog günstiger und leichter.
• Du möchtest Deployments mit git push anstelle des manuellen Hochladens von Dateien - Du verbindest das Repository einmal, und jeder Push auf den Produktionszweig erstellt und implementiert automatisch eine neue Version.
• Deine Hosting-Kosten für ein Projekt, das derzeit auf Vercel oder Netlify läuft, steigen - Du migrierst den Code eins zu eins, next.config.* bleibt unverändert, und du zahlst für Box anstelle des Funktionsverbrauchs.

Wenn dein Projekt ein reines Frontend ist, das keine serverseitige Renderung benötigt, sieh dir im App-Katalog den React- oder Astro-Stack an, beide sind leichter und günstiger im Unterhalt.

Anforderungen

Um Next.js auf Saplo zu betreiben, brauchst du:

• Eine Box im Plan L oder höher - Saplo empfiehlt offiziell diesen Plan für Next.js, da serverseitiges Rendering mehr RAM benötigt als eine gewöhnliche statische Seite. Kleinere Pläne reichen nur für sehr geringen Test-Traffic aus.
• Mindestens 512 MB freien RAM und 2 GB Speicherplatz auf der Festplatte nur für den Anwendungsprozess.
• Eine Domain oder Subdomain *.saploapp.pl, die in jedem Plan enthalten ist und unter der die Anwendung läuft.
• Ein Git-Repository auf GitHub, GitLab oder Bitbucket, wenn du automatisches Deployment nutzen möchtest (optional für den Start, du kannst die Anwendung auch als Archiv .zip über das Panel hochladen).
• Eine separate Datenbank benötigst du in der Regel NICHT, es sei denn, deine Anwendung stellt selbst eine Verbindung zu einer her. Saplo schreibt dir das nicht vor.

Schritt-für-Schritt-Installation

1. Gehe im Saplo-Panel zum App-Katalog und wähle Next.js (Kategorie "Frameworks").
2. Wähle eine Box im Box L Plan oder höher sowie den Namen der Anwendung - daraus wird die Standard-Subdomain <name>.saploapp.pl erstellt, deine eigene Domain kannst du jetzt oder später hinzufügen.
3. Bestätige die Installation. Die Engine provisioniert das Modul auf der Box und startet ein Next.js-Standardskelett (entspricht create-next-app), damit sofort etwas unter der Domain zu sehen ist, bevor du deinen eigenen Code deployst.
4. Saplo startet die Anwendung als verwalteten Dienst mit automatischem Neustart, und nginx auf der Box leitet den Traffic von der Domain auf den Port des Next.js-Prozesses.
5. Nach Abschluss der Installation zeigt die Domain aus Schritt 2 eine funktionierende Startseite - ab diesem Zeitpunkt deployst du dein eigenes Projekt darauf.

Eigenen Code per Git bereitstellen

1. In den App-Details findest du den Abschnitt Git / CI-CD. Klicke auf "GitHub verbinden", bestätige die Installation der Anwendung "Saplo Deploy" in deinem Konto oder deiner Organisation und wähle das Repository mit deinem Next.js-Projekt aus.
2. Im Stammverzeichnis des Repositorys muss die Datei saplo.yaml liegen. Du erzeugst sie mit dem Befehl saplo init oder schreibst sie manuell (Beispiel siehe unten).
3. Committe und pushe die Datei saplo.yaml auf den Produktionszweig (standardmäßig main, du kannst dies im Abschnitt branches.production derselben Datei ändern).
4. Jeder weitere git push auf diesen Zweig löst einen automatischen Build und eine Bereitstellung aus. Den Status siehst du im Panel unter dem Reiter Deployments und als grünes oder rotes Tag beim Commit auf GitHub.
5. Sollte der Build oder Healthcheck fehlschlagen, bleibt die vorherige funktionierende Version der Anwendung erhalten. Saplo ersetzt sie nicht durch eine defekte Version.

Beispiel einer minimalen saplo.yaml-Datei für Next.js:

name: my-project
stack: nextjs
runtime:
  node: "22"
build:
  install: npm ci
  command: npm run build
start:
  command: npm start
  port: 3000

Das Pushen dieser Datei sieht genauso aus wie jeder andere Commit:

git add saplo.yaml
git commit -m "add saplo.yaml"
git push origin main

Next.js auf Saplo vs. Alternativen

Häufig gestellte Fragen

Muss ich Git sofort verbinden, oder kann ich ohne beginnen? Du kannst ohne Git beginnen. Die Installation aus dem App-Katalog stellt ein funktionierendes Next.js-Gerüst bereit, und die erste Bereitstellung deines eigenen Codes kannst du durch Hochladen eines .zip-Archivs im Panel vornehmen. Git kannst du jederzeit später verbinden.

Warum wird Box L empfohlen und kein niedrigerer Plan? Weil Server Side Rendering (SSR) den Node.js-Prozess ständig im Speicher hält und jede Anfrage neu beantwortet, im Gegensatz zu einer statischen Seite, die einmal erstellt auf der Festplatte liegt. Kleinere Pläne reichen für Tests aus, aber unter realem Produktions-Traffic fehlt ihnen der notwendige RAM-Puffer.

Was passiert, wenn die Datei saplo.yaml im Repository nicht vorhanden ist? Bei der ersten Bereitstellung ohne diese Datei schlägt der Deploy fehl. Bei nachfolgenden Bereitstellungen, wenn die Datei aus einem bestimmten Commit verschwindet, verwendet Saplo die Konfiguration der letzten erfolgreichen Bereitstellung.

Muss ich den Anwendungsport manuell einstellen? Nein, der Standardport ist 3000, und die meisten Next.js-Projekte erfordern keine Änderung. Wenn deine Anwendung ihn ändert, stell dies im Abschnitt start.port der Datei saplo.yaml ein.

Kann ich mehrere Next.js-Anwendungen nebeneinander auf einer Box haben? Ja, der App-Katalog ermöglicht es, mehrere Module auf einer Box zu hosten, jedes mit einer eigenen Subdomain oder Domain, solange genügend RAM und Speicherplatz für den Plan vorhanden ist.

Next.js auf Saplo richtest du in wenigen Minuten von Grund auf bis zu einer funktionierenden Domain ein, und jedes weitere git push stellt eine neue Version ohne dein Zutun bereit. Wenn du ein bestehendes Projekt von Vercel oder Netlify migrierst und etwas nicht wie erwartet funktioniert, schreib uns, wir helfen dir bei der Auswahl der Konfiguration in saplo.yaml.