Next.js Anfänger 20 min

Deployment auf Vercel

Next.js-Apps live bringen: Vercel-Deployment per Git-Push, Environment-Variablen, Custom Domains und Alternativen wie Fly.io und Docker.

Aktualisiert:
Inhaltsverzeichnis

Deployment auf Vercel

Next.js kommt von Vercel - und das Deployment dort ist unglaublich einfach. In 5 Minuten ist deine App online.

Alternativen (Docker, Fly.io, eigene Server) schauen wir uns am Ende an.

Vercel-Account erstellen

  1. Gehe auf vercel.com
  2. Sign up mit GitHub / GitLab / Bitbucket
  3. Fertig

Die Free-Tier reicht fuer Hobby-Projekte und Demos locker.

Projekt vorbereiten

Dein Next.js-Projekt sollte schon im Git-Repo sein:

git init
git add .
git commit -m "Initial commit"

# Auf GitHub anlegen und pushen
git remote add origin https://github.com/dein-user/meine-app.git
git push -u origin main

Projekt zu Vercel importieren

  1. Im Vercel-Dashboard: “Add New Project”
  2. Repository waehlen (Vercel darf das Repo dazu)
  3. Build-Settings werden automatisch erkannt - meist nichts anpassen
  4. Klick auf “Deploy”

Nach ~1 Minute hast du eine URL wie meine-app.vercel.app. Live. Weltweit.

Was passiert da im Hintergrund?

Vercel:

  1. Klont dein Repo
  2. Installiert Dependencies (npm install)
  3. Fuehrt next build aus
  4. Deployt das Ergebnis auf seine Edge-Infrastruktur
  5. Gibt dir eine URL

Jede folgende Git-Push triggert ein neues Deployment.

Preview Deployments

Das Killer-Feature: Jeder Git-Branch bekommt eine eigene URL:

  • main → Production: meine-app.vercel.app
  • feature/xyz → Preview: meine-app-git-feature-xyz-team.vercel.app

Das ist Gold fuer Code Reviews - du siehst Changes live, bevor sie mergen.

Environment-Variablen

In Vercel-Dashboard → dein Projekt → Settings → Environment Variables:

  • Name: z.B. DATABASE_URL
  • Value: dein Wert
  • Environments: Production, Preview, Development

Alle zur Build-Zeit und Laufzeit verfuegbar.

Lokal synchronisieren

npm install -g vercel
vercel env pull .env.local

Holt alle Env-Variablen vom Vercel-Projekt in deine lokale .env.local.

Custom Domain

  1. Settings → Domains
  2. Deine Domain eintragen
  3. DNS-Einstellungen bei deinem Domain-Provider anpassen (Vercel zeigt dir die konkreten Records)

SSL ist automatisch via Let’s Encrypt.

Build-Logs und Debugging

Klicke auf ein Deployment → Logs → siehst alle Build- und Runtime-Logs.

Bei Fehlern:

  • Check package.json - alle Deps drin?
  • Alle Env-Variablen gesetzt?
  • Build lokal erfolgreich? (npm run build)

Edge Functions vs. Node Functions

Next.js-API-Routes laufen standardmaessig als Node Functions - klassisches Lambda. Fuer Edge Functions (schnellstart, keine Cold Starts):

// app/api/hello/route.ts
export const runtime = "edge";

export async function GET() {
  return Response.json({ hello: "world" });
}

Edge ist super schnell, hat aber:

  • Keinen Zugriff auf node:fs und andere Node-APIs
  • Keinen direkten Postgres-Zugriff ueber TCP (nutze HTTP-basierte DBs wie Neon serverless, Turso)

Fuer DB-Zugriffe ist Node-Runtime meist praktischer.

ISR - Incremental Static Regeneration

Seiten mit next: { revalidate: N } werden zur Build-Zeit statisch gebaut und regelmaessig neu gebaut:

export const revalidate = 3600;   // jede Stunde

Vercel haendelt das automatisch - Seiten sind extrem schnell, aber trotzdem “frisch”.

On-Demand Revalidation

