Wie man eine Next.js-Anwendung einsetzt

Das Deployment einer Next.js-Anwendung bedeutet, dass Ihre Next.js-Webanwendung im Internet zugänglich gemacht wird, damit Benutzer überall damit interagieren können.

Während verschiedene Bereitstellungsoptionen zur Verfügung stehen, bietet die Container as a Service (CaaS) Plattform von Back4app mehrere Vorteile. Diese Vorteile machen sie zu einer überzeugenden Wahl für jeden Entwickler, der seine Web-App mit einfachen Schritten bereitstellen möchte.

In diesem Artikel werden Sie eine Next.js-Anwendung erstellen und erfahren, wie Sie diese Anwendung mithilfe des Containerisierungsdienstes von Back4app hosten und bereitstellen können.

Wichtigste Erkenntnisse

• Sie lernen, wie Sie das Container as a Service Cloud-Modell nutzen können, um Ihre Next.js-Webanwendung schnell und effizient bereitzustellen.

• Sie werden die Stärken von Next.js wie Server-Side Rendering, automatisches Code-Splitting, integriertes Routing und statische Site-Generierung entdecken, die das Benutzererlebnis verbessern.

• Sie werden die potentiellen Grenzen von Next.js verstehen, wie z.B. die Lernkurve, das begrenzte Ökosystem, die Komplexität des Server-Side Rendering und die begrenzte Routing-Flexibilität.

Was ist Next.js?

Next.js ist ein Open-Source-Framework, das auf der React-Bibliothek aufbaut, um Webanwendungen zu erstellen. Mit Next.js können Sie bequem server-seitig gerenderte (SSR) und statisch generierte React-Anwendungen erstellen, die für Ihre Bedürfnisse performant sind.

Es wurde von Vercel (früher bekannt als Zeit) im Jahr 2016 entwickelt. In den letzten Jahren hat Next.js aufgrund seiner Benutzerfreundlichkeit und seiner leistungsstarken Funktionen viel an Popularität gewonnen.

Vorteile von Next.js

Next.js bietet mehrere Vorteile, die es zu einer beliebten Wahl für die Webentwicklung machen. Einige dieser Vorteile sind:

Server-seitiges Rendering

Das Next.js Framework ermöglicht Server-Side Rendering für seine Webanwendungen. Mit Server-Side Rendering können Seiten auf dem Server vorgerendert werden, bevor sie als HTML an den Client gesendet werden. Dies ermöglicht eine bessere Suchmaschinenoptimierung (SEO).

Beim serverseitigen Rendering werden Ihre Seiten auf dem Server gerendert, bevor sie an den Client gesendet werden, wodurch sich die Ladezeiten der Seiten verlängern. Dies ist besonders für Benutzer mit langsameren Verbindungen oder Geräten von Vorteil.

Außerdem erleichtert das serverseitige Rendering das Abrufen von Daten aus APIs oder Datenbanken vor dem Rendern der Seite.

Automatische Code-Aufteilung

Code-Splitting bezieht sich auf die Technik, eine JavaScript-Anwendung und ihren gesamten Code in kleinere Teile aufzuteilen. Next.js teilt den Code automatisch auf der Grundlage der Seitenrouten auf.

Das automatische Code-Splitting von Next.js führt zu einem schnelleren Laden der ersten Seite. Außerdem wird die Menge an JavaScript, die an den Client gesendet wird, reduziert, was die Leistung und die Benutzerfreundlichkeit verbessert.

Eingebautes Routing

Das in Next.js integrierte Routing-System ist ein wesentlicher Vorteil des Frameworks. Mit dem eingebauten Routing-System ist es einfach, Routen zu definieren und zwischen Seiten zu navigieren. Next.js unterstützt sowohl clientseitiges als auch serverseitiges Routing.

Dieses Routing-System unterstützt dynamisches Routing, erhöht die Produktivität der Entwickler, verbessert die Anwendungsleistung und sorgt für eine reibungslose und effiziente Benutzererfahrung.

API-Routen

Next.js-Anwendungen werden mit Standard-API-Routen ausgeliefert, die es Entwicklern ermöglichen, serverlose API-Endpunkte direkt in ihren Anwendungen zu erstellen. API-Routen sind eine leistungsstarke Funktion von Next.js, die mehrere Vorteile für die Erstellung von Webanwendungen bietet.

