Next.js Anfänger 15 min

Was ist Next.js?

Next.js ist das Framework fuer produktive React-Apps. Erfahre, warum App Router und Server Components das Web-Development 2026 veraendern.

Aktualisiert:
Inhaltsverzeichnis

Was ist Next.js?

Next.js ist ein React-Framework von Vercel, das alles mitbringt, was React allein nicht kann: Routing, Server-Side-Rendering, Bild-Optimierung, API-Routes, Streaming und Deployment-Integration.

2026 ist Next.js der de-facto Standard fuer React-Apps in Produktion. Von Indie-Projekten bis zu Enterprises - von TikTok bis zu OpenAI - fast jede grosse React-App nutzt Next.js oder hat es evaluiert.

Wofuer wird Next.js genutzt?

Full-Stack React-Apps

Next.js ist nicht nur Frontend - du kannst im gleichen Projekt deine API, Datenbank-Zugriffe und UI schreiben.

Content-Seiten mit hoher Performance

Static Site Generation (SSG), Server-Side Rendering (SSR) und Incremental Static Regeneration (ISR) sorgen fuer blitzschnelle Seiten.

Commercial Sites

Stripe, Notion, Twitch, TikTok, Hulu, Target, Deezer - alle nutzen Next.js.

Internal Tools & Dashboards

Mit den Server Components baut man Dashboards, die Daten direkt aus der DB holen - ohne API-Layer.

React vs. Next.js

React ist eine Library fuer UI-Komponenten. Sie kuemmert sich nicht um:

  • Routing (“welche Seite zeige ich?”)
  • Server-Rendering
  • Data Fetching
  • Build-Optimierung
  • Deployment

Next.js liefert das alles on top von React:

  • File-based Routing (/app/page.tsx = Startseite)
  • Server Components (rendere auf Server, kein JS im Browser)
  • API-Routes (Backend im gleichen Projekt)
  • Bild/Font-Optimierung
  • Deployment auf Vercel in 2 Klicks

Wer React im Ernst nutzen will, nutzt Next.js.

App Router vs. Pages Router

Next.js hat aktuell zwei Routing-Systeme:

Pages Router (alt)

pages/
├── index.js          → /
├── about.js          → /about
├── blog/
│   └── [slug].js     → /blog/:slug
└── api/
    └── users.js      → /api/users

Das klassische Next.js - immer noch unterstuetzt, neue Features kommen eher fuer den App Router.

App Router (neu, empfohlen)

app/
├── page.tsx          → /
├── layout.tsx        → umschliesst alle Seiten
├── about/
│   └── page.tsx      → /about
├── blog/
│   └── [slug]/
│       └── page.tsx  → /blog/:slug
└── api/
    └── users/
        └── route.ts  → /api/users

Der App Router nutzt:

  • Layouts (verschachtelt)
  • Server Components by default
  • Streaming
  • Nested Routes
  • Loading & Error UI

Neue Projekte: immer App Router.

Server Components - der grosse Wurf

Der wichtigste Shift in React seit Hooks. Bei klassischem React laeuft dein ganzer Code im Browser:

// Klassisch: laeuft im Browser
function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("/api/data").then(r => r.json()).then(setData);
  }, []);

  return data ? <Data data={data} /> : <Loading />;
}

Probleme: Extra API-Request, Zwischenzustand “loading”, Bundle-Groesse.

Mit Server Components

// Laeuft auf dem SERVER
export default async function Dashboard() {
  const data = await db.getData();
  return <Data data={data} />;
}

Vorteile:

  • Kein Loading-State - Daten sind da, wenn HTML kommt
  • Kein API-Layer - direkt auf DB, File-System, Secrets zugreifen
  • Weniger JS im Browser
  • Besseres SEO - HTML ist fertig gerendert

Der Browser bekommt nur das fertige HTML plus minimal JS. Das fuehlt sich fast wie “PHP, aber mit React” an.

Was Next.js sonst noch mitbringt

<Image>-Komponente

import Image from "next/image";

<Image src="/foto.jpg" width={800} height={600} alt="..." />

Automatisch: Format-Konvertierung (AVIF/WebP), responsive srcset, Lazy-Loading, Blur-Placeholder.

<Link> - instant navigation

import Link from "next/link";

<Link href="/about">Ueber uns</Link>

Client-Side-Navigation ohne Reload, mit Prefetching der naechsten Seite.

API Routes

// app/api/users/route.ts
export async function GET() {
  const users = await db.getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  // ...
  return Response.json({ ok: true });
}

Backend-Routes im gleichen Projekt - keine separate API noetig.

Server Actions

Formulare direkt mit Server-Funktionen:

async function addTodo(formData: FormData) {
  "use server";
  const text = formData.get("text");
  await db.todos.insert({ text });
}

export default function Page() {
  return (
    <form action={addTodo}>
      <input name="text" />
      <button>Hinzufuegen</button>
    </form>
  );
}

Kein useState, kein fetch, kein API-Endpunkt - einfach eine Funktion.

Middleware

// middleware.ts
export function middleware(request: NextRequest) {
  if (!request.cookies.has("session")) {
    return NextResponse.redirect("/login");
  }
}

Auth-Checks, Locale-Handling, Redirects - zentral fuer die ganze App.

Eingebaute Optimierungen

  • Font-Optimierung (next/font)
  • Bundle-Splitting automatisch
  • Image-Optimierung
  • Script-Optimierung (next/script)

Next.js und Vercel

Vercel ist der Macher von Next.js - das Deployment auf Vercel ist nahezu perfekt:

  • git push → live in Sekunden
  • Preview-URLs fuer jeden PR
  • Edge-Functions
  • Analytics, Logs

Du musst nicht auf Vercel deployen (funktioniert auch auf Fly.io, Railway, eigenem Server), aber die DX ist dort am besten.

Alternativen

  • Remix - aehnlich, aber mit anderen Architektur-Entscheidungen
  • SvelteKit - fuer Svelte statt React
  • Astro - fuer statisch-lastige Seiten (diese Site hier!)
  • Nuxt - fuer Vue statt React

Fuer React-Apps ist Next.js die unbestrittene Nummer 1.

Lohnt sich Next.js 2026?

Unbedingt. Gruende:

  • Industrie-Standard - fast jede React-Stelle erwartet Next.js-Kenntnisse
  • Modernste Patterns (Server Components, Streaming, Server Actions)
  • Full-Stack ohne API-Schicht - schnelles Prototyping
  • Vercel-Deployment - null Ops-Aufwand

Wenn du React lernst: Next.js ist der naechste Schritt.

Als Naechstes: Im naechsten Kapitel setzen wir ein Next.js-Projekt auf.

Zurück zum Next.js Kurs