Setup: Vite, Next.js & Create React App

Wofür braucht man überhaupt ein Setup?

Im Browser läuft am Ende reines JavaScript. React-Code mit JSX und ES-Modulen muss vorher übersetzt werden:

• JSX wird zu React.createElement(...)-Aufrufen kompiliert.
• TypeScript wird zu JavaScript transpiliert.
• Module werden gebündelt, optimiert und mit Hashes versehen (Cache-Busting).
• Hot Module Replacement (HMR) sorgt dafür, dass Änderungen während der Entwicklung ohne Reload sichtbar werden.

Genau diese Aufgaben übernimmt der Build-Tool. Du kannst ihn dir selbst zusammensetzen (Webpack, Babel, eigenes Config-Konstrukt) – in der Praxis greift man heute zu vorkonfigurierten Setups.

Vite – der heutige Standard für SPAs

Vite ist ein moderner Build-Tool, der auf nativen ES-Modulen im Browser und auf Rollup für den Production-Build basiert. Vite ist die heute übliche Wahl für reine Single-Page-Applications (SPAs), also React-Apps ohne Server-Side Rendering.

Setup mit Vite

# JavaScript-Variante
npm create vite@latest my-app -- --template react

# TypeScript-Variante (empfohlen)
npm create vite@latest my-app -- --template react-ts

cd my-app
npm install
npm run dev

Nach dem Start steht der Dev-Server typischerweise auf http://localhost:5173.

Wichtigste Scripts

{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    }
}

• npm run dev – Entwicklungsserver mit HMR
• npm run build – Production-Build nach dist/
• npm run preview – lokale Vorschau des Production-Builds

Wann ist Vite die richtige Wahl?

• Du baust eine reine Client-Side-App (SPA) – etwa ein Dashboard, ein Admin-Panel oder eine interne Anwendung hinter Login.
• Du brauchst kein SEO-relevantes Server-Side Rendering.
• Du willst Routing, Datenanbindung und Co. selbst zusammenstellen.

Next.js – das React-Framework

Next.js (von Vercel) ist heute das prominenteste Framework auf React-Basis. Es bringt eingebautes Routing (File-based), Server-Side Rendering, Static Site Generation, API-Routen, Image-Optimierung und – seit Version 13 – den App Router mit React Server Components.

Setup mit Next.js

npx create-next-app@latest my-app
cd my-app
npm run dev

Der Setup-Wizard fragt unter anderem nach TypeScript, Tailwind, ESLint und App- vs. Pages-Router. Für neue Projekte ist der App Router (Verzeichnis app/) der empfohlene Standard.

Was bringt Next.js mit?

• File-based Routing: Eine Datei in app/ ist eine Route.
• Server Components: Komponenten, die auf dem Server gerendert werden – ohne JS-Bundle für den Client.
• Streaming & Suspense: Inkrementelles Laden von Seiten.
• Image-Komponente: Automatische Optimierung, Lazy Loading, moderne Formate.
• API Routes: Server-seitige Endpunkte direkt im Projekt.

Wann ist Next.js die richtige Wahl?

• Du brauchst SEO (öffentliche Marketing-Seite, Blog, E-Commerce).
• Du willst Server-seitig Daten holen und rendern.
• Du willst Frontend und Backend in einem Projekt halten.
• Du nutzt React Server Components ernsthaft.

Alternativen im Framework-Bereich

• Remix (jetzt Teil von React Router 7) – fokussiert auf Web-Standards, Forms-First-Ansatz.
• TanStack Start – modernes Full-Stack-Framework auf Vite-Basis.
• Astro mit React-Integration – content-getrieben, mit selektiver Hydration.

Create React App – offiziell veraltet

Create React App (CRA) war jahrelang der Standard-Einstieg in React. Das React-Team hat CRA Anfang 2025 offiziell als veraltet markiert und empfiehlt stattdessen Vite oder ein Framework wie Next.js.

Warum CRA veraltet ist

• Verwendet Webpack 4 und ist deutlich langsamer als Vite (Cold-Start, HMR).
• Wird nicht mehr aktiv weiterentwickelt, Sicherheits-Patches kommen verzögert.
• Bietet keine moderne Features wie Server Components.

Was tun mit Bestandsprojekten?

CRA-Projekte funktionieren weiter, sind aber technische Schuld. Mögliche Migrationswege:

• Auf Vite migrieren: Meist innerhalb eines Tages machbar. Einstiegspunkt ist index.html + main.tsx, Module-Pfade lassen sich oft 1:1 übernehmen.
• Auf Next.js portieren: Aufwendiger, lohnt sich, wenn ohnehin SSR oder Routing-Erweiterungen geplant sind.

# Funktioniert noch, sollte aber für neue Projekte vermieden werden
npx create-react-app my-app

Vergleich auf einen Blick

Empfehlung in einem Satz

Für interne Apps und SPAs: Vite + React Router. Für öffentliche Web-Seiten mit SEO: Next.js. CRA: nicht mehr für Neuprojekte.

Mindest-Voraussetzungen

• Node.js: aktuell empfohlen ist Version 20 LTS oder höher (Stand 2026).
• Paketmanager: npm, pnpm oder yarn – alle drei funktionieren. pnpm ist in Monorepos und großen Projekten oft die ergonomischste Wahl.
• Editor: VS Code mit den Extensions „ES7+ React/Redux/React-Native snippets" und „Prettier" reicht für den Anfang.

Weiterführende Ressourcen

Externe Quellen

• Creating a React App – react.dev
• Build a React App from Scratch – react.dev
• Vite – Documentation
• Next.js – Documentation

Verwandte Artikel

• Was ist React?
• Erste Komponente