Zu diesen Vorteilen gehört, dass Entwickler serverlose Funktionen erstellen, API-Endpunkte definieren und organisieren und Daten beim serverseitigen Rendering abrufen können. Durch die Routen entfällt die Notwendigkeit eines separaten Backend-Servers. Sie unterstützen auch REST- und GraphQL-APIs.

Next.js verwendet API-Routen, um API-Anfragen effizient zu bearbeiten, was die Erstellung skalierbarer, performanter und SEO-freundlicher Anwendungen erleichtert.

Statische Website-Generierung

Static Site Generation ist ein wesentlicher Vorteil des Next.js-Frameworks. Next.js nutzt die statische Site-Generierung, um Seiten bei der Erstellung vorzurechnen und sie als statische Dateien bereitzustellen. Diese Funktion gewährleistet schnelle Ladezeiten, indem jede Seite in HTML-Dateien vorgerendert wird.

Statische Websites sind sehr SEO-freundlich und haben weniger Angriffsmöglichkeiten, was sie sicherer macht. Die von Next.js generierten statischen Websites sind von Natur aus skalierbar, da sie hohe Verkehrslasten bewältigen können, ohne die Serverinfrastruktur zu belasten.

Next.js ermöglicht die Offline-Unterstützung von statischen Websites, so dass Nutzer auch ohne Internetverbindung weiter surfen und auf zuvor besuchte Seiten zugreifen können.

Beschränkungen von Next.js

Next.js ist zwar ein leistungsfähiges und beliebtes Framework für die Erstellung von serverseitig gerenderten React-Anwendungen, aber es gibt einige Einschränkungen, die Sie beachten sollten:

Lernkurve

Next.js führt zusätzliche Konzepte und Konventionen ein, mit denen die traditionelle React-Entwicklung nicht vertraut ist. Die Umstellung auf die Entwicklung mit Next.js kann einige Zeit in Anspruch nehmen, um die spezifische Architektur und die Funktionen zu verstehen und sich daran anzupassen.

Next.js bietet eine Reihe von Konfigurationsoptionen, die je nach Projektanforderungen angepasst werden können. Mit seinen Tools, Bibliotheken und Plugin-Optionen müssen Sie sich etwas Zeit nehmen, um sich mit dem Next.js Ökosystem vertraut zu machen.

Begrenztes Ökosystem

Next.js ist ein relativ neues Framework im Vergleich zu etablierten Frameworks/Bibliotheken wie React und Angular. Daher befindet sich sein Ökosystem noch im Wachstum und in der Anfangsphase. Es verfügt nicht über die gleiche Bandbreite an Bibliotheken und Plugins wie etabliertere Frameworks.

Möglicherweise müssen Sie auf von der Community unterstützte Pakete zurückgreifen oder individuelle Lösungen für bestimmte Anforderungen entwickeln.

Server-seitige Rendering-Komplexität

Server-Side Rendering ist zwar eine leistungsstarke Funktion von Next.js, kann aber auch den Entwicklungsprozess komplizierter machen.

Meistens ist der Lern- und Implementierungsaufwand erheblich größer. Die Verwendung von Server-Side Rendering kann zu Server-Rendering-Fehlern oder Inkonsistenzen zwischen Server- und Client-Rendering führen.

Es ist ratsam, bei der Implementierung dieses Renderings vorsichtig zu sein. Sie müssen in der Lage sein, das Abrufen von Daten und den Zustand der Anwendung effektiv zu verwalten, da Server und Client ihre Zustände synchronisieren müssen.

Begrenzte Routing-Flexibilität

Next.js hat ein eingebautes Routing-System, das einen dateibasierten Routing-Ansatz verfolgt. Dies soll das Routing in vielen Fällen vereinfachen. Es bietet jedoch möglicherweise nicht das gleiche Maß an Flexibilität wie fortschrittlichere Routing-Bibliotheken.

Die Anpassung des Routing-Verhaltens über die Standardkonventionen hinaus kann zusätzliche Workarounds erfordern, die nicht immer bequem sind.

Next.js Bereitstellungsoptionen

