Was ist Next.js? Ein Blick auf das beliebte JavaScript-Framework

Next.js wird als das React-Framework für die Produktion bezeichnet. Damit ist klar, dass du mit Next.js schnell große und unternehmenstaugliche Anwendungen erstellen und in der Produktion einsetzen kannst.

Next.js verfügt über Funktionen, mit denen du deine Anwendung in kürzester Zeit zum Laufen bringen kannst, und bietet dir eine leicht zu erlernende Kurve, Einfachheit und leistungsstarke Werkzeuge.

Next.js erweitert die ursprüngliche Facebook React-Bibliothek und das create-react-app-Paket und stellt ein erweiterbares, einfach zu verwendendes und produktionssicheres React-Framework bereit.

In diesem Leitfaden lernst du Next.js kennen und erfährst, warum du Next.js einsetzen solltest und welche verschiedenen Anwendungen Next.js in der Produktion verwenden. Außerdem besprechen wir die Elemente von Next.js, einschließlich seiner Funktionen. Zum Schluss lernen wir, wie wir unsere erste Next.js-Anwendung erstellen können.

Was ist Next.js?

Next.js ist ein React-Framework, mit dem du superschnelle, SEO-freundliche und extrem benutzerfreundliche statische Webseiten und Webanwendungen erstellen kannst. Next.js ist bekannt für die beste Entwicklererfahrung bei der Erstellung produktionsreifer Anwendungen mit allen Funktionen, die du brauchst.

Es bietet hybrides statisches und Server-Rendering, TypeScript-Unterstützung, Smart Bundling, Route Prefetching und vieles mehr – und das ohne zusätzliche Konfiguration.

Warum Next.js verwenden?

In diesem Abschnitt erfahren wir, warum du Next.js lernen solltest. Außerdem gehen wir auf die verschiedenen Anwendungen ein, die du mit Next.js erstellen kannst.

Bildoptimierungen

Next.js bietet automatische Bildoptimierungen mit Instant-Builds. Die Bildoptimierung ist eine leistungsstarke Funktion, die bereits in Next.js integriert ist, denn die Verwaltung und Optimierung von Bildern erfordert viele Konfigurationen, und die manuelle Optimierung von Bildern kann deine produktive Zeit in Anspruch nehmen.

Internationalisierung

Eine weitere großartige Funktion in Next.js ist die Internationalisierung. Die Erstellung einer Unternehmensanwendung kann leicht in verschiedene Sprachen weltweit übersetzt werden. Diese Funktion ist eine Ergänzung zu Next.js und macht Next.js international bekannt, weil es weniger Konfiguration braucht, um die Internationalisierung einzurichten.

Next.js Analytik

Next.js bietet ein analytisches Dashboard, das so konfiguriert werden kann, dass es genaue Besucherdaten und Seiteneinblicke anzeigt. Mit dieser Funktion kannst du schnell ein analytisches Dashboard erstellen und wertvolle Einblicke in deine Besucher und Seiteneinblicke gewinnen, ohne dass du extra programmieren oder konfigurieren musst.

Null-Konfiguration

Next.js kompiliert und baut automatisch mit Hot-Refresh, ohne dass du etwas konfigurieren musst, und es skaliert und optimiert deine Produktionsanwendung automatisch.

Hot Refresh oder automatischer Refresh in einer herkömmlichen Frontend-Anwendung ist mit vielen Hürden verbunden. Du musst die richtigen Bibliotheken auswählen und installieren und die Konfigurationen für jede Bibliothek vornehmen, damit sie richtig funktioniert. Next.js löst dieses Problem, indem es einen Hot-Refresh direkt nach dem Auspacken bereitstellt, ohne dass du etwas installieren oder konfigurieren musst.

Vorgefertigte SSR-, SSG- und CSR-Unterstützung

Mit Next.js unterstützt du serverseitiges Rendering, statische Generierung und clientseitiges Rendering in einer einzigen Anwendung. Du kannst entscheiden, welche Art von Anwendung du erstellen möchtest und wie du deine Anwendung kompilieren willst, um sie optimal an deinen Anwendungsfall anzupassen.

Durch das serverseitige Rendering eignet sich Next.js für groß angelegte SEO-orientierte, produktionsreife Anwendungen, und die Konfiguration ist ein Kinderspiel.

Anwendungen mit Next.js

Im Folgenden findest du eine Liste von Anwendungen, die mit Next.js entwickelt wurden. Next.js wird von Fortune-500-Unternehmen unterstützt, darunter GitHub, Uber und Netflix.

Hier sind die Top 5 Anwendungen, die mit Next.js entwickelt wurden.

TikTok

