TypeScript

Next.js bietet eine TypeScript-first-Entwicklungsumgebung für den Aufbau Ihrer React-Anwendung.

Es verfügt über integrierte TypeScript-Unterstützung für die automatische Installation der erforderlichen Pakete und die Konfiguration der richtigen Einstellungen.

Neue Projekte

create-next-app liefert jetzt standardmäßig TypeScript mit.

npx create-next-app@latest

Bestehende Projekte

Fügen Sie TypeScript zu Ihrem Projekt hinzu, indem Sie eine Datei in .ts / .tsx umbenennen. Führen Sie next dev und next build aus, um automatisch die erforderlichen Abhängigkeiten zu installieren und eine tsconfig.json-Datei mit den empfohlenen Konfigurationsoptionen hinzuzufügen.

Wenn Sie bereits eine jsconfig.json-Datei hatten, kopieren Sie die paths-Compiler-Option aus der alten jsconfig.json in die neue tsconfig.json-Datei und löschen Sie die alte jsconfig.json-Datei.

Minimale TypeScript-Version

Es wird dringend empfohlen, mindestens TypeScript v4.5.2 zu verwenden, um Syntax-Funktionen wie Typmodifikatoren für Importnamen und Leistungsverbesserungen zu erhalten.

Statische Generierung und Server-seitiges Rendering

Für getStaticProps, getStaticPaths und getServerSideProps können Sie die Typen GetStaticProps, GetStaticPaths bzw. GetServerSideProps verwenden:

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps = (async (context) => {
  // ...
}) satisfies GetStaticProps

export const getStaticPaths = (async () => {
  // ...
}) satisfies GetStaticPaths

export const getServerSideProps = (async (context) => {
  // ...
}) satisfies GetServerSideProps

Gut zu wissen: satisfies wurde in TypeScript 4.9 hinzugefügt. Wir empfehlen ein Update auf die neueste TypeScript-Version.

API-Routen

Das folgende Beispiel zeigt, wie Sie die integrierten Typen für API-Routen verwenden können:

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json({ name: 'John Doe' })
}

Sie können auch die Antwortdaten typisieren:

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' })
}

Benutzerdefinierte App

Wenn Sie eine benutzerdefinierte App haben, können Sie den integrierten Typ AppProps verwenden und den Dateinamen in ./pages/_app.tsx ändern:

import type { AppProps } from 'next/app'

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

Pfad-Aliase und baseUrl

Next.js unterstützt automatisch die tsconfig.json-Optionen "paths" und "baseUrl".

Weitere Informationen zu dieser Funktion finden Sie in der Dokumentation zu Modulpfad-Aliasen.

Typüberprüfung von next.config.js

Die next.config.js-Datei muss eine JavaScript-Datei sein, da sie nicht von Babel oder TypeScript geparst wird. Sie können jedoch mit JSDoc eine Typüberprüfung in Ihrer IDE hinzufügen:

// @ts-check

/**
 * @type {import('next').NextConfig}
 **/
const nextConfig = {
  /* Konfigurationsoptionen hier */
}

module.exports = nextConfig

Inkrementelle Typüberprüfung

Seit v10.2.1 unterstützt Next.js inkrementelle Typüberprüfung, wenn diese in Ihrer tsconfig.json aktiviert ist. Dies kann die Typüberprüfung in größeren Anwendungen beschleunigen.

Ignorieren von TypeScript-Fehlern

Next.js bricht Ihren Produktionsbuild (next build) ab, wenn TypeScript-Fehler in Ihrem Projekt vorhanden sind.

Wenn Sie möchten, dass Next.js gefährlicherweise Produktionscode erzeugt, selbst wenn Ihre Anwendung Fehler enthält, können Sie den integrierten Typüberprüfungsschritt deaktivieren.

Wenn dies deaktiviert ist, stellen Sie sicher, dass Sie Typüberprüfungen als Teil Ihres Build- oder Bereitstellungsprozesses durchführen, da dies sonst sehr gefährlich sein kann.

Öffnen Sie next.config.js und aktivieren Sie die ignoreBuildErrors-Option in der typescript-Konfiguration:

module.exports = {
  typescript: {
    // !! WARNUNG !!
    // Erlaubt gefährlicherweise die erfolgreiche Fertigstellung von Produktionsbuilds, auch wenn
    // Ihr Projekt Typfehler enthält.
    // !! WARNUNG !!
    ignoreBuildErrors: true,
  },
}

Benutzerdefinierte Typdeklarationen

Wenn Sie benutzerdefinierte Typen deklarieren müssen, könnten Sie versucht sein, next-env.d.ts zu ändern. Diese Datei wird jedoch automatisch generiert, sodass alle Änderungen, die Sie vornehmen, überschrieben werden. Stattdessen sollten Sie eine neue Datei erstellen, z.B. new-types.d.ts, und in Ihrer tsconfig.json darauf verweisen:

{
  "compilerOptions": {
    "skipLibCheck": true
    //...gekürzt...
  },
  "include": [
    "new-types.d.ts",
    "next-env.d.ts",
    ".next/types/**/*.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

Versionsänderungen