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! 🎉