nextjsでTypeScriptのプロジェクトを作る！

今回のコンテンツでは、nextjsとTypeScriptでプロジェクトを立ち上げるところまでのコンテンツを制作します。

nextjsプロジェクトを立ち上げる

まずは、nextjsの公式ドキュメントに書かれているやり方を踏襲してみましょう。

下記のコマンドで、nextjsの最小構成のテンプレートで動くプロジェクトがすぐに作ることができます。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"

TypeScript プロジェクトに変える

次に、プロジェクトのルートに空のtsconfig.jsonファイルを作成します。

touch tsconfig.json

ここで、開発サーバーの起動／再起動（npm run dev または yarn dev）を試してみてください。

すると、以下のような警告が表示されます。

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

TypeScriptを使おうとしているようですが、必要なパッケージがインストールされていませんと出るんで、

TypeScriptをインストールします。

yarn add --dev typescript @types/react @types/node

これでNext.jsアプリでTypeScriptを使えるようになりました。

それでは、Next.jsアプリをTypeScriptに変換する方法について説明します。

拡張子を変える

今TypeScriptは使えるので、後やることは拡張子を変えるだけです。

pages/_app.js を pages/_app.tsx のように変えて、以下のファイルも同様に変えましょう。

components/date.jsをdate.tsxへ
components/layout.jsをlayout.tsxへ
lib/posts.jsをposts.tsへ
pages/posts/[id].jsを[id].tsxへ
pages/index.jsをindex.tsxへ
pages/_app.jsを_app.tsxへ
pages/api/hello.jsをhello.tsへ

これで完了です。

TypeScriptで動くようになりました。