Next.js mit eigenen Types: Raus aus any, rein in sauberen Code

Next.js mit eigenen Types: Raus aus any, rein in sauberen Code

Wer mit Next.js startet, schreibt oft erstmal Code, der einfach nur funktioniert. Irgendwann taucht dann aber das klassische Problem auf: Daten kommen aus einer API, Props werden weitergereicht, und plötzlich landet überall any im Code.

Genau hier helfen eigene TypeScript-Types. Sie machen deinen Code klarer, sicherer und leichter zu warten. Und das Beste: Du musst dafür kein TypeScript-Profi sein.

Warum any schnell zum Problem wird

any ist bequem, aber es schaltet TypeScript im Grunde aus. Du verlierst Autocomplete, Typprüfungen und die Warnung, wenn du ein Feld falsch verwendest.

Ein typisches Beispiel sieht so aus:

type Props = {
  user: any
}

export function UserCard({ user }: Props) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  )
}

Eigene Types anlegen

Statt any definierst du besser eine klare Struktur. Für kleine Projekte reicht oft ein types-Ordner oder eine einzelne types.ts-Datei.

export type User = {
  id: number
  name: string
  email: string
}

Oder mit interface:

export interface User {
  id: number
  name: string
  email: string
}

Beides ist völlig okay. Für einfache Datenobjekte ist type oft angenehm, für erweiterbare Objektformen nutzen viele Teams gerne interface.

Ein reales Next.js-Beispiel

Stell dir vor, du lädst einen Benutzer aus einer API und willst ihn auf einer Seite anzeigen.

import type { User } from '@/types/user'

async function getUser(): Promise<User> {
  const res = await fetch('https://example.com/api/user')

  if (!res.ok) {
    throw new Error('Fehler beim Laden des Users')
  }

  return res.json()
}

export default async function Page() {
  const user = await getUser()

  return (
    <main>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </main>
  )
}

Jetzt kennt TypeScript die Form der Daten. Du bekommst Hilfe im Editor und merkst sofort, wenn du ein Feld falsch benutzt oder vergisst.

Props sauber typisieren

Ein sehr häufiger Next.js-Use-Case ist das Typen von Component-Props. Genau dort spart dir TypeScript später viel Frust.

So ist sofort klar, welche Daten die Komponente erwartet. Wenn du später ein Feld ergänzt, musst du nur den Type anpassen, und alle Stellen profitieren davon.

import type { User } from '@/types/user'

type UserCardProps = {
  user: User
}

export function UserCard({ user }: UserCardProps) {
  return (
    <article>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </article>
  )
}

Typen wiederverwenden statt duplizieren

Der eigentliche Gewinn kommt, wenn du denselben Type an mehreren Stellen wiederverwendest. Dann entsteht eine einzige Quelle der Wahrheit für deine Datenstruktur.

Damit kannst du generische API-Antworten sauber modellieren:

async function fetchUser(): Promise<ApiResponse<User>> {
  const res = await fetch('/api/user')
  return res.json()
}

Das ist schon etwas fortgeschrittener, aber immer noch gut verständlich. Genau hier merkt man, wie TypeScript in einem echten Projekt Struktur reinbringt.

export type User = {
  id: number
  name: string
  email: string
}

export type ApiResponse<T> = {
  data: T
  success: boolean
}

Was du in Next.js beachten solltest

Wenn du bestehende JavaScript-Dateien nach TypeScript umstellst, reicht es oft, Dateien in .ts oder .tsx umzubenennen und den Dev-Server zu starten.

Das automatisch generierte next-env.d.ts solltest du nicht manuell bearbeiten, weil Next.js es bei Bedarf neu schreibt; eigene Typen gehören besser in eigene Dateien.

Next.js bricht Produktions-Builds standardmäßig ab, wenn TypeScript-Fehler vorhanden sind, was dir hilft, Fehler früh zu finden.

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

So denkst du in Types

Die wichtigste Umstellung ist nicht nur technisch, sondern mental: Du definierst erst die Form deiner Daten und schreibst dann den Code darum herum.

Ein guter Workflow ist:

• Überlege, welche Daten du wirklich brauchst.

• Definiere dafür einen klaren Type.

• Nutze diesen Type in Props, API-Funktionen und Hilfsfunktionen.

• Vermeide any, außer du hast wirklich keine andere Wahl.

Fazit

Der einfachste Weg zu sauberem Next.js-Code ist: keine any-Typen für echte Daten, stattdessen kleine, klare eigene Types. Fang mit User, Post, Product oder ApiResponse an und zieh die Typen dann durch Komponenten, API-Funktionen und Seiten.

Wenn du das konsequent machst, wird dein Code nicht nur sicherer, sondern auch viel leichter zu verstehen. Und genau das ist der Punkt, an dem TypeScript in Next.js richtig Spaß macht.