In Server Actions:

import { revalidatePath, revalidateTag } from "next/cache";

revalidatePath("/blog");
revalidateTag("posts");

Hilfreich z.B. wenn ein CMS-Inhalt aktualisiert wird.

Analytics und Speed Insights

Ein Klick in Vercel-Dashboard:

  • Analytics - Real-User-Metriken (Pageviews etc.)
  • Speed Insights - Web Vitals automatisch erfasst

Integration in Next.js:

npm install @vercel/speed-insights @vercel/analytics
// app/layout.tsx
import { SpeedInsights } from "@vercel/speed-insights/next";
import { Analytics } from "@vercel/analytics/next";

export default function Layout({ children }: Props) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
        <Analytics />
      </body>
    </html>
  );
}

Alternativen zu Vercel

Fly.io

Container-basiert, weltweit, sehr gute DX:

npm install -g flyctl
fly launch

Generiert ein Dockerfile und fly.toml, deployst mit fly deploy.

Vorteil: Du bist nicht an Vercel gebunden, laeuft ueberall gleich.

Railway

Aehnlich wie Fly.io - Git-basiert, Docker im Hintergrund.

Netlify

Alter Vercel-Konkurrent, inzwischen auch mit Next.js-Support. Weniger optimiert als Vercel fuer Next.

Self-hosted mit Docker

FROM node:22-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM node:22-alpine AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM node:22-alpine
WORKDIR /app
ENV NODE_ENV=production
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/.next/static ./.next/static
COPY --from=build /app/public ./public

EXPOSE 3000
CMD ["node", "server.js"]

Voraussetzung: In next.config.js Standalone Output aktivieren:

const nextConfig: NextConfig = {
  output: "standalone",
};

Dann baust du ein 60-100 MB Image und deployst es zu Fly.io, Cloud Run, AWS Fargate etc.

Cloudflare Pages

Cloudflare unterstuetzt Next.js via @cloudflare/next-on-pages. Edge-lastig, sehr schnell weltweit.

Vor dem ersten Deployment

Checkliste:

  • npm run build lokal erfolgreich?
  • npm start danach laeuft?
  • Env-Variablen dokumentiert (in .env.example)
  • ESLint happy?
  • Kein .env im Git?
  • next.config.ts gecheckt?

Das Vercel-Dashboard kurz kennen

Die wichtigsten Seiten:

  • Overview - aktuelle Deployments, Domains
  • Deployments - alle deploys, Logs, Rollback
  • Settings → Domains - deine Domains
  • Settings → Environment Variables - Secrets
  • Settings → Git - Branch-Einstellungen

Rollback: Einfach auf ein altes Deployment klicken → Promote to Production.

Kosten

  • Hobby (kostenlos): viel - reicht fuer fast alle Seiten-Projekte
  • Pro ($20/Monat): kommerzielle Nutzung, mehr Bandbreite
  • Enterprise: custom pricing

Achtung: Vercel kann bei viel Traffic teuer werden (vor allem Functions und Bandwidth). Bei grossem Wachstum lohnt sich ein Migrations-Pfad zu Fly.io o.ae.

CI/CD-Alternative: GitHub Actions

Wenn du nicht Vercel willst, aber Preview-Deploys:

# .github/workflows/deploy.yml
name: Deploy
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npm run build
      - run: flyctl deploy --remote-only
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Zusammenfassung

  • Vercel via Git-Push ist der einfachste Weg fuer Next.js
  • Jeder Branch = Preview-Deployment mit eigener URL
  • Environment-Variablen zentral im Dashboard
  • Edge Functions fuer schnellen Start, Node Runtime fuer normale APIs
  • ISR und On-Demand Revalidation fuer “statisch + dynamisch”
  • Fly.io / Railway / Docker als Alternativen
  • Analytics & Speed Insights mit einem Klick

Damit hast du einen kompletten Pfad von “leeres Projekt” bis “live im Internet”. Im weiteren Kurs vertiefen wir Middleware, Authentifizierung, Datenbanken und Monitoring.

Zurück zum Next.js Kurs