【Next.js】環境構築を解説してみた【TS+ESlint+ Prettier+Husky】

$ npx create-next-app {プロジェクト名}

$ npx create-next-app next-sample
# 略
Success! Created next-sample at /Users/user-name/hobby/next-sample
Inside that directory, you can run several commands:

  yarn dev
    Starts the development server.

  yarn build
    Builds the app for production.

  yarn start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd next-sample
  yarn dev


A new version of `create-next-app` is available!
You can update by running: yarn global add create-next-app

$ cd next-sample
$ yarn dev
yarn run v1.22.11
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - compiling...
event - compiled client and server successfully in 379 ms (125 modules)

$ mkdir src && mv pages src && mv styles src

$ yarn add -D typescript @types/react @types/react-dom @types/node

$ touch tsconfig.json

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

"compilerOptions": {}

"baseUrl": "./",

baseUrl
├── ex.ts
├── hello
│   └── world.ts
└── tsconfig.json

import { helloWorld } from "hello/world";

"target": "es5",

"module": "esnext",

"jsx": "preserve",

export const helloWorld = () => <h1>Hello world</h1>;

export const helloWorld = () => <h1>Hello world</h1>;

export const helloWorld = () => React.createElement("h1", null, "Hello world");

"strict": true,

// "use strict";を全てのファイルの先頭行につける
--alwaysStrict

//　暗黙的なanyにエラーを出します。
--noImplicitAny

// 暗黙的なthisにエラーを出します。
--noImplicitThis

// nullの可能性のある（Nullableな）値の呼び出しにエラーを出す
--strictNullChecks

// bind, call, applyに厳密な型チェックが行われる
--strictBindCallApply

// 関数代入時の引数の型チェックで、Contravariantly（共変性と反変性）にチェックが入る
--strictFunctionTypes

//　クラス定義するとき、インスタンス変数の初期化が宣言、コンストラクタの両方で行われていない場合にエラーを出す
--strictPropertyInitialization

"esModuleInterop": true,

"skipLibCheck": true,

"forceConsistentCasingInFileNames": true,

"lib": ["dom","dom.iterable","esnext"],

"allowJs": true,

"noEmit": true

"moduleResolution": "node",

"resolveJsonModule": true,

"isolatedModules": true

$ yarn add --dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks

$ touch tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "includes": ["src/**/*.ts", "src/**/*.tsx", ".eslintrc.json"],
  "exclude": ["node_modules", "dist"]
}

$ touch .eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.eslint.json"
  },
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/no-empty-function": 0,
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "no-empty-function": 0,
    "@typescript-eslint/ban-ts-comment": 0
  }
}

"root": true,

"env": {
  // ブラウザのグローバル変数を有効にする。
　"browser": true,
  // Node.jsのグローバル変数やスコープを有効にします
  "node": true
  // ECMAScript6のモジュールを除いた全ての機能が使用可能になります。
  "es6": true,
},

"settings": {
  "react": {
  "version": "detect"
  }
},

"plugins": [
  "react",
  "@typescript-eslint"
],

"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:react/recommended",
  "plugin:react-hooks/recommended",
  "prettier"
]

"rules": {
  "@typescript-eslint/explicit-function-return-type": "off",
  "@typescript-eslint/explicit-module-boundary-types": "off",
  "react/prop-types": "off",
  "react/react-in-jsx-scope": "off",
  "@typescript-eslint/ban-ts-comment": "off"
}

{
  "scripts": {
    // 略
+   "check-types": "tsc --noEmit",
+   "lint": "eslint src/**/*.{ts,tsx}",
+   "lint:fix": "eslint src/**/*.{ts,tsx} --fix",
  },
}

$ yarn add --dev prettier eslint-config-prettier 

$ touch .prettierrc

{
  "singleQuote": true,
  "semi": false,
  "trailingComma": "all"
}

{
  "scripts": {
    // 略
+   "format": "prettier --write .",
  },
}

$ yarn add --dev husky lint-staged

$ yarn husky install

"devDependencies": {
   ・・・
   // 略
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "yarn lint",
      "yarn format",
      "yarn lint:fix"
    ]
  }

$ touch .husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-staged

$ touch .husky/pre-push

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn check-types

$ chmod a+x .husky/pre-push
$ chmod a+x .husky/pre-commit

import { NextPage } from "next";
import { AppProps } from "next/app";

const MyApp: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
};

export default MyApp;

import { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <>
      <div />
    </>
  );
};

export default Home;

No files matching the pattern "src/**/*.ts" were found.
Please check for typing mistakes in the pattern.

$ mkdir src/constants 
$ touch src/constants/index.ts

export const hoge = "hoge";