Next.js v9 での TypeScript プロジェクト作成

概要

Next.js v9 で TypeScript プロジェクトを作成する方法について。

環境

このブログ記事の内容は、以下の環境をベースにしています。

OS: MacOS Mojave 10.14.6
Node.js: v10.15.0
next.js: v9.0.5

方法

Next.js アプリケーションの作成

まずは普通に Next.js アプリケーションを作成します。

$ npx create-next-app next-ts-app
$ cd next-ts-app

TypeScript セットアップ

Next.js v9 からはコンフィグなしで TS がサポートされるようになりました。

Built-In Zero-Config TypeScript Support - nextjs.org

今までお世話になっていた @zeit/next-typescript は不要となりました。

ルートディレクトリに tsconfig.json ファイルを作成すると、ベーシックな TS セットアップは完了です。

$ touch tsconfig.json

yarn dev

npm script に dev コマンドが用意されていますので、実行します。

$ yarn dev

すると、 「TS プロジェクトっぽいのにパッケージ無いよ」的なメッセージが出ます。

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

Please install typescript, @types/react, and @types/node by running:

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

言われたとおりにインストールコマンドを実行。

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

今一度、 dev コマンドを実行。

$ yarn dev

今度はコマンド実行が成功されているはずです。

We detected TypeScript in your project and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

「tsconfig.json にデフォルト値がセットされました」的なメッセージが。

この時点での tsconfig.json は以下のような感じ。

# tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

あとはご自由に TS でコーディング。

参考: https://github.com/zeit/next.js#typescript