TypeScriptとNext.jsでプロジェクトを構築する

はじめに

TypeScriptとNext.jsの開発環境を構築する際のまとめ

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

作成したいディレクトリで以下のコマンドを実行。

$ npx create-next-app@latest --ts
Need to install the following packages:
 create-next-app
OK to proceed?(y)   y
✔︎ what is your project named? ...[プロジェクト名を入力する]

これでプロジェクト作成が完了。 作成したプロジェクトに移動する。 `$ cd [プロジェクト名]`

この状態で以下のコマンドで一度開発サーバーを起動し、http://localhost:3000 にアクセスしてページが表示されるか確認する。
$ npm run dev

ファイルの整理

プロジェクト作成直後はpagesがルートに存在するため、srcディレクトリを作成する。
そして、pagesとstyleをsrcディレクトリの中に移動する。
以下のプロジェクト構成になったら準備完了。

|-----README.md
|-----next-env.d.ts
|-----next.config.js
|-----package-lock.json
|-----package.json
|-----public
      |-----favicon.ico
      |-----vercel.svg
|-----src
|     |-----pages
|     |     |-----_app.tsx
|     |     |-----api
|     |     |     |-----hello.ts
|     |     |-----index.tsx
|     |-----style
|     |-----Home.module.css
|     |-----globals.css
|-----tsconfig.json

ビルド準備

このままだとビルドができないのでtsconfig.jsonを編集する。
1.baseUrlをsrcに指定するために追記。
2.型チェックを行うためにstrictオプションをtrueにする。

tsconfig.json

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