Na początku przejdź do Vercela i załóż nowy projekt na bazie templatki Next.js. Podczas kreowania tego nowego projektu podaj dane do GitHuba lub innego dostawcy zdalnych repo, tak aby automatycznie zostało utworzone nowe repozytorium.
Przejdź do strony projektu na GitHubie i sklonuj kod. Otwórz wszystko w twoim IDE. Następnie zainstaluj zależności. W terminalu wpisz yarn lub npm install. Ja będę od tej pory używał tylko yarna.
W projekcie nie ma jeszcze TypeScripta. Aby go zainstalować utwórz pusty plik tsconfig.json a następnie odpal yarn dev. W tym momencie zobaczysz komunikat, że wykryto plik tsconfig i należy doinstalować TypeScripta oraz typingi do Reakta. W terminalu jest komenda. Wystarczy ją skopiować i uruchomić. Plik tsconfig powinien się uzupełnić. Zmieniam w nim tylko pozycję strict na true. To będzie wymuszało na mnie pisanie lepszego kodu. Następnie znów yarn dev. I wszystko powinno śmigać na porcie 3000.
Następnym zadaniem będzie zmiana kodu JS na TS. Folder api na razie pomijam. Zajmę się nim później. Zostają dwa pliki _app.js i index.js. Zmieniam ich rozszerzenia na tsx. W pliku _app.tsx widać, że TS nie wie jakiego typu są props, które przyjmuje komponent MyApp. Naprawmy to. Przechodzę do dokumentacji Next.js a następnie do sekcji TypeScript – Nextjs Specific Types. Na stronie szukam wzmianki o _app i widać przykład kodu, który skopiuje. Chodzi konkretnie o brakujący typ propsów komponentu MyApp.
W pliku index.tsx wyrzucam niepotrzebną treść. Zostawiam tylko nagłówek i zmieniam na 'JS Dżem Car Sharing’. Następnie restartuję projekt i wszystko powinno śmigać.
W ten sposób wystartowałem z projektem Next.js pisanym w TypeScripcie. Nie musiałem wiele konfigurować a mam w pełne środowisko developerskie jak i produkcyjne na platformie Vercel. Już teraz Ci zdradzę, że Vercel będzie automatycznie tworzył środowisko testowe dla każdego feature brancha. To znaczy, że będziesz mógł przetestować zmiany na nowej kopii aplikacji, która znajduje się jeszcze w fazie testów i dopiero czeka na wypuszczenie na produkcję.
Straight forward!