NextJS: Projekt einrichten & erste Schritte

Hey! Schön, dass du dich für NextJS interessierst. In diesem Tutorial werde ich dir zeigen, wie du ein NextJS-Projekt einrichtest, wie das Routing funktioniert, wie du API-Endpunkte erstellst und wie du dein Projekt testen kannst.

Bevor wir jedoch anfangen, solltest du Grundkenntnisse in React und Node.JS haben. Wenn dir die Grundlagen von Node.JS noch nicht vertraut sind, empfehle ich dir, dir den Artikel "Node.JS für Einsteiger: Was ist Node.JS und wie wird es verwendet?" anzuschauen.

Alles klar? Dann können wir loslegen und ich werde dir zeigen, wie du ein NextJS-Projekt einrichtest. Ich werde dir auch zeigen, wie das Routing in NextJS funktioniert und wie du API-Endpunkte erstellen kannst, um Daten in deiner Anwendung bereitzustellen. Zum Schluss lernst du, wie du dein Projekt testen kannst, um sicherzustellen, dass es richtig funktioniert.

Also, lass uns loslegen und lerne, wie man mit NextJS erstaunliche Web-Anwendungen erstellt!

Was ist NextJS? 💡

NextJS ist ein Framework für React, das es Entwicklern ermöglicht, schnell und einfach Server-seitige Anwendungen (SSR) und statische Websites zu erstellen. Es bietet eine Vielzahl von Funktionen, die die Entwicklung von Anwendungen mit React vereinfachen und verbessern, darunter automatisch generierte Routing-Funktionen, die Möglichkeit, serverseitige Logik zu integrieren, und Unterstützung für die Verwaltung und den Import von statischen Dateien wie Bilder und Stylesheets.

Einer der größten Vorteile von NextJS ist die verbesserte SEO-Leistung im Vergleich zu traditionellen Single-Page-React-Anwendungen. Da NextJS Seiten serverseitig generiert, können Suchmaschinen die Inhalte der Seiten besser indizieren und diese in Suchergebnissen anzeigen.

NextJS bietet auch schnellere Ladezeiten im Vergleich zu traditionellen Single-Page-React-Anwendungen. Da die Seiten serverseitig generiert werden, werden nur die benötigten Inhalte an den Client gesendet, anstatt die gesamte Anwendung beim ersten Laden zu übertragen.

Im Gegensatz zu einer reinen React-Anwendung, die nur clientseitig ausgeführt wird, ermöglicht NextJS die Integration von serverseitiger Logik in die Anwendung. Dies kann nützlich sein, wenn Sie Daten von einer Datenbank abrufen oder berechnungsintensive Aufgaben ausführen müssen.

Vorbereitung und Installation 📝

Bevor du mit dem Tutorial loslegen kannst, stelle sicher, dass du Node.js und npm installiert hast. Node.js ist eine JavaScript-Laufzeitumgebung, die es ermöglicht, JavaScript-Code auf dem Server auszuführen. npm ist ein Package Manager für Node.js-Module, mit dem du zusätzliche Funktionalität in deine Projekte einbinden kannst. Du kannst beides auf der Node.js-Website herunterladen und installieren. Sobald du Node.js und npm installiert hast, kannst du Next.JS installieren, indem du den folgenden Befehl in deiner Kommandozeile eingibst:

npm install next

Einrichtung der Projektstruktur 📂

Nachdem du Next.JS installiert hast, kannst du ein neues Projekt erstellen, indem du den folgenden Befehl in deiner Kommandozeile eingibst:

npx create-next-app my-app

Dieser Befehl erstellt ein neues Verzeichnis mit dem Namen "my-app" und initialisiert es mit einer grundlegenden Projektstruktur für Next.JS. Die Projektstruktur sieht folgendermaßen aus:

my-app/
├── package.json
├── pages/
│   └── index.js
└── public/
    └── favicon.ico

Das "package.json"-Datei enthält Informationen zu deinem Projekt, wie z.B. den Namen, die Version und die Abhängigkeiten. Die "pages"-Verzeichnis enthält die Dateien mit den einzelnen Seiten deiner Webseite. Die "index.js"-Datei ist die Startseite deiner Webseite. Die "public"-Verzeichnis enthält statische Dateien wie Bilder und Icons.

Seiten erstellen 📝

