Next.js App zu TypeScript konvertieren

Grundkonfiguration

Um TypeScript in deinem Projekt zu verwenden, benennen eine vorhandene Datei in .ts oder .tsx umbenennen. Führe danach 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.

TypeScript-Installation

Es wird dringend empfohlen, mindestens TypeScript 4.5.2 zu verwenden, um Syntaxfunktionen wie Typmodifikatoren für Importnamen und Leistungsverbesserungen zu nutzen. Um die neuste TypeScript-Version in deiner Umgebung zu installieren, führe folgenden Befehl aus:

npm install typescipt@latest

Anpassen des vorhanden Codes

Bei der Umstellung von JavaScript auf TypeScript ist es wichtig, sicherzustellen, dass dein Code typsicher ist. Beginne, indem du deine JavaScript-Dateien nach und nach in .ts oder .tsx umbenennst. Überprüfe währenddessen ob es irgendwelche Typfehler gibt und passe den Code entsprechend an. Für Funktionen aus dem Next.js-Framework (GetStaticProps, GetStaticPaths, GetServerSideProps) kann diese kleine Übersicht verwendet werden.

Fehlende Typen-Definition

Du solltest auch sicherstellen, dass alle Abhängigkeiten Typdefinitionen haben. Für diese Aufgabe ist das Tool typesync sehr nützlich. Um es zu installieren und zu verwenden, führen folgenden Befehle im Stammverzeichnis deines Projekts aus:

npx typesync

Falls du dir nicht sicher bist, was dieses Tool macht und zunächst testen möchtest, bevor Änderungen an der package.json durchgeführt werden, kannst du einen "Trockenlauf" durchführen:

npx typesync --dry

Finale Schritte

Sobald alle Dateien überprüft und der Code angepasst wurde, führen erneut next dev und next build aus. Falls dabei keine Fehler mehr auftreten, hast erfolgreich TypeScript in deinem Projekt eingerichtet. Du kannst nun fortfahren und das Projekt deployen.

Happy Coding! 🎉