Anleitung zum Erstellen und Bereitstellen einer Next.js-App
Die Entwicklung einer Next.js-Anwendung ist nur der erste Schritt. Der nächste wichtige Schritt ist die Bereitstellung. Dabei wird Ihre Anwendung für Nutzer im gesamten Internet verfügbar gemacht. Eine effektive Bereitstellungsstrategie ist entscheidend für die Leistung, Skalierbarkeit und Zuverlässigkeit Ihrer Anwendung. In dieser Anleitung erfahren Sie, wie Sie Ihre Next.js-Anwendung erfolgreich bereitstellen.
Was ist das Next.js-Framework?
Next.js ist ein React-Framework, das auf React aufbaut und Funktionen hinzufügt, die das Erstellen und automatische Optimieren von produktionsreifen Websites erleichtern.
Einfach gesagt ist Next.js ein Framework, mit dem Sie moderne Apps mit React erstellen können. Es bietet Serverunterstützung, optimierte Images und Komponenten, die schnelle Ergebnisse bei geringer Größe der übermittelten Dateien ermöglichen.
Unterschiede zwischen React (Standard) und Next.js
Beide Elemente sehen ähnlich aus und führen JavaScript aus, aber es gibt große Unterschiede in dem, was sie tun und welche Funktionen sie haben.
Feature | React (Standard) | Next.js |
SEO-Freundlichkeit | Kann eine Herausforderung sein | SEO-freundlich |
Leistung beim ersten Laden | Langsamer | Schneller |
Datenabruf | Manuelle Implementierung erforderlich | Integrierte Unterstützung für getServerSideProps und getStaticProps |
E-Mail-Routing | Verwendet eine Routing-Bibliothek (z. B. React Router) | Dateisystembasiertes Routing |
Komplexität | Einfacher | Mehr vorkonfigurierte Elemente |
React (Standard)
Next.js
SEO-Freundlichkeit
Kann eine Herausforderung sein
SEO-freundlich
Leistung beim ersten Laden
Langsamer
Schneller
Datenabruf
Manuelle Implementierung erforderlich
Integrierte Unterstützung für getServerSideProps und getStaticProps
E-Mail-Routing
Verwendet eine Routing-Bibliothek (z. B. React Router)
Dateisystembasiertes Routing
Komplexität
Einfacher
Mehr vorkonfigurierte Elemente
Next.js-App erstellen
Bei vielen React-Apps sind die Schritte im Allgemeinen gleich. Dennoch empfehlen wir die Verwendung des Next.js-Frameworks. Im Fall hoher Leistung und hohen Anforderungen verwaltet dieses Framework viele Komponenten, die dazu beitragen, Ihre App effizienter zu skalieren und die SEO Ihrer React-Website zu optimieren.
Schritt 1: Projekt starten
Sie müssen die Vorlage über das Terminal generieren, damit alle Details und Codeanforderungen vorhanden sind.
Terminal verwenden:
npx create-next-app@latest
Außerdem benötigen Sie einige Konfigurationen.
Schritt 2: Projektdateien definieren oder ändern
Sie werden Anleitungen bezüglich der erforderlichen Dinge, der benötigten Informationen (Server- oder Clientinformationen) und der Standorte dieser Elemente haben wollen. Das dürfen Sie im zu erstellenden Build erwarten.
„Hier geht es um Leistung und Geschwindigkeit.“
Schritt 3: Platzierung neuer Daten prüfen
Das kann Ihnen helfen, die Teile bereitzuhalten, die Sie für server- und/oder clientseitige Komponenten benötigen.
Schritt 4: Server wieder einschalten
Aktualisieren Sie nun den Code und gestalten Sie das Layout ansprechend.
Informationen dazu finden Sie in dieser Dokumentation.
Schritt 5: Neuen Code veröffentlichen
Nachdem Sie diese Änderungen vorgenommen haben, ist die Einrichtung abgeschlossen. Lassen Sie es rendern.
Wichtige Überlegungen beim Erstellen einer Next.js-App
Für eine bestmögliche Suchmaschinenoptimierung ist die Geschwindigkeit Ihrer Website entscheidend. JavaScript kann das Rendering verlangsamen und sich negativ auf die Suchleistung auswirken. Mit Next.js lässt sich dieses Problem jedoch beheben. Deshalb sollten Sie auf Ihrer Website schnelle Ladezeiten und ein effizientes Datenmanagement priorisieren. Für robuste Sicherheit und hochwertige Produkte ist die gewissenhafte Nutzung von Testdaten erforderlich, wobei Datenschutz und Zugriffsbeschränkungen zu beachten sind.
Clientseitiges Routing
Clientseitiges Routing
Die meisten React-Apps verwenden eine Bibliothek wie react-router-dom, um die Navigation zu verwalten. Da dies im Browser geschieht, muss Ihr Hosting-Server entsprechend konfiguriert sein. Das bedeutet in der Regel, dass alle Seitenanfragen an die Stammdatei index.html weitergeleitet werden, sodass React Router darauf die richtige Komponente anzeigen kann.
Umgebungsvariablen
Umgebungsvariablen
Ihre Anwendung benötigt wahrscheinlich unterschiedliche Konfigurationen für Entwicklung und Produktion, z. B. API-Schlüssel oder Datenbank-Endpunkte. Es ist wichtig, diese mit Umgebungsvariablen zu verwalten (z. B. über .env-Dateien), damit Sie keine sensiblen Informationen in Ihrem Quellcode offenlegen.
Backend-API-Kommunikation
Backend-API-Kommunikation
Ein React-Frontend ist für die Benutzeroberfläche zuständig, bezieht seine dynamischen Daten aber in der Regel von einer Backend-API. Beim Deployment müssen Sie dafür sorgen, dass Ihre React-Anwendung die korrekte URL Ihrer Produktions-API kennt und für Cross-Origin Resource Sharing (CORS) konfiguriert ist, falls die API in einer anderen Domain gehostet wird.
Next.js-Anwendung in Cloud Run bereitstellen
Cloud Run kann eine gute Wahl für die Bereitstellung einer React-App sein, wenn Sie einen containerbasierten Workflow nutzen möchten, der maximale Konsistenz und Übertragbarkeit bietet. In der Kurzanleitung erfahren Sie, wie Sie Next.js React-Apps in Cloud Run erstellen und bereitstellen.
Schritt 1: Anwendung prüfen
Für eine korrekte Übertragung. Achten Sie darauf, dass alle relevanten Details der Daten- und Übertragungseinstellungen implementiert wurden.
Schritt 2: Nächster Build; Docker-Erstellung
Gehen Sie dabei so vor, dass jede Phase alle für das Projekt erforderlichen Details enthält.
# Installieren Sie Abhängigkeiten nur, wenn dies erforderlich ist FROM-Knoten: 16-alpine AS deps # Check https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8 117330a1dc25ab#alpine RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json package-lock.json ./ RUN npm ci # Falls Sie Turbo nutzen, müssen Sie auch aus diesem Bereich die Kommentarzeichen entfernen: # COPY turbo.json ./ # COPY .gitignore ./ # Umgebungsvariable hinzufügen ENV NEXT_TELEMETRY_DISABLED 1 # Die Neuerstellung des Hook ermöglicht es zu prüfen, was eingebunden werden soll und was nicht RUN npm run build ############### #### Phase 2: Produktions-Image ### ############### FROM node:16-alpine AS runner WORKDIR /app # NEXT_PUBLIC_... Umgebungsvariablen während der Build-Dauer. ENV NODE_ENV Produktion # Sie müssen next.config.js nur kopieren, wenn Sie eine benutzerdefinierte Konfigurationsdatei verwenden COPY --from=builder /app/next.config.js ./ COPY --from=builder /app/public ./public COPY --from=builder /app/.next ./.next COPY --from=builder /app/node_modules ./node_modules COPY --from=builder /app/package.json ./package.json # Details finden sich hier: https://cloud.google.com/run/docs /configuring/traffic ENV PORT 8080 EXPOSE 8080 CMD ["npm", "start"] |
# Installieren Sie Abhängigkeiten nur, wenn dies erforderlich ist
FROM-Knoten: 16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8
117330a1dc25ab#alpine
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
# Falls Sie Turbo nutzen, müssen Sie auch aus diesem Bereich die Kommentarzeichen entfernen:
# COPY turbo.json ./
# COPY .gitignore ./
# Umgebungsvariable hinzufügen
ENV NEXT_TELEMETRY_DISABLED 1
# Die Neuerstellung des Hook ermöglicht es zu prüfen, was eingebunden werden soll und was nicht
RUN npm run build
###############
#### Phase 2: Produktions-Image ###
###############
FROM node:16-alpine AS runner
WORKDIR /app
# NEXT_PUBLIC_... Umgebungsvariablen während der Build-Dauer.
ENV NODE_ENV Produktion
# Sie müssen next.config.js nur kopieren, wenn Sie eine benutzerdefinierte Konfigurationsdatei verwenden
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
# Details finden sich hier: https://cloud.google.com/run/docs
/configuring/traffic
ENV PORT 8080
EXPOSE 8080
CMD ["npm", "start"]
Jetzt müssen Sie die Bereitstellung vornehmen. Verwenden Sie eine Plattform wie Cloud Build und verbinden Sie die Konfigurationsdateien.
Schritt 3: Nutzen Sie die Cloud, um die App zu veröffentlichen
Cloud Run sollte die letzte Methode sein, die dies verarbeitet. Prüfen Sie, ob sie hilfreich und korrekt ist. Vergewissern Sie sich, dass auf die wichtigsten Tools und den Code verwiesen wird und alles reibungslos funktioniert.
Next.js-Anwendung in Firebase bereitstellen
Firebase kann auch eine hervorragende Plattform für die Bereitstellung sein. Merken Sie sich also diese einfachen Schritte. Sind Sie bereit, Next.js in Firebase einzubinden? Beachten Sie diese vollständige Dokumentation.
Schritt 1: Nutzung öffentlicher Server vorbereiten
Beachten Sie die Konfigurationen für das, was dieses Bild oder Dokument erfordert (SSL erforderlich), damit alles sicher funktioniert.
Schritt 2: Einrichten und installieren (CMD)
Erfahren Sie, wie Befehlszeile und Firebase installiert werden und funktionieren.
npm install -g firebase-tools
Schritt 3: Projekt verbinden und konfigurieren
Folgen Sie „Firebase Init – Hosting“.
Achten Sie darauf, dass die URL umgeschrieben wird und in der Befehlszeile korrekt ist.
Verwenden Sie dabei „Nein“, um sicherzustellen, dass es bei der Bereitstellung keine Probleme gibt.
Best Practices für Ihre Tests
Sie werden lokale Tests durchführen wollen. Dazu benötigen Sie lokalen Hostcode.
Nach der Authentifizierung der Befehlszeile wird die Änderung per Push an dieses Repository übertragen:
- gcloud auth configure-docker
Jetzt laden Sie Folgendes hoch:
- docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
- GCloud Container-Images, per Push nach
Eine vollständige Liste der allgemeinen Entwicklungstipps für Cloud Run finden Sie in dieser Dokumentation.
Ähnliche Produkte und Lösungen
Cloud RunEine vollständig verwaltete Plattform, auf der Sie zustandslose Container ausführen können – ideal für die Bereitstellung containerisierter Next.js-Anwendungen.
Firebase HostingEin Hostingdienst in Produktionsqualität, der speziell für moderne Webanwendungen entwickelt wurde und ein globales CDN sowie eine SSL-Zertifizierung bietet.
Cloud BuildEin Dienst, der Ihre Builds in Google Cloud ausführt. Damit lässt sich eine automatisierte CI/CD-Pipeline erstellen, die Ihre Next.js-Anwendung erstellt, einen Container erzeugt und die Bereitstellung automatisiert.
Artifact RegistryEine sichere, private Registry zum Speichern und Verwalten Ihrer Container-Images, bevor Sie sie in Diensten wie Cloud Run oder Google Kubernetes Engine bereitstellen.
Cloud CDNBei Anwendungen, die auf einer benutzerdefinierten Serverkonfiguration bereitgestellt werden, können Sie mit Cloud CDN Ihre statischen Assets am Netzwerkrand von Google im Cache speichern. Dadurch lassen sich die Ladezeiten für Nutzer weltweit erheblich verbessern.
Gleich loslegen
Profitieren Sie von einem Guthaben über 300 $, um Google Cloud und mehr als 20 „Immer kostenlos“ Produkte kennenzulernen.
Benötigen Sie Hilfe beim Einstieg?
Vertrieb kontaktierenMit einem zertifizierten Partner arbeiten
Partner findenMehr ansehen
Alle Produkte ansehen
