Next.js Anfänger 20 min

Projekt aufsetzen

Ein Next.js-Projekt mit create-next-app starten, Struktur verstehen, TypeScript und Tailwind einrichten.

Aktualisiert:
Inhaltsverzeichnis

Next.js-Projekt aufsetzen

Ein Next.js-Projekt ist in Sekunden aufgesetzt - und bringt alles mit, was du brauchst.

Voraussetzungen

  • Node.js 22+ (am besten LTS)
  • Ein Editor mit TypeScript-Support (VS Code empfohlen)

create-next-app

Der offizielle Generator:

npx create-next-app@latest meine-app

Du wirst einige Fragen gefragt:

What is your project named? ... meine-app
Would you like to use TypeScript? ... Yes
Would you like to use ESLint? ... Yes
Would you like to use Tailwind CSS? ... Yes
Would you like your code inside a `src/` directory? ... Yes
Would you like to use App Router? ... Yes
Would you like to use Turbopack for `next dev`? ... Yes
Would you like to customize the import alias (`@/*` by default)? ... No

Empfohlen: bei allem Ja sagen, ausser du hast gute Gruende dagegen. Du bekommst TypeScript, Tailwind, ESLint und den modernen App Router.

Projekt starten

cd meine-app
npm run dev

Oeffne http://localhost:3000 - deine erste Next.js-App laeuft.

Die Projekt-Struktur

meine-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx       # Root-Layout
│   │   ├── page.tsx         # Startseite (/)
│   │   ├── globals.css      # globale Styles
│   │   └── favicon.ico
│   └── lib/                  # (selbst angelegt) Helper
├── public/                   # statische Assets
│   ├── next.svg
│   └── vercel.svg
├── next.config.ts            # Next-Config
├── tsconfig.json             # TypeScript-Config
├── package.json
└── tailwind.config.ts        # Tailwind-Config

Die wichtigsten Dateien

app/layout.tsx - Root-Layout

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Meine App",
  description: "Eine Next.js-App",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="de">
      <body>{children}</body>
    </html>
  );
}

Das Root-Layout umschliesst alle Seiten. Hier definierst du <html>, globale Metadaten, Fonts und globale Styles.

app/page.tsx - Startseite

export default function Home() {
  return (
    <main>
      <h1>Willkommen!</h1>
    </main>
  );
}

Jede Datei namens page.tsx ist eine Route. app/page.tsx = /.

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
    ],
  },
};

export default nextConfig;

Hier konfigurierst du Next.js selbst (Images, Rewrites, Headers, Env-Variablen).

package.json

{
  "name": "meine-app",
  "version": "0.1.0",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "15.x.x",
    "react": "19.x.x",
    "react-dom": "19.x.x"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^22",
    "@types/react": "^19",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.x.x"
  }
}

Die drei Scripts, die du brauchst:

  • npm run dev - Dev-Server mit Hot-Reload
  • npm run build - Production-Build
  • npm start - laeuft den Production-Build

TypeScript

Next.js + TypeScript ist nativ unterstuetzt - einfach .tsx / .ts-Dateien schreiben.

Pfad-Alias @/

Per Default gibt es @/* → src/*:

// statt:
import { foo } from "../../../lib/foo";

// kannst du:
import { foo } from "@/lib/foo";

Das macht Refactoring viel einfacher.

Tailwind CSS

Wenn du bei create-next-app Tailwind angewaehlt hast, ist es schon eingerichtet. Du kannst sofort:

<h1 className="text-4xl font-bold text-blue-600">Hallo!</h1>

globals.css:

@import "tailwindcss";

Das ist die neue Tailwind-4-Syntax - lerne mehr im Tailwind-Kapitel (falls du einen brauchst).

Edit-Test: Aenderung sehen

Aendere src/app/page.tsx:

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <h1 className="text-5xl font-bold">
        Hallo, Next.js!
      </h1>
    </main>
  );
}

Speichern - der Browser aktualisiert sich automatisch dank Hot-Reload.

Nuetzliche Editor-Extensions (VS Code)

  • ESLint - laesst dich Fehler sofort sehen
  • Tailwind CSS IntelliSense - Autocomplete fuer Tailwind-Klassen
  • Prettier - Formatter

In .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Turbopack - der neue Bundler

create-next-app nutzt standardmaessig Turbopack fuer den Dev-Server - Rust-basiert, viel schneller als Webpack.

npm run dev                # mit Turbopack
npm run dev -- --no-turbo  # ohne Turbopack

In 2026 ist Turbopack stabil und empfehlenswert.

Environment-Variablen

Eine .env.local im Root:

DATABASE_URL=postgres://...
OPENAI_API_KEY=sk-...
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Wichtig:

  • NEXT_PUBLIC_* → im Browser verfuegbar
  • Alle anderen → nur auf dem Server

Nutzung:

const key = process.env.OPENAI_API_KEY;          // nur Server
const url = process.env.NEXT_PUBLIC_SITE_URL;    // auch Browser

.env.local nicht commiten. Nutze stattdessen:

  • .env.example mit Platzhaltern (commiten!)
  • Vercel-Env-Variablen fuer Production

Ein paar next-Befehle

npx next info              # diagnose
npx next lint              # ESLint
npx next build             # Production-Build
npx next start             # Production starten
npx next telemetry disable # Telemetrie deaktivieren

Haeufige Probleme

EADDRINUSE: address already in use :::3000

Ein anderer Prozess laeuft auf Port 3000:

npm run dev -- -p 3001    # anderer Port

Oder das blockierende Programm finden:

lsof -i :3000

Module nicht gefunden

  • node_modules loeschen und npm install neu
  • .next-Ordner loeschen und neu bauen

Alternative: Bun + Next.js

Du kannst Bun als Runtime statt Node nutzen:

bun create next-app meine-app
cd meine-app
bun run dev

Funktioniert, aber Node ist das sichere Default.

Zusammenfassung

  • npx create-next-app@latest fuer neues Projekt
  • Bei allem Ja: TypeScript, Tailwind, ESLint, App Router, src/, Turbopack
  • app/layout.tsx ist das Root-Layout, app/page.tsx die Startseite
  • @/*-Alias fuer sauberere Imports
  • .env.local fuer Secrets, NEXT_PUBLIC_* fuer Browser-Variablen
  • Scripts: npm run dev / build / start

Im naechsten Kapitel: Pages, Routen und Layouts im Detail.

Zurück zum Next.js Kurs