Für Next.js-Anwendungen stehen verschiedene Bereitstellungsoptionen zur Verfügung, darunter Containers as a Service (CaaS) und Infrastructure as a Service (IaaS).

Sie sollten wissen, welche Optionen es gibt, wie sie funktionieren und wie sie im Vergleich zueinander am besten zu Ihrer erstellten Next.js-Anwendung passen.

Infrastruktur als Dienstleistung (IaaS)

IaaS ist ein Cloud-Computing-Modell, das virtualisierte Rechenressourcen über das Internet bereitstellt. Bei der Nutzung von IaaS können Entwickler ihre Anwendungen auf virtuellen Maschinen (VMs) bereitstellen und verwalten, die von einem Cloud-Anbieter gehostet werden.

Die Bereitstellung einer Next.js-Anwendung auf einer IaaS-Plattform bietet verschiedene Vorteile, darunter Kontrolle und Flexibilität. IaaS-Plattformen sind auch kosteneffizient, da sie einem Pay-as-you-go-Programm folgen. Das bedeutet, dass Sie auf der Grundlage der von Ihrer Anwendung genutzten Ressourcen bezahlt werden.

Einige beliebte IaaS-Plattformen, die Sie für die Bereitstellung Ihrer Next.js-Anwendungen verwenden können, sind:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Container als Dienstleistung (CaaS)

CaaS ist ein Cloud-Computing-Modell, das einer IaaS-Plattform ähnelt. Neben der Bereitstellung von Computing-Ressourcen bieten sie jedoch auch eine vollständig verwaltete Umgebung für die Bereitstellung und Verwaltung von containerisierten Anwendungen.

Das bedeutet, dass nur wenig Konfiguration und Arbeit in den Betrieb der Anwendung fließen. Dies bedeutet auch, dass es sehr wenig Kontrolle über Anpassungen gibt.

Bei der Bereitstellung einer Next.js-Anwendung als Container werden der Anwendungscode, die Laufzeit und die Abhängigkeiten in einem Container-Image gebündelt. Dieses Image kann dann auf einer CaaS-Plattform bereitgestellt und ausgeführt werden.

Einige beliebte CaaS-Plattformen, auf denen Sie Ihre Next.js-Anwendungen einsetzen können, sind:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

CaaS-Plattformen vereinfachen die Bereitstellung. Sie verbessern auch die Skalierbarkeit, Portabilität und Sicherheit Ihrer Anwendungen. Sie abstrahieren von der Infrastrukturverwaltung und bieten integrierte Orchestrierung und Skalierung.

Erstellen und Bereitstellen einer Next.js-App auf Back4App

In diesem Abschnitt erfahren Sie, wie Sie eine Webanwendung mit dem Next.js-Framework erstellen und die Anwendung mithilfe des Back4app-Containerdienstes auf der Back4app-Plattform bereitstellen.

Sie werden lernen, wie Sie sich auf der Plattform zurechtfinden und den Containerdienst nutzen, um Ihre Webanwendung über die Back4app-Server zugänglich zu machen. Nach der Lektüre dieses Abschnitts werden Sie lernen, wie Sie eine Next.js-Anwendung bereitstellen.

Was ist Back4app Containers?

Die Back4app CaaS-Plattform ist eine Plattform, die Ihnen ein Cloud-basiertes Servicemodell bietet, mit dem Sie Container und Anwendungen in diesen Containern verwalten und bereitstellen können.

Back4App Containers sind eine leistungsstarke Funktion der Back4App-Plattform, die Ihnen eine flexible, skalierbare und sichere Umgebung für den Betrieb Ihrer Anwendungen bietet.

Diese Container unterstützen mehrere Programmiersprachen wie PHP, Python, Node.js, etc. Einige Entwickler halten sie für eine großartige kostenlose Next.js-Hosting-Plattform.

Die Container von Back4app können automatisch skaliert werden, um Ihren Anforderungen gerecht zu werden. Jeder Container ist von den anderen isoliert, so dass die Daten Ihrer Anwendung geschützt sind. Die Container lassen sich leicht in das Back4App-Ökosystem integrieren.

Das macht es Ihnen leicht, Ihre Container mit anderen Back4App-Diensten wie Datenbanken und Cloud-Funktionen zu verbinden.

