Summary  
This chapter explains how to initialize and scaffold a new Next.js project using a CLI tool with a template example and how to start a local development server to run the app.

General domain of usage  
Web application development

## Ein neues Projekt starten
Um ein neues Projekt mit Next.js zu starten, navigieren Sie zu dem Ordner, in dem Sie Ihr Projekt speichern möchten, und führen Sie den folgenden Befehl in Ihrem Terminal aus:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      
      <textarea class="text-field" id="Your id" style="height: 70px; max-width: 100%">
npx create-next-app@latest . --use-npm --example "https://github.com/olreyplay/tradehub-template"</textarea
      >
      <button class="copy-button" onclick="handleClick('Your id', 'widget1-notify')">
        <svg
          width="20"
          height="20"
          x="0"
          y="0"
          viewBox="0 0 32 32"
          style="enable-background: new 0 0 512 512"
          xml:space="preserve"
          class=""
        >
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
              opacity="1"
              data-original="#000000"
              class=""
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Dieser Befehl richtet eine Next.js-Anwendung für Sie ein, indem er `create-next-app`, ein Command Line Interface (CLI) Tool, verwendet. Durch die Verwendung des `--example` Flags zusammen mit dem Vorlagenbeispiel für diesen Kurs haben Sie Zugriff auf eine vorgefertigte Vorlage, die Sie als Grundlage für Ihr Projekt verwenden können.

## Entwicklungsserver starten
Um die App lokal anzuzeigen, starten Sie den Entwicklungsserver mit dem unten angegebenen Befehl: 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="npm run dev" />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Sie können die Startseite anzeigen, indem Sie die folgende URL <a href="http://localhost:3000/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" >http://localhost:3000/</a> in Ihrem Browser öffnen. Es sollte so aussehen:

Im kommenden Kapitel werden wir uns mit der Struktur der Projektdateiordner befassen.

Next.js ist ein React-Framework, das für die Erstellung von Full-Stack-Webanwendungen entwickelt wurde. Mit Next.js nutzen Sie React, um Benutzeroberflächen zu erstellen, während Sie von zusätzlichen Funktionen und Optimierungen des Frameworks profitieren.

Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.

Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.

Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.

Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.

Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.

Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.

Implementierung der Authentifizierung in Next.js.

Projekteinrichtung

Ein neues Projekt starten

Entwicklungsserver starten

In der Praxis

Awesome!

Projekteinrichtung

Ein neues Projekt starten

Entwicklungsserver starten

In der Praxis