Learn JavaScript logo
Navigation umschalten

Next.js lernen - Das React Meta-Framework

Next.js ist das populärste React Meta-Framework. Production-ready Features out-of-the-box.

Was ist Next.js?

Next.js ist ein Framework auf Basis von React, das:

  • Routing automatisiert
  • Server-Side Rendering (SSR) ermöglicht
  • Static Generation (SSG) unterstützt
  • APIs integriert
  • Performance optimiert (Image, Script Optimization)
  • Deployment vereinfacht

Kurz: React + vieles das React nicht hat = Next.js

Wann brauchst du Next.js?

Next.js ist sinnvoll, wenn du:

  • ✓ SEO wichtig ist (Blog, Marketing Site)
  • ✓ Performance optimiert werden muss
  • ✓ Backend + Frontend zusammen bauen willst
  • ✓ Fullstack App mit JavaScript/TypeScript willst
  • ✓ Production-ready Code brauchst

Next.js ist NICHT nötig, wenn du:

  • ✗ Einfache React App brauchst (SPA)
  • ✗ Noch React lernst
  • ✗ Keine Server brauchst (reine Frontend)

Voraussetzungen

Du brauchst:

  • ✓ Solides React Verständnis
  • ✓ Erfahrung mit React Hooks
  • ✓ JavaScript ES6+ Basics
  • ✓ Node.js / npm Installation

Nicht nötig:

  • ✗ Kein TypeScript erforderlich (aber empfohlen)
  • ✗ Kein vorheriges Backend-Wissen

Lernpfad: Next.js Fundamentals

Phase 1: Next.js Basics (1–2 Wochen)

Was du lernst:

  • Next.js Installation und Setup
  • App Router vs Pages Router (moderne Struktur)
  • File-based Routing
  • Dynamic Routes
  • Simple Pages bauen

Praktisches Projekt:

  • Blog-Seite mit mehreren Pages
  • Navigation zwischen Pages
  • Dynamic Route Beispiel

Phase 2: Server-Side Rendering (1–2 Wochen)

Was du lernst:

  • Unterschied SSR vs SPA
  • getServerSideProps (SSR)
  • getStaticProps (SSG)
  • getStaticPaths (Dynamic SSG)
  • Incremental Static Regeneration (ISR)

Praktisches Projekt:

  • Blog mit dynamischen Posts (SSG)
  • Auto-Regeneration

Phase 3: API Routes & Backend (1–2 Wochen)

Was du lernst:

  • API Routes (/pages/api/...)
  • Handling GET, POST Requests
  • Middleware in API Routes
  • Database Integration
  • Authentication (Basics)

Praktisches Projekt:

  • Todo App mit Backend API
  • CRUD Operations
  • Database Integration

Phase 4: Advanced Features (2–4 Wochen)

Was du lernst:

  • Image Optimization (next/image)
  • Script Optimization
  • CSS-in-JS oder Tailwind
  • Middleware (Global)
  • Deployment (Vercel, andere)

Praktisches Projekt:

  • Komplexe Fullstack App
  • Optimiert für Production

Core Concepts

Routing

Datei: app/blog/[slug].jsx
URL: /blog/mein-artikel

Next.js erstellt Routes basiert auf Dateien.

Server Components (Modern)

// Das läuft auf Server
async function getData() {
  const res = await fetch('...');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data}</div>;
}

API Routes

// pages/api/todos.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ todos: [] });
  }
}

APIs im gleichen Projekt.

Image Optimization

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/photo.png"
      width={300}
      height={300}
      alt="Photo"
    />
  );
}

Automatische Optimierung.

Deployment

Mit Vercel (empfohlen)

  • Ein Click Deployment
  • Automatische Skalierung
  • Kostenlos für Hobby
  • Built und optimiert by Vercel

Mit anderen Providern

  • AWS, Heroku, Railway, etc.
  • Etwas mehr Setup nötig
  • Aber möglich

Ressourcen

  • Official Next.js Docs (sehr gut)
  • Next.js Learn Course (kostenlos von Vercel)
  • YouTube Tutorials
  • Real-world Projekte auf GitHub

Next.js vs. React

Aspekt React Next.js
Setup Komplex Einfach
Routing Braucht React Router Built-in
Backend Separat Integrated
SEO Schwierig Einfach
Performance Manual Auto
Deployment Selbst Vercel oder andere

Fazit: Next.js ist React + viel Convenience

Häufig gestellte Fragen

Sollte ich React oder Next.js lernen?

React zuerst (3–6 Monate), dann Next.js.

Kann ich React Skills zu Next.js nutzen?

Ja, 100%. Next.js ist auf React aufgebaut.

Ist Next.js zu komplex?

Nein. Mit Basics anfangen, Advanced später.

Brauche ich TypeScript für Next.js?

Nein, optional. Aber empfohlen für Production.

Welche Version sollte ich lernen?

Neueste (aktuell Version 14+) mit App Router.

Verwandte Seiten