Einfach.NEXT.js Tutorial Serie (Deutsch)

Einführung

Willkommen bei der umfassenden und exzellenten Next.js Tutorial-Serie auf Deutsch! Wenn Sie sich mit der Entwicklung von hochleistungsfähigen Webanwendungen mit Next.js auseinandersetzen möchten, sind Sie hier genau richtig. In dieser Serie werde ich Ihnen Schritt für Schritt die wichtigsten Funktionen und Konzepte von Next.js näherbringen, um Ihre Fähigkeiten auf ein unvergleichliches Niveau zu heben. Also, lass uns direkt loslegen und die Grenzen der Webentwicklung mit Next.js erkunden!

Was ist Next.js?

Next.js ist ein revolutionäres Framework für serverseitig gerenderte React-Anwendungen, das Entwicklern wie Ihnen und mir eine effiziente Möglichkeit bietet, hochperformante Webanwendungen zu erstellen, die die Grenzen der modernen Webentwicklung neu definieren. Mit Funktionen wie serverseitigem Rendering und statischer Seitengenerierung ermöglicht Next.js eine schnellere Initialisierung und verbesserte SEO-Leistung, die Ihre Webanwendungen auf ein neues Level hebt.

Tutorial-Reihe

In dieser Tutorial-Reihe werden wir gemeinsam die wichtigsten Funktionen und Konzepte von Next.js erkunden, um Ihre Fähigkeiten auf ein unvergleichliches Niveau zu heben. Wir werden uns mit Themen wie serverseitigem Rendering, statischer Seitengenerierung, Routing, API-Routing und vielem mehr auseinandersetzen, um Ihnen die notwendigen Werkzeuge an die Hand zu geben, um Ihre eigenen hochleistungsfähigen Webanwendungen mit Next.js zu erstellen.

02. Hallo Welt

Willkommen zur ersten Lektion unserer Next.js Tutorial-Reihe! In diesem Abschnitt werden wir eine einfache „Hallo Welt“-Anwendung erstellen, um uns mit der grundlegenden Struktur von Next.js vertraut zu machen.

import React from 'react';

function HomePage() {
  return <div>Hallo Welt</div>;
}

export default HomePage;

Speichere diese Datei als index.js im Ordner pages. Starte dann deine Anwendung mit npm run dev und öffne http://localhost:3000 in deinem Browser. Voilà, deine erste Next.js-Seite!

03. Projektstruktur

In dieser Lektion werden wir die Projektstruktur von Next.js untersuchen. Du wirst lernen, wie die Dateien und Ordner organisiert sind und wie du deine Next.js-Anwendung effizient strukturieren kannst.

• pages: Enthält alle deine Seiten. Jede Datei im Ordner pages entspricht einer Route.
• public: Statische Dateien wie Bilder und Schriftarten.
• components: Wiederverwendbare UI-Komponenten.

04/05. Routen & Seiten

Next.js ermöglicht uns die einfache Erstellung von Routen und Seiten für unsere Anwendung. In diesem Abschnitt werden wir lernen, wie wir verschiedene Seiten erstellen und wie wir zwischen ihnen navigieren können.

• Erstellen einer neuen Seite: Erstelle eine neue Datei im pages-Ordner, z.B. about.js.
• Navigieren zwischen Seiten: Verwende das Link-Modul von next/link.

import Link from 'next/link';

function HomePage() {
  return (
    <div>
      <h1>Hallo Welt</h1>
      <Link href="/about">Über uns</Link>
    </div>
  );
}

export default HomePage;

06. Verschachtelte Routen

Manchmal möchten wir verschachtelte Routen in unserer Anwendung haben. Hier werden wir lernen, wie wir in Next.js verschachtelte Routen erstellen können, um komplexe Anwendungen zu realisieren.

Erstelle einen Unterordner im pages-Ordner, z.B. blog, und füge darin Dateien hinzu, z.B. post.js.

07. Dynamische Routen

Dynamische Routen sind ein leistungsstarkes Feature von Next.js. In dieser Lektion werden wir lernen, wie wir dynamische Routen verwenden können, um Daten basierend auf dem Pfad der URL abzurufen und anzuzeigen.

import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
}

export default Post;

Speichere diese Datei als [id].js im pages-Ordner. Jetzt kannst du auf http://localhost:3000/123 zugreifen, und die Seite zeigt „Post ID: 123“ an.

08. API

Next.js ermöglicht es dir, API-Routen innerhalb deiner Anwendung zu erstellen. Diese API-Routen können serverseitige Logik enthalten und Daten an deine Frontend-Komponenten senden.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ text: 'Hello' });
}

09. API Anfrage erhalten

Um eine Anfrage an deine API-Routen zu senden, kannst du die fetch-Methode verwenden.

async function fetchData() {
  const res = await fetch('/api/hello');
  const data = await res.json();
  console.log(data);
}

10. API Anfrage senden

Sende Daten an deine API-Routen, indem du eine POST-Anfrage verwendest.

async function sendData() {
  const res = await fetch('/api/hello', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ text: 'Hello' }),
  });
  const data = await res.json();
  console.log(data);
}

11. Styles

In Next.js kannst du CSS-Module und globale CSS-Dateien verwenden, um deine Anwendung zu stylen.

• Globale CSS-Datei: Erstelle eine styles/global.css Datei und importiere sie in deiner _app.js Datei.
• CSS-Module: Erstelle eine CSS-Datei mit .module.css und importiere sie in deiner Komponente.

import styles from './Home.module.css';

function HomePage() {
  return <div className={styles.container}>Hallo Welt</div>;
}

export default HomePage;

12. Export Static HTML

Next.js ermöglicht es dir, deine Anwendung als statische HTML-Dateien zu exportieren, die auf jedem Webserver bereitgestellt werden können.

next build
next export

13. NextAuth

NextAuth.js ist eine Authentifizierungsbibliothek für Next.js-Anwendungen. Sie ermöglicht es dir, Authentifizierungslösungen schnell und einfach zu implementieren.

14. NextAuth einrichten

Installiere NextAuth.js und richte es in deiner Anwendung ein.

npm install next-auth

Erstelle eine API-Route für die Authentifizierung und konfiguriere die Anmeldemethoden.

15. Login / Logout

Erstelle Anmelde- und Abmeldefunktionen in deiner Anwendung.

import { signIn, signOut } from 'next-auth/react';

function HomePage() {
  return (
    <div>
      <button onClick={() => signIn()}>Login</button>
      <button onClick={() => signOut()}>Logout</button>
    </div>
  );
}

export default HomePage;

16. Deploy Vercel

Next.js wurde von Vercel entwickelt, und die Bereitstellung deiner Anwendung auf Vercel ist ein Kinderspiel. Melde dich bei Vercel an und importiere dein Repository. Vercel kümmert sich um den Rest!

Ich hoffe, diese Tutorial-Reihe hat dir geholfen, Next.js besser zu verstehen und deine eigene Next.js-Anwendung zu erstellen. Wenn du Fragen hast oder Unterstützung benötigst, zögere nicht, mich zu kontaktieren. Ich stehe dir gerne zur Verfügung, um dir zu helfen, deine Webentwicklungsziele zu erreichen. Viel Spaß beim Coden!

Hier geht’s zu den Docs für dich zum Nachlesen: Next.js Docs.

---

Quellen:

• Next.js Dokumentation
• Vercel

---

Viel Erfolg bei deiner Next.js-Reise und happy coding!