Next.js und Vercel

Vercel wird von den Entwicklern von Next.js betrieben und bietet First-Class-Support für Next.js. Wenn Sie Ihre Next.js-App auf Vercel bereitstellen, passiert standardmäßig Folgendes:

• Seiten, die Statische Generierung verwenden, sowie Assets (JS, CSS, Bilder, Schriftarten etc.) werden automatisch über das Vercel CDN ausgeliefert, das extrem schnell ist.
• Seiten mit Server-Side Rendering und API-Routen werden automatisch zu isolierten Serverless Functions. Dies ermöglicht eine unbegrenzte Skalierung von Seitenrendering und API-Anfragen.

Vercel bietet viele weitere Funktionen, wie zum Beispiel:

• Benutzerdefinierte Domains: Nach der Bereitstellung auf Vercel können Sie Ihrer Next.js-App eine benutzerdefinierte Domain zuweisen. Lesen Sie dazu unsere Dokumentation.

• Umgebungsvariablen: Sie können auf Vercel auch Umgebungsvariablen festlegen. Weitere Informationen finden Sie in unserer Dokumentation. Diese Variablen können Sie dann in Ihrer Next.js-App verwenden.

• Automatisches HTTPS: HTTPS ist standardmäßig aktiviert (auch für benutzerdefinierte Domains) und erfordert keine zusätzliche Konfiguration. SSL-Zertifikate werden automatisch erneuert.

Mehr über die Plattform erfahren Sie in der Vercel-Dokumentation.

Vorschau-Bereitstellung bei jedem Push

Die folgenden Schritte sind optional – Sie können sie ausprobieren oder einfach durchlesen.

Nach der Bereitstellung auf Vercel können Sie Folgendes versuchen:

• Erstellen Sie einen neuen Branch in Ihrer App.
• Nehmen Sie Änderungen vor und pushen Sie diese zu GitHub.
• Erstellen Sie einen neuen Pull Request (GitHub-Hilfeseite).

Auf der Pull-Request-Seite sollten Sie einen Kommentar des vercel-Bots sehen.

Klicken Sie auf die Vorschau-URL in diesem Kommentar. Sie sollten die von Ihnen vorgenommenen Änderungen sehen.

Bei einem offenen Pull Request erstellt Vercel automatisch eine Vorschau-Bereitstellung für diesen Branch bei jedem Push. Die Vorschau-URL zeigt immer auf die neueste Vorschau-Bereitstellung.

Sie können diese Vorschau-URL mit Ihren Teamkollegen teilen und sofort Feedback erhalten.

Wenn die Vorschau-Bereitstellung zufriedenstellend aussieht, können Sie sie in main mergen. Dadurch erstellt Vercel automatisch eine Produktionsbereitstellung.

Entwickeln, Vorschau, Veröffentlichen

Wir haben gerade den Workflow durchlaufen, den wir DPS nennen: Develop (Entwickeln), Preview (Vorschau) und Ship (Veröffentlichen).

• Entwickeln: Wir haben Code in Next.js geschrieben und den Next.js-Entwicklungsserver genutzt, um von dessen Hot-Reloading-Funktion zu profitieren.
• Vorschau: Wir haben Änderungen in einen GitHub-Branch gepusht, und Vercel hat eine Vorschau-Bereitstellung erstellt, die über eine URL verfügbar ist. Diese Vorschau-URL können wir zur Feedback-Einholung teilen. Neben Code-Reviews können Sie auch Deployment-Vorschauen durchführen.
• Veröffentlichen: Wir haben den Pull Request in main gemerged, um in die Produktion zu gehen.

Wir empfehlen dringend, diesen Workflow bei der Entwicklung von Next.js-Apps zu verwenden – er hilft Ihnen, Ihre App schneller zu iterieren.