TikTok ist eine weit verbreitete soziale Online-Videocommunity, in der Nutzer/innen Kurzvideos für Handys hochladen und die täglich Millionen von Nutzer/innen hat.

Die Webseite von TikTok wurde mit Next.js entwickelt, um für Millionen von täglich aktiven Nutzern zu skalieren und zu optimieren.

Hashnode

Hashnode ist eine kostenlose Online-Blogging-Plattform, die sich an Entwickler/innen richtet und mit Next.js aufgebaut wurde. Hashnode verzeichnet Millionen von Nutzern, so dass sich Next.js für kleine bis große Anwendungen eignet.

Twitch Mobile

Twitch ist eine soziale Online-Plattform zum Chatten, Interagieren und Genießen verschiedener Arten von Inhalten und Unterhaltung. Sie wird auch von Next.js betrieben.

Hulu

Hulu ist eine Streaming-Plattform, die Netflix ähnelt und es den Nutzern ermöglicht, mit Next.js erstellte Filme und Fernsehsendungen online anzusehen.

Binance

Binance ist ein beliebtes Kryptowährungsportal mit Nachrichten, Kursen und der Möglichkeit, Kryptowährungen zu kaufen und zu verkaufen, das täglich Millionen von aktiven Nutzern und Kryptohandel verzeichnet. Next.js betreibt auch Binance.

Wenn du wissen willst, welche Unternehmen und Webseiten Next.js nutzen, kannst du die offizielle Next.js-Showcase-Seite für weitere Informationen besuchen.

Was du bauen kannst

In Next.js gibt es keine Grenzen für die Art der Anwendungen, die du entwickeln kannst. Du kannst verschiedene Arten von Anwendungen mit Next.js entwickeln. Außerdem hat jede Anwendung, die du mit Next.js entwickelst, alle Vorteile und Funktionen von Next.js, ohne dass du zusätzliche Konfigurationen vornehmen musst.

Im Folgenden findest du eine Liste der Anwendungstypen, die du mit Next.js entwickeln kannst:

• MVP (Minimum Viable Product)
• Jamstack-Webseiten
• Webportale
• Einzelne Webseiten
• Statische Webseiten
• SaaS-Produkte
• E-Commerce- und Einzelhandels-Webseiten
• Dashboards
• Komplexe und anspruchsvolle Webanwendungen
• Interaktive Benutzeroberflächen

Eigenschaften von Next.js

Im Folgenden stellen wir dir die Funktionen von Next.js vor und zeigen dir, was du mit Next.js in deinem Projekt erreichen kannst.

Routing

Das Routing ist eine der wichtigsten Funktionen von Next.js. Next.js nutzt das dateibasierte Routing-System, das auf den Seiten basiert, um zu strukturieren, wie das Routing deiner Anwendung aussehen wird. Jede Datei und jeder Ordner, der im Seitenordner erstellt wird, wird automatisch in eine Route in Next.js umgewandelt.

Das Next.js-Routing-System ist in 3 verschiedene Typen unterteilt, die wir im Folgenden näher erläutern.

Index-Routing

Der Seitenordner hat automatisch eine index.js, die zur Route für die Homepage-Route / wird. Du kannst auch eine index.js-Seite für alle deine Routen in einem beliebigen Ordner definieren. Du kannst zum Beispiel pages/profiles/index.js definieren, die automatisch der Seite /profiles zugeordnet wird.

Nimm zum Beispiel dieses Beispiel:

- pages
  - index.js
  - profile
    - index.js
    - [user].js

Die obige Seitenstruktur ordnet die Ordner und Dateien einer URL-Struktur zu. Zum Beispiel / für die pages/index.js, /profile/ für die pages/profile/index.js, und /profile/user für die pages/profile/user.js.

Verschachtelte Routen

Verschachtelte Routen werden innerhalb einer übergeordneten Route erstellt. Um eine verschachtelte Route zu erstellen, musst du eine übergeordnete Route/einen übergeordneten Ordner im Ordner pages erstellen und darin entweder Ordner oder Dateien hinzufügen, um eine verschachtelte Route zu erstellen.

Sieh dir dieses Beispiel an:

- pages
  - index.js
  - dashboard
    - index.js
    - user.js

Im obigen Skript sind die Dateien user.js und index.js in der übergeordneten Dashboard-Route verschachtelt, was bedeutet, dass die URLs nur über die Dashboard-Route aufgerufen werden können.

Dynamische Routen

Dies wird über dynamische Routen erreicht. Dynamische Routen sind immer unbestimmt. Sie können über API-Aufrufe erstellt werden oder der URL eine ID oder einen Slug zuweisen.

