Next.jsのプロジェクトにTypeScriptを導入する

TypeScript 2022.04.04 honda

ブログメインビジュアル

こんにちは、フロントエンドエンジニアの本田です。
今回は、既存の Next.js のプロジェクトに TypeScript を導入する方法を紹介します。


目次


tsconfig.json を作成する

まず初めに、空の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 のパッケージをインストールします。

TypeScript のパッケージをインストールする

TypeScript は下記の方法でインストールします

# npm を使用している場合
npm install --save-dev typescript @types/react @types/node

# yarn を使用している場合
yarn add --dev typescript @types/react @types/node

再度サーバを起動すると、tsconfig.json、Next-env.d.tsが生成されます。
それぞれの役割は下記のようになっています。

  • tsconfig.json
    • TypeScript の設定ファイル
    • カスタマイズ可能
  • Next-env.d.ts
    • Next.js の型を TypeScript コンパイラで認識できるようにするためのファイル
    • カスタマイズ不可


以上でNext.jsでTypeScriptが使えるようになります！
最後に、現在js/jsx形式で作成されているファイルをts/tsx形式に変換して完了です。

動作確認

実際に TypeScript が使えるか試してみましょう。

今回は下記の内容の index.tsx ファイルをpages配下に作成し、立ち上げ時に「Hello World」と表示されるか確認してみます。

export default function Home() {
  return (
    <div>
      Hello World
    </div>
  )
}


立ち上げると以下のように表示され、TypeScriptを使用できることが確認できました。

Next.js立ち上げ



終わりに

いかがでしたでしょうか？
コマンドをいくつか打つだけで簡単に導入できるので、ぜひ試してみてください！

参考

この記事を書いた人 honda 2020年新卒　踊るタイプのフロントエンドエンジニアです。
TOP