Projekt-Einführung

In diesem Tutorium werden Sie eine einfache Anwendung mit Next.js erstellen. Diese Anwendung wird zufällige Ratschläge von einer externen API mithilfe der Fetch-API abrufen. Die Anwendung wird dann die Ratschläge auf der von Ihnen erstellten Webanwendungsschnittstelle anzeigen.

Sie können die Erstellung der Next.js-Anwendung überspringen, um die Anwendung auf Back4app bereitzustellen. Den endgültigen Quellcode für die Anwendung finden Sie in diesem GitHub-Repository.

Voraussetzungen

Um diesem Tutorial zu folgen und Ihre Next.js-Anwendung auf Back4app einzusetzen, müssen Sie die folgenden Voraussetzungen erfüllen.

Stellen Sie sicher, dass Sie über:

• Verständnis der Konzepte der React-Bibliothek
• Erfahrung mit Docker, einschließlich der Installation von Docker
• Vertrautheit mit Node.js und NPM
• Git muss auf Ihrem Computer installiert sein und Sie benötigen ein GitHub-Konto.

Kodierung Ihrer Next.js-Anwendung

Um das Gerüst für die Next.js-Anwendung zu erstellen, führen Sie den folgenden Befehl in Ihrem node.js-Terminal aus:

npx create-next-app@latest

Wenn Sie den obigen Befehl ausführen, erhalten Sie eine Reihe von Eingabeaufforderungen in Ihrem Terminal angezeigt. Diese Aufforderungen dienen dazu, Ihre Next.js-Anwendung zu konfigurieren.

Die Eingabeaufforderungen sehen ähnlich aus wie in diesem Bildschirmfoto.

Next.js konfiguriert Ihre Anwendung so, dass sie den Antworten auf Ihre Fragen entspricht. Sie werden App Router und Tailwind CSS in dieser Anwendung nicht benötigen. Wählen Sie Nein für diese Optionen.

Wenn Ihre Anwendung erstellt ist, beginnen Sie mit dem Aufbau der Schnittstelle.

Fügen Sie zunächst die folgenden globalen Stile in die Datei globals.css ein:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

Sie finden die Datei globals.css im Ordner styles des Verzeichnisses src. Nachdem Sie die globalen Stile hinzugefügt haben, importieren Sie die Datei globals.css in Ihre Datei _app.tsx im Verzeichnis pages, um sie auf Ihre Anwendung anzuwenden.

Bevor Sie die Datei globals.css in die Datei _app.tsx importieren, müssen Sie zunächst eine Layoutkomponente erstellen, um das Layout Ihrer Anwendung zu definieren.

Erstellen Sie dazu einen Komponentenordner im Verzeichnis src und eine Datei Layout.tsx in diesem Ordner. Schreiben Sie in die Datei ” Layout.tsx ” den folgenden Code:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

Der obige Codeblock definiert eine Layout-Komponente. In der Layout-Komponente importieren Sie Ihre Stile aus der Datei Home.module.css und die Comforter-Funktion aus dem Modul next/font/google.

Mit der Funktion Comforter konfigurieren Sie die Schriftart comforter und wenden sie auf das Element h1 in Ihrer Kopfzeile an, indem Sie die Eigenschaft className auf comforter.className setzen.

Der Ausdruck props.children rendert untergeordnete Komponenten innerhalb der Layout-Komponente.

Sie sollten auch Ihren Kopfzeilenstil in der Datei Home.module.css und die anderen erforderlichen Stile definieren.

Zum Beispiel:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Importieren Sie nun die Datei global.css und die Layout-Komponente in die Datei _app.tsx und verpacken Sie Ihre Anwendung in die Layout-Komponente:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Sie haben das Layout Ihrer Anwendung definiert. Als nächstes können Sie die Hinweise von der API abrufen und in der Anwendung anzeigen. Zu diesem Zweck verwenden Sie die Datei index.tsx im Verzeichnis pages.

Überschreiben Sie in der Datei index.tsx den vorhandenen Code mit dem folgenden Code:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

Der Codeblock definiert die Startseite. Er importiert die React-Bibliothek, die Home.module.css für das Styling und die Google-Schriftart Montserrat aus der Next.js-Schriftartbibliothek.

