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

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

承前

前回、Next.jsのプロジェクトを作成しました。

でも、どうせこれからやるなら、最初から TypeScript にしたいですよね。

じゃあやってみよう

下記コマンドで、プロジェクトを作ってください。

npx create-next-app --example with-typescript 【プロジェクト名】

以上！

以下はお時間のある方向け

最初、試行錯誤しながらやってみました。

https://nextjs.org/docs/basic-features/typescript にそってやっていきます。

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

$ touch tsconfig.json

ビルドすると、ご親切に次にやることを教えてくれます。

$ npm run dev

> next-kazto-dev@0.1.0 dev
> ./node_modules/.bin/next dev

ready - started server on http://localhost:3000
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

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

じゃあ言われたとおりに。

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

いろいろインストールされました。

もう一度ビルド。

$ npm run dev

> next-kazto-dev@0.1.0 dev
> ./node_modules/.bin/next dev

ready - started server on http://localhost:3000
We detected TypeScript in your project and created a tsconfig.json file for you.

プロジェクトルートに next-env.d.ts が作成され、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"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

./pages/ ディレクトリには前回の create-next-app で作られた index.js、_app.jsなどがあるのでそれを削除し、かわりに index.tsx を作ります。

import React, {FC} from 'react'

const Home: FC = () => {
  return (
    <div>Hello TypeScript</div>
  )
}

export default Home;

だいぶ寂しくなっちゃいましたね。

$ npm run dev

ここでちゃぶ台がひっくり返される

調べてたら、以下のコマンドで TypeScript になったプロジェクトを作ってくれるとのこと。
カックさんいつもお世話になってます。

npx create-next-app --example with-typescript 【プロジェクト名】

あれですね、車輪は再発明すんなってことですね。