Next.js + TypeScriptの開発環境を整える

こんにちはかみむらです。

最近はTypeScriptを採用する企業が増えてきました。TypeScriptの型システムは、サーバーサイドだけでなく、フロントエンドでも恩恵を受けることができます。そのため、各フロントエンドのフレームワークで、TypeScriptを簡単に導入できる環境が整ってきました。

特にNext.jsはフロントエンドとサーバーサイドの機能を持っているので、TypeScript化が必須だと思われます。

今回はNext.jsにTypeScriptを導入していきます。

Next.jsの公式ドキュメント
nextjs.org

プロジェクトのセットアップ

create-next-appのCLIを使って、プロジェクトの雛形を作成します。

$ npx create-next-app next-ts

Next.jsのTypeScript化

Next.jsではファイルの拡張子が.tsまたは、.tsxだと自動的にtsconfig.jsonを生成してくれます。なので、pagesフォルダのindex.jsの拡張子をtsxに変えてみましょう。

pages/index.tsx

import React, {FC} from 'react'
import Head from 'next/head'

const Home: FC = () => (
  <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <div>Home</div>
  </div>
)

export default Home


一旦これでアプリケーションを起動してみます。

$ yarn dev

すると、ターミナル上でエラーが発生します。内容はTypeScriptに必要なライブラリが足りないといったところです。

f:id:kamimura-dev:20200123080128p:plain

なので、エラーに従って必要なライブラリをインストールします。

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

そして、再度アプリケーションを立ち上げてみましょう。tsconfig.jsonが作成されます。
f:id:kamimura-dev:20200123230508p:plain

アプリケーションを停止して、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"
  ]
}

これで、Next.jsアプリケーションを簡単にTypeScript化できました。

srcフォルダに移動

最後におまけですが、Next.js 9.1からsrcフォルダがサポートされています。Reactプロジェクトはsrcにソースコードを置いておくのが一般的なので、Next.jsでもsrcにまとめてみましょう。pagesフォルダとcomponentsフォルダをsrcフォルダに移動してみましょう。

Blog - Next.js 9.1 | Next.js
srcフォルダを作成します。

$ mkdir src

そして、pagesフォルダcomponentsフォルダsrcフォルダに移動します。

$ mv pages components src

そして、アプリケーションを立ち上げてみましょう。無事にアプリケーションを起動できることが確認できます。

$ yarn dev

最後に

今回はTypeScriptの対応とsrcフォルダへ移動について書きました。Next.jsはリリース頻度も高く、フレームワークとして日々進化してる実感がします。今後もNext.jsの記事を増やしていきたいです。