In Next.JS kannst du eine neue Seite erstellen, indem du eine neue Datei mit dem Namen "mein-seitenname.js" im "pages"-Verzeichnis erstellst. In dieser Datei kannst du dann den HTML- und JavaScript-Code für deine Seite schreiben. Next.JS verwendet das Page-Routing-System, was bedeutet, dass jedes Mal, wenn ein Benutzer auf deiner Webseite auf die URL "/mein-seitenname" zugreift, die Inhalte der "mein-seitenname.js"-Datei angezeigt.

Dynamisches Routing 🛣️

Das Routingsystem in NextJS basiert auf dem Konzept von dynamischen Routen. Das bedeutet, dass du Routen definieren kannst, die sich dynamisch auf der Grundlage der angeforderten URL ändern. Als Beispiel könnten wir eine NextJS-Anwendung erstellen, die Blog-Beiträge anzeigt. Du könntest dann eine Route erstellen, die auf der ID des Beitrags basiert, und den Beitrag anzeigen, wenn die URL /posts/[id] aufgerufen wird. Hier ist ein Beispiel für eine solche Route in NextJS:

// File: pages/posts/[id].js

import { useRouter } from 'next/router';
import Layout from '../../components/Layout';
import Post from '../../components/Post';

const PostPage = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <Layout>
      <Post id={id} />
    </Layout>
  );
};

export default PostPage;

In diesem Beispiel importierst du zunächst die useRouter-Funktion aus dem next/router-Modul, die dir Zugriff auf das aktuelle Router-Objekt gibt. Du verwendest dann die query-Eigenschaft des Router-Objekts, um die ID aus der URL zu extrahieren und in der KomponentePost zu verwenden, die du ebenfalls importiert hast. Innerhalb der Post-Komponente kannst du dann den Code schreiben, der die Daten für den Beitrag abruft und anzeigt.

API-Routing verwenden 🌐

Next.JS bietet eine in-built-API-Routing-Funktion, die es dir ermöglicht, Daten von einem Server zu laden und in deiner Webseite anzuzeigen. Du kannst die API-Routing-Funktion nutzen, indem du eine Datei mit dem Namen "meine-api.js" im "pages/api"-Verzeichnis erstellst. In dieser Datei kannst du dann deinen API-Code schreiben, der die benötigten Daten lädt und an die Webseite zurückgibt. Beispielsweise könnte die Datei "pages/api/meine-api.js" wie folgt aussehen:

export default async (req, res) => {
  const data = await fetch('https://my-api.com/data');
  const json = await data.json();
  res.json(json);
};

Dieser Code nutzt die fetch-API, um Daten von der URL "https://my-api.com/data" zu laden, und gibt die empfangenen Daten im JSON-Format zurück.

Projekt testen 🧪

Sobald du dein Next.JS-Projekt erstellt hast, kannst du es testen, indem du den folgenden Befehl in deiner Kommandozeile eingibst:

npm run dev

Dieser Befehl startet einen lokalen Server, auf dem du deine Webseite testen kannst. Du kannst dann auf http://localhost:3000 in deinem Browser auf deine Webseite zugreifen und sie ausprobieren. Wenn du Änderungen an deinem Code vornimmst, wird der Server automatisch neu gestartet und die Änderungen werden übernommen.

Fazit

Für mich als React-Entwickler war es besonders einfach, mich in NextJS zurechtzufinden und ich konnte schnell damit loslegen, meine erste Server-seitige React-App zu erstellen. Einer der großen Vorteile von NextJS ist, dass es automatisch Code-Splitting implementiert, was dafür sorgt, dass deine App schneller und performanter ist.

Wenn du also auch React-Erfahrung hast, dann würde ich dir wirklich empfehlen, NextJS auszuprobieren. Du könntest damit zum Beispiel eine Server-seitige Blog-Plattform erstellen oder eine Landing Page für dein nächstes Projekt. Die Möglichkeiten sind endlos und NextJS macht es leicht, sie umzusetzen. Also, worauf wartest du noch? Probiere es aus und überzeuge dich selbst!

Hat dir dieser Beitrag gefallen oder fehlt dir etwas? Oder hast du vielleicht Feedback? Dann schreibe mir auf Twitter! Außerdem würde ich mich sehr freuen, wenn du diesen Beitrag teilst. Damit hilfst du mir meine Seite noch bekannter zu machen, damit ich noch mehr Menschen auf ihrem Weg zum Web Developer unterstützen kann. ❤️