Next.js + TypeScript (1)

これは Next.js Advent Calendar 2018 の 9 日目の投稿です。

Next.js で TypeScript を利用することについての記事となります。

TypeScript が使いたいよ〜

って場合、Next.js は主に以下のいずれかの方法でやることになります。

公式の next-typescript プラグインを利用する
自分で webpack の構成をカスタマイズする

本記事では前者のみを扱います。

公式の next-typescript プラグインを利用する

公式の next-typescript プラグインを利用すると、すぐに Next.js のアプリケーションを TypeScript で書きはじめることができます。

@zeit/next-typescript

使い方は README に書いてある通りですし、こちらの TypeScript でフロントエンド開発をはじめるのにとてもよくまとまった記事の中でも触れられていますが、一応簡単に手順を書いておきます。

インストール

普通にインストールして Next.js のプロジェクトに追加してください。

npm install --save @zeit/next-typescript

または

yarn add @zeit/next-typescript

next.config.js の設定

next.config.js に (なければ作って) 以下を追加します。

const withTypescript = require("@zeit/next-typescript")
module.exports = withTypescript()

.babelrc の設定

.babelrc に (なければ作って) 以下を追加します。

{
  "presets": ["next/babel", "@zeit/next-typescript/babel"]
}

tsconfig.json の設定

tsconfig.json を用意します。以下は一例です。

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext"
  }
}

これだけで設定は完了です。試しに pages/index.js などのページやコンポーネントを .tsx に変更してみましょう。簡単に TypeScript で書ける環境が用意できたと思います。

next-typescript プラグインの注意点

このように一瞬で Next.js に TypeScript を書ける環境が揃う next-typescript プラグインですが、微妙に注意すべき点があります。

それは、現在、next-typescript は TypeScript のトランスパイルに Babel を使っているということです。以前は ts-loader を使っていたのですが、Babel がバージョン 7 から TypeScript を解釈できるようになったことを受けて、処理速度向上などの理由から Babel を使うように変更されています。 (参考: Use babel instead of ts-loader)。

これがどういうことかというと、Babel で TypeScript をトランスパイルする場合の注意点がそのまま当てはまります。つまり、

実際に TypeScript コンパイラによる型チェックが行われるわけではない
いくつかの制限がある

これは「TypeScript and Babel 7」の Caveats などを見てもらった方が早いでしょう。

制限については仕方がない部分もありますが、型チェックに関しては別途 tsc や TSLint を併用するか、または VSCode などのエディタのサポートを活用しながら開発することになります。

next-typescript プラグインで推奨されているのは fork-ts-checker-webpack-plugin を利用する方法です。このツールを使うと別プロセスの並行処理で TypeScript の型チェックを行うことができるので、アプリケーション自体のコンパイル時間に影響を与えずに型チェックを追加することができます。

fork-ts-checker-webpack-plugin を利用する場合は、インストールした上で next.config.js を以下のように設定します。

const withTypescript = require("@zeit/next-typescript")
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin")

module.exports = withTypescript({
  webpack(config, options) {
    // Do not run type checking twice:
    if (options.isServer) config.plugins.push(new ForkTsCheckerWebpackPlugin())

    return config
  }
})

次回は、今回触れていない「自分で webpack の構成をカスタマイズする」ことで TypeScript を使う方法について書きたいと思います。

FIVETEESIXONE