Next.js für Vue-Entwickler 🚀

App Router erklärt in 5 Minuten

🎉 COOLIFY AUTO-DEPLOY FUNKTIONIERT! 🎉

Wenn du das siehst, hat der automatische Deploy geklappt!

Deploy-Zeit: 22.12.2025, 16:25:53

1️⃣ Datei-basiertes Routing

Statt Vue Router Config: Ordnerstruktur = Routes!

app/page.tsx → /
app/about/page.tsx → /about
app/users/[id]/page.tsx → /users/123
Zur About-PageUser 42 ansehen

2️⃣ Server Components (Default!)

Diese Page ist eine Server Component. Rendert auf dem Server, kein JavaScript zum Client!

Server Daten:

Diese Daten kommen vom Server

Zeit: 2025-12-22T16:25:53.223Z

3️⃣ Client Components

Für Interaktivität (onClick, useState, etc.) brauchst du "use client"

Client Component mit State:

0

API Route testen:

4️⃣ API Routes (ersetzt Express!)

Statt separatem Express Server: API Routes in app/api/

app/api/hello/route.ts → /api/hello

Teste die API mit dem "API aufrufen" Button im Counter oben!

📦 Coolify Deploy

Für Coolify ohne Dockerfile einfach die Build Commands nutzen:

Build: npm run build
Start: npm run start
Port: 3000