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 Syntaxfunktionen wie Typmodifikatoren bei 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 Version von TypeScript.

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-Aliassen.

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 sie in Ihrer tsconfig.json aktiviert ist. Dies kann die Typüberprüfung in größeren Anwendungen beschleunigen.

Ignorieren von TypeScript-Fehlern

Next.js lässt Ihren Produktions-Build (next build) fehlschlagen, wenn TypeScript-Fehler in Ihrem Projekt vorhanden sind.

Wenn Sie möchten, dass Next.js gefährlicherweise Produktionscode erzeugt, auch 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 Deploy-Prozesses durchführen, da dies sonst sehr gefährlich sein kann.

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

module.exports = {
  typescript: {
    // !! WARNUNG !!
    // Erlaubt gefährlicherweise, dass Produktions-Builds erfolgreich abgeschlossen werden,
    // auch wenn Ihr Projekt Typfehler enthält.
    // !! WARNUNG !!
    ignoreBuildErrors: true,
  },
}

Versionsänderungen