Um eine dynamische Route in Next.js zu erstellen, fügst du eine eckige Klammer [id].js um den Dateinamen oder den Verzeichnisnamen ein. Du kannst die Datei oder das Verzeichnis beliebig benennen, aber eine eckige Klammer [] muss angehängt werden, damit sie dynamisch wird.

Sieh dir dieses Beispiel an:

- pages
  - dashboard
    - [user].js
        - profile

Das obige Skript macht die Datei [user].js dynamisch, was bedeutet, dass die Profilseite mit /dashboard/2/profile oder /dashboard/johndoe/profile aufgerufen werden muss.

In der offiziellen Dokumentation erfährst du mehr und lernst verschiedene Tricks kennen, um ein fortschrittlicheres Routing-System in Next.js zu erstellen.

Static File Serving

In Next.js werden statische Dateien oder Assets wie Icons, selbst gehostete Schriftarten oder Bilder über den öffentlichen Ordner bereitgestellt, der die einzige Quelle der Wahrheit für statische Assets ist.

Der öffentliche Ordner sollte laut der Next.js-Dokumentation nicht umbenannt werden. Je nachdem, wie Next.js ihn konfiguriert hat, ist es sehr einfach, statische Dateien über den öffentlichen Ordner bereitzustellen.

Pre-Rendering

Eine der wichtigsten Funktionen von Next.js ist das Pre-Rendering, mit dem Next.js sehr gut und schnell arbeitet. Next.js rendert jede Seite vor, indem es den HTML-Code jeder Seite im Voraus zusammen mit dem minimalen JavaScript generiert, das durch einen Prozess namens Hydration ausgeführt werden muss.

Es gibt zwei Formen des Pre-Rendering in Next.js:

1. Server-seitiges Rendering (SSR)
2. Statische Generierung (SG)

Der entscheidende Unterschied zwischen SG und SSR ist, wie die Daten geholt werden. Bei SG werden die Daten zum Zeitpunkt der Erstellung abgerufen und bei jeder Anfrage wiederverwendet (was schneller ist, weil sie zwischengespeichert werden können), während bei SSR die Daten bei jeder Anfrage abgerufen werden.

Absolute Importe

Mit Next.js 9.4 wurden absolute Importe eingeführt, was bedeutet, dass du keine Komponenten mit relativ langen Verzeichnissen mehr importieren musst.

So musst du zum Beispiel Komponenten wie die folgende nicht mehr importieren:

import InputField from "../../../../../../components/general/forms/inputfield"

Aber du verwendest den folgenden Stil, um Komponenten zu importieren:

import InputField from "components/general/forms/inputfield";

Seiten verlinken

Next.js bietet die Komponente next/link für die Navigation zwischen Seiten. Die Navigation zwischen den Seiten in deinen Anwendungen kann mit der Link-Komponente erfolgen, die von next/link exportiert wird.

Angenommen, wir haben diese Seitenstrukturen in deinem Seitenordner und du möchtest die Seiten miteinander verknüpfen, dann kannst du das mit folgendem Skript erreichen:

- pages
  - index.js
  - profile.js
  - settings.js
  - users
    - index.js
    - [user].js

Du verknüpfst die Seiten mit dem folgenden Skript:

import Link from "next/link";