Der useEffect-Hook ist ein leistungsstarkes Werkzeug, mit dem Sie Seiteneffekte in React-Komponenten ausführen können. In dieser Anwendung haben Sie den useEffect-Hook verwendet, um die Ratschläge von Ihrer API abzurufen. Der von der API abgerufene Hinweis wird dann auf den Hinweisstatus gesetzt.

Der useEffect-Hook wird zunächst ausgeführt, wenn die Komponente gerendert wird, und dann erneut, wenn sich der Wert des Zählstatus ändert. Dies liegt daran, dass Sie den Zählstatus als Wert des Abhängigkeitsarrays festgelegt haben.

Wenn Sie auf die Schaltfläche ” Generieren ” klicken, wird die Funktion handleClick ausgeführt und der Zählerstand um 1 erhöht. Dadurch wird der useEffect-Hook erneut ausgeführt, neue Hinweise von der API abgerufen und der Hinweisstatus aktualisiert. Jedes Mal, wenn Sie auf die Schaltfläche generate klicken, wird ein neuer Hinweis auf Ihrem Bildschirm angezeigt.

Ihre Next.js-Anwendung ist fertig!

Um die Anwendung zu starten, führen Sie den folgenden Befehl aus:

npm run dev

Die Anwendung sollte auf Ihrem lokalen Server http://localhost:3000 ausgeführt werden .

Wenn Sie auf die Schaltfläche “Generieren” klicken, wird ein neuer Ratschlag abgerufen und angezeigt. Außerdem wird die “advice no” jedes Mal um 1 erhöht.

Dockerisierung der Anwendung

Bevor Sie die Next.js-Anwendung auf Back4app bereitstellen, müssen Sie die Anwendung docken. Beim Dockerisieren einer Anwendung werden Ihre Anwendung und ihre Abhängigkeiten in Docker-Container verpackt.

Docker-Container bieten eine leichtgewichtige, isolierte und portable Möglichkeit, Ihre Anwendungen mit den erforderlichen Bibliotheken und Konfigurationen auszuführen.

Dies macht die Bereitstellung Ihrer Anwendungen auf jedem Rechner mit installiertem Docker einfach. Die Dockerisierung Ihrer Anwendung vereinfacht die Bereitstellung, verbessert die Portabilität, Skalierbarkeit usw.

Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung, wie Sie Ihre Next.js-Anwendung dockerisieren können:

Schritt 1: Erstellen Sie ein Dockerfile in Ihrem Projektstammverzeichnis
Erstellen Sie eine neue Datei namens Dockerfile im Stammverzeichnis Ihres Next.js-Projekts. Diese Datei enthält die Anweisungen für Docker, um ein Image Ihrer Anwendung zu erstellen.

Schritt 2: Definieren Sie Ihr Dockerfile
Geben Sie in das Dockerfile den folgenden Code ein:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Dieses Dockerfile macht folgendes:

• Startet von der offiziellen Node.js 14-Laufzeitumgebung.
• Setzt das Arbeitsverzeichnis auf /app.
• Kopiert package.json und package-lock.json in das Docker-Image und installiert die Abhängigkeiten.
• Kopiert den Rest des Anwendungscodes in das Docker-Image.
• Erstellt die Next.js-Anwendung.
• Gibt Port 3000 für die Anwendung frei.
• Definiert den Befehl zum Starten der Anwendung.

Diese Spezifikationen beschreiben die Umgebung, in der Ihre Anwendung ausgeführt werden soll.

Schritt 3: Erstellen des Docker-Images

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um das Docker-Image zu erstellen:

docker build -t advice-generator .

Sie können “advice-generator” durch den Namen ersetzen, den Sie Ihrem Docker-Image geben möchten.

Starten Sie den Docker-Container

Nachdem das Image erstellt wurde, können Sie es mit dem folgenden Befehl als Container ausführen:

docker run -p 3000:3000 advice-generator 

Dieser Befehl ordnet Port 3000 im Docker-Container dem Port 3000 auf Ihrem Rechner zu.

Wenn Sie diese Schritte befolgen, wird Ihre Next.js-Anwendung in einem Docker-Container ausgeführt. Sie können darauf zugreifen, indem Sie in Ihrem Webbrowser zu http://localhost:3000 navigieren.

