Next.js Installation

Bevor Sie beginnen, stellen Sie sicher, dass Node.js und npm installiert sind. Mit den folgenden Befehlen können Sie prüfen, ob sie installiert sind:

node -v
npm -v

Wenn Ihr System Node.js und NPM noch nicht unterstützt, können Sie auf unserNode.js-Tutorial zurückgreifen.。

Die Verwendung von npm in China ist sehr langsam. Sie können statt des Standard-npm das von Taobao angepasste cnpm-Kommandozeilenwerkzeug (mit gzip-Komprimierungsunterstützung) verwenden:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Dann können Sie den Befehl cnpm verwenden, um Module zu installieren:

$ cnpm install [name]

Weitere Informationen finden Sie unter:http://npm.taobao.org/。

Verwenden Sie create-react-app, um schnell eine Next.js-Entwicklungsumgebung aufzubauen

Next.js bietet ein offizielles Scaffolding-Tool, create-next-app, mit dem Sie schnell ein Projekt einrichten können.

create-react-app stammt von Facebook. Mit diesem Befehl können wir schnell eine Next.js-Entwicklungsumgebung ohne Konfiguration aufbauen.

Das von create-react-app automatisch erstellte Projekt basiert auf Webpack + ES6.

Führen Sie den folgenden Befehl aus, um ein Projekt zu erstellen:

npx create-next-app@latest my-next-app

Während der Installation sehen Sie die folgenden Eingabeaufforderungen. Drücken Sie einfach durchgehend Enter:

Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

    npx ist ein Node.js-Tool zum Ausführen von Binärprogrammen in Paketen, ohne sie global zu installieren.

  • Verwenden Siecreate-next-appdas Scaffolding-Tool zum Erstellen eines neuen Next.js-Projekts.
  • my-next-appist der Name des Projekts. Sie können ihn nach Bedarf in einen beliebigen Namen ändern.
  • Es wird automatisch die vom Projekt benötigten Abhängigkeiten installieren.

Nach Ausführung dieses Befehls wird create-next-app automatisch die folgenden Vorgänge ausführen:

  • Erstellen Sie einen Ordner namens my-next-app.
  • Initialisieren Sie das Projekt und installieren Sie die erforderlichen Abhängigkeiten.
  • Erstellen Sie die grundlegende Projektstruktur, einschließlich des app-Ordners, des public-Ordners, der Datei package.json usw.

Navigiere nach Abschluss der Erstellung zum Projektverzeichnis:

cd my-next-app

Führe im Projektverzeichnis den folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm run dev

Oder wenn du yarn verwendest:

yarn dev

Der Entwicklungsserver läuft standardmäßig unterhttp://localhost:3000, öffne deinen Browser und besuche http://localhost:3000, du solltest die standardmäßige Willkommensseite von Next.js sehen.

Wir können die Datei page.tsx im app-Verzeichnis ändern. Der geänderte Code ist:

app/page.tsx

export default function Home() {
    return <div>Hallo, Welt!</div>;
}

Besuche http://localhost:3000, das Ergebnis wird wie folgt angezeigt:

Hello, World!

Next.js manuell installieren

Um eine neue Next.js-Anwendung manuell zu erstellen, installiere zuerst die erforderlichen Pakete:

npm install next@latest react@latest react-dom@latest

Öffne als Nächstes deine package.json-Datei und füge die folgenden Skripte hinzu:

package.json-Datei:

{
  "scripts": {
    "dev": "next dev",        // Next.js im Entwicklungsmodus starten
    "build": "next build",    // Die Anwendung für den Produktionseinsatz erstellen
    "start": "next start",    // Den Next.js-Produktionsserver starten
    "lint": "next lint"       // Das in Next.js integrierte ESLint konfigurieren
  }
}

Diese Skripte repräsentieren verschiedene Phasen der Entwicklung einer Anwendung:

  • dev: ausführennext dev, was Next.js im Entwicklungsmodus startet.
  • build: ausführennext build, was die Anwendung für die Produktion erstellt.
  • start: ausführennext start, was den Next.js-Produktionsserver startet.
  • lint: ausführennext lint, was die in Next.js integrierte ESLint-Konfiguration einrichtet.

Erstelle das app-Verzeichnis

Next.js verwendet dateisystembasiertes Routing, was bedeutet, dass die Routen der Anwendung durch die Dateistruktur bestimmt werden.

Erstelle einen app-Ordner und füge dann eine layout.tsx- und eine page.tsx-Datei hinzu. Wenn Benutzer den Stammpfad der Anwendung/besuchen, werden diese Dateien gerendert.

Erstelle die Root-Layout-Datei

Inapp/layout.tsxerstelle darin die Root-Layout-Datei, einschließlich der erforderlichen<html>und<body>Tags:

Beispiel

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Erstelle die Startseitendatei

Erstelle abschließend eine Startseitendatei in app/page.tsx und füge anfänglichen Inhalt hinzu:

Beispiel

export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

Hinweise

  • Wenn du vergisst zu erstellenlayout.tsx, wird Next.js beim Ausführen des Entwicklungsservers (next dev), automatisch diese Datei erstellen.
  • Optional kannst du im Projektstammverzeichnis dassrcVerzeichnis verwenden, um Anwendungscode von Konfigurationsdateien zu trennen.

Erstelle den public-Ordner (optional)

Du kannst optional einenpublicOrdner im Projektstammverzeichnis erstellen, um statische Assets wie Bilder, Schriftarten usw. zu speichern.publicAuf Dateien im Ordner kann über den/Pfad verwiesen werden.

An diesem Punkt hast du die manuelle Installation und Initialisierung einer grundlegenden Next.js-Projektstruktur abgeschlossen.

Entwicklungsserver ausführen

Führe den folgenden Befehl aus, um den Entwicklungsserver zu starten:

npm run dev

Besuche http://localhost:3000, um die Anwendung anzuzeigen.

Bearbeite die Dateiapp/page.tsxund speichere sie, dann kannst du das aktualisierte Ergebnis im Browser sehen.

Andere Erweiterungen