export default function Users({users) {
  return (
    <div>
      <Link href="/">Home</Link>
      <Link href="/profile">Profile</Link>
      <Link href="/settings">
        <a> Settings </a>
      </Link>
      <Link href="/users">
        <a> Settings </a>
      </Link>
      <Link href="/users/bob">
        <a> Settings </a>
      </Link>
    </div>
  )
}

Styling

Next.js bietet dir den Luxus, viele verschiedene Stile für dein Projekt zu erstellen und zu verwenden. Next.js wird standardmäßig mit drei verschiedenen Stilen ausgeliefert: globales CSS, CSS-Module und style-jsx.

Nachteile von Next.js

Wie jede gute Sache hat auch Next.js seine Nachteile, die du bedenken solltest, bevor du es für dein nächstes Projekt einsetzt. In diesem Abschnitt gehen wir auf die Nachteile von Next.js ein.

Kosten für Entwicklung und Wartung

Die Flexibilität von Next.js ist mit hohen Kosten für Entwicklung und Wartung verbunden. Um Änderungen vorzunehmen und die Anwendung zu warten, brauchst du einen engagierten Next.js-Entwickler und Frontend-Experten, was mit höheren Kosten verbunden ist.

Fehlender integrierter Zustandsmanager

Next.js unterstützt von Haus aus keine Zustandsverwaltung. Wenn du eine Zustandsverwaltung brauchst, musst du sie installieren und wie bei React verwenden.

Geringe Anzahl von Plugins

Mit Next.js hast du keinen Zugang zu vielen leicht anpassbaren Plugins.

Wie man eine Next.js-App erstellt

In diesem Abschnitt geht es um den praktischen Einsatz von Nuxtjs und darum, wie du eine NuxtJS-Anwendung erstellst. Doch zunächst wollen wir uns einige der wichtigsten Konzepte für die Entwicklung einer Nuxtjs-Anwendung ansehen.

Next.js-Anwendung erstellen

Das Erstellen eines neuen Next.js-Projekts ist sehr einfach und unkompliziert. Du kannst ein Nuxt-Projekt auf verschiedene Arten erstellen, aber die bevorzugte und empfohlene Methode ist CLI.

Um eine neue Next.js-Anwendung mit CLE zu erstellen, musst du sicherstellen, dass du npx installiert hast (npx wird seit npm 5.2.0 standardmäßig mitgeliefert) oder npm v6.1 oder yarn.

Dann gibst du den folgenden Befehl in den richtigen Ordner ein, in dem du dein Next.js-Projekt ablegen möchtest:

npx create-next-app
// Follow the instructions to create your first Next.js project.
cd <project-name>
npm run dev

Achte darauf, dass du den <Projektnamen> durch deinen tatsächlichen Projektnamen ersetzt. Dann kannst du mit der Erstellung der verschiedenen Seiten und Komponenten beginnen, die du für dein Projekt benötigst.

Next.js-Elemente

Wenn du ein neues Next.js-Projekt erstellst, wirst du feststellen, dass es verschiedene Elemente, Seiten- und Ordnerstrukturen gibt, die für Anfänger schwer zu verstehen sind. Im Folgenden werden wir einige der Elemente von Next.js näher betrachten.

Ordnerstruktur

Nachdem du ein neues Next.js-Projekt über die CLI erstellt hast, siehst du eine Next.js-App mit einer schlanken Ordnerstruktur. Diese Standard-Ordnerstruktur ist das absolute Minimum, um eine Next.js App zu betreiben. Wenn du mit der Erstellung deines Projekts beginnst, wirst du mehr Ordner und Dateien haben als das Framework zu Beginn.

Die einzigen Next.js-spezifischen Ordner sind die Ordner pages, public und styles. Diese sollten nicht umbenannt werden, es sei denn, du bist bereit, zusätzliche Konfigurationen anzupassen.

Im Folgenden findest du die Standardordnerstruktur für ein neues Next.js-Projekt:

# other files and folders, .gitignore, package.json...
- pages
  - api
    - hello.js
  - _app.js
  - index.js
- public
  - favicon.ico
  - vercel.svg
- styles
  - globals.css
  - Home.module.css

Seiten

Seiten sind einer der Next-spezifischen Ordner. Im Folgenden findest du einige Dinge, die du über Next.js-Seiten wissen musst.

Seiten sind React-Komponenten, und jede Datei im Ordner Pages ist eine Webseite und jede Webseite ist eine React-Komponente. Wir haben zum Beispiel eine React-Komponente im Pages-Ordner, was zu einer Webseiten-URL führt.

// Location: /pages/index.js
//  is just a basic React component
export default Index() {
  return <h1>Welcome to Home</h1>
}

Next.js wird mit vorgefertigten benutzerdefinierten Seiten geliefert, denen Unterstriche vorangestellt sind, wie _app.js und _document.js. Next.js verwendet die benutzerdefinierte Seitenkomponente _app.js, um die Seiten zu initialisieren. Sie befindet sich im Ordner pages, während die benutzerdefinierte Seitenkomponente _document.js die Tags <html> und <body> deiner Anwendung ergänzt.

Das Framework verwendet außerdem ein dateibasiertes Routing-System, das auf Seiten basiert, wobei jede Seite anhand ihres Dateinamens automatisch zu einer Route wird. So wird zum Beispiel eine Seite unter pages/user unter /user und pages/index.js unter / gespeichert.

Zusammenfassung

Next.js sollte dir in den Sinn kommen, wenn du Enterprise- und produktionsreife Anwendungen mit React erstellst, denn es wurde entwickelt, um die Erstellung von Produktionsanwendungen mit seinen Funktionen, Werkzeugen und seiner Konfiguration zu vereinfachen.

In diesem Leitfaden haben wir uns die verschiedenen Funktionen dieses Frameworks angeschaut und herausgefunden, warum du deine nächsten unternehmenstauglichen Anwendungen mit Next.js erstellen solltest. Selbst wenn du Next.js noch nie ausprobiert hast, gibt es jetzt viele Gründe, es zu versuchen.

Lass uns in den Kommentaren wissen, was du mit diesen neuen Superkräften bauen wirst!