Ihre Next.js-Anwendung auf GitHub veröffentlichen

Nachdem Sie die Anwendung gedockt haben, müssen Sie die Anwendung in ein GitHub-Repository pushen. Um die Anwendung in ein GitHub-Repository zu pushen, erstellen Sie ein neues Repository in Ihrem GitHub-Konto und führen Sie die folgenden Befehle im Verzeichnis Ihrer Anwendung in Ihrem Terminal aus:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Dieser Befehl initialisiert ein neues Git-Repository in Ihrem aktuellen Verzeichnis.
• git add: Dieser Befehl fügt alle Dateien in Ihrem aktuellen Verzeichnis zum Staging-Bereich hinzu.
• git remote add origin : Dieser Befehl verbindet Ihr lokales Repository mit einem entfernten Repository. Ersetzen Sie das durch die URL Ihres entfernten Repositorys.
• git commit -m ‘initial commit’: Dieser Befehl nimmt alle im Staging-Bereich geschriebenen Änderungen auf und speichert sie in einem neuen Commit.
• git branch -M main: Dieser Befehl erstellt einen neuen Zweig namens main und wechselt zu diesem.
• git push -u origin main: Mit diesem Befehl werden Ihre Übertragungen in Ihrem Hauptzweig in das entfernte origin-Repository verschoben.

Bereitstellen der Anwendung auf Back4app

Um Ihre Anwendung bei Back4app bereitzustellen, müssen Sie zunächst ein Back4app-Konto erstellen. Führen Sie dazu die folgenden Schritte aus:

1. Besuchen Sie die Website von Back4app.
2. Klicken Sie auf die Schaltfläche “Anmelden”.
3. Füllen Sie das Anmeldeformular aus und schicken Sie es ab.

Wenn Sie bereits ein Back4app-Konto eingerichtet haben, können Sie sich einfach anmelden und mit dem nächsten Schritt fortfahren.

Nachdem Sie ein Konto erstellt haben, melden Sie sich bei Ihrem Konto an und klicken Sie auf “Neue App”.

Schaltfläche. Sie finden die Schaltfläche in der oberen rechten Ecke des Bildschirms.

Es wird ein Bildschirm angezeigt, der dem unten abgebildeten ähnelt.

Wählen Sie die Option Container als Dienst, um Ihre Anwendung mithilfe von Containern zu erstellen und bereitzustellen. Die Erstellung sollte nicht lange dauern. Verknüpfen Sie anschließend Ihr GitHub-Konto mit der erstellten CaaS-Anwendung.

Wählen Sie dann in der Back4app-Anwendung das Repository aus, das Sie über Ihr verknüpftes GitHub-Konto bereitstellen möchten.

Nachdem Sie nun ein Repository ausgewählt haben, müssen Sie nur noch die Anwendung bereitstellen. Zuvor müssen Sie der Anwendung einen Namen geben und ihre Bereitstellung konfigurieren.

Klicken Sie auf die Schaltfläche “App erstellen”, um Ihre Anwendung bereitzustellen.

Herzlichen Glückwunsch, Sie haben Ihre Anwendung erfolgreich auf Back4app bereitgestellt. Sie können auf die Anwendung im Internet zugreifen, indem Sie den von Back4app bereitgestellten Link auf dem Bildschirm oben aufrufen.

Schlussfolgerung

Next.js ist ein Open-Source-Framework für die Erstellung von serverseitig gerenderten (SSR) React-Anwendungen. Es bietet auch viele Vorteile, darunter statische Site-Generierung, automatische Code-Aufteilung, integriertes Routing, API-Routen usw. Diese Vorteile machen Next.js zu einem leistungsstarken Framework.

Das Deployment einer Next.js-Anwendung mit Back4apps CaaS vereinfacht den Entwicklungsprozess. Die Back4app CaaS-Plattform ist eine skalierbare, sichere und kostengünstige Lösung für die Bereitstellung von Next.js-Anwendungen.

Seine benutzerfreundliche Oberfläche, Echtzeit-Updates, Unterstützung von GraphQL- und REST-APIs, automatische Backups und eine serverlose Umgebung machen es zu einer perfekten Wahl für Entwickler.

FAQ