More than 1 year has passed since last update.

【Next.js】Next.js & TypeScript & ESLint, Prettier & husky Setup

Posted at 2022-10-31

はじめに

Next.jsのセットアップを紹介します。

続いて、TypeScript, Eslint, Prettierの設定もしていきます。

最後に、CIツールであるhuskyを入れて、コミット時にテストを走らせる設定を追加していきます。

構築環境

tools	version
Next.js	13.0.0
React	18.2.0
ESLint	8.0.1
Prettier	2.7.1
husky	8.0.0

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

何はともあれ、Next.jsのプロジェクトを作成していきます。

プロジェクトを作成したいディレクトリで、下記コマンドを走らせます。

プロジェクトの作成と同時に、TypeScriptも設定していきます。

sample-appの部分は自身のプロジェクト名を入れてください。

$ npx create-next-app sample-app --typescript

プロジェクトが作成できたら、プロジェクトのディレクトリに移動しておいてください。
念の為、サーバーが立ち上がることも確認しておきます。

$ cd sample-app

$ yarn dev

Eslint 初期設定

Eslintの初期設定を行なっていきます。

$ npx eslint --init

設定について質問されるので、選択していきます。

How would you like to use ESLint?
What type of modules does your project use?
Which framework does your project use?
Does your project use TypeScript?
Where does your code run?
How would you like to define a style for your project?
Which style guide do you want to follow?

今回は、Standardを選択しています。1番厳しいstyle guideとして、airbnbを選択することもあります。
What format do you want your config file to be in?

今回はJavaScriptを選択していますが、お好きなものを選択してください。

Would you like to install them now?
Which package manager do you want to use?

すべて選択した後に、このようになっていれば設定完了です。

設定が完了できたら、.eslintrc.jsが作成されていることを確認してください。

sample-app
  ├── .next
  ├── node_modules
  ~
+ └── .eslintrc.js

.eslintrc.jsを編集していきます。

Reactのバージョンを指定することで、Eslintがそのルールに合わせてくれます。

今回はReactのバージョンを18.2.0に設定していますが、latestでも大丈夫です。

(latestに設定した場合、今後huskyを動かした際にWARININGがでます)

.eslintrc.js

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: ['plugin:react/recommended', 'standard-with-typescript'],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
      'react/react-in-jsx-scope': 'off',
    },
+   settings: {
+     react: {
+       version: '18.2.0',
+     },
    },
  };

次に、.eslintignoreファイルを作成します。

$ touch .eslintignore

sample-app
  ├── .next
  ├── node_modules
  ~
  ├── .eslintrc.js
+ └── .eslintignore

作成後、.eslintignoreを編集していきます。

編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。

.eslintignore

.next
next-env.d.ts
node_modules
yarn.lock
package-lock.json
public

Prettier 設定

Prettierを導入していきます。

下記コマンドを入力して開発環境にPrettierを入れてください。

$ yarn add --dev prettier

導入が完了したら、.prettierrcファイルを作成します。

$ touch .prettierrc

sample-app
  ├── .next
  ├── node_modules
  ~
  ├── .eslintrc.js
  ├── .eslintignore
+ └── .prettierrc

作成後、.prettierrcを編集していきます。

編集する中身についてはご自身のプロジェクトによって変わると思いますので、今回は参考として例を載せておきます。

.prettierrc

{
  "endOfLine": "lf",
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true
}

続いて、.prettierignoreファイルを作成します。

$ touch .prettierignore

sample-app
  ├── .next
  ├── node_modules
  ~
  ├── .eslintrc.js
  ├── .eslintignore
  ├── .prettierrc
+ └── .prettierignore

作成後、.prettierignoreを編集していきます。

.prettierignoreの中身については.eslintignoreと同じにしておきます。

こちらもご自身のプロジェクトに合わせて編集してください。

.prettierignore

.next
next-env.d.ts
node_modules
yarn.lock
package-lock.json
public

eslint-config-prettier 設定

下記コマンドを入力して、eslint-config-prettierを導入していきます。

Eslintにもコードフォーマット機能がすでにあるのですが、Prettierにコードフォーマットを任せるので、競合を防ぐために、eslint-config-prettierが必要になります。

$ yarn add --dev eslint-config-prettier

導入が完了したら、.eslintrc.jsを編集していきます。

extendsにprettierを追加しました。

prettierの追加は、extends内の最後に追加しないと設定が上書きされないことに注意してください。

.eslintrc.js

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended', 
      'standard-with-typescript', 
+     'prettier'
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
      'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

以上で、TypeScript, Eslint, Prettierの設定が完了しました。

package.jsonファイルの中身を確認しておきましょう。

package.json

{
  "name": "nextjs-front-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.11.7",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-next": "13.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.10",
    "prettier": "^2.7.1",
    "typescript": "*",
  }
}

TypeScript, Eslint, Prettierの設定完了と言いたいところですが、後述するhuskyを設定し走らせたときに、エラーが返ってきたのでhuskyを導入しない人のために先にエラーを解決していきます。

エラー解決

$ ~
$ ~
$ Oops! Something went wrong! :(

$ ESLint: 8.26.0

$ Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
$ ~

エラーの内容としては、parserOptions.projectにプロパティを入れてねって言われています。

.eslintrc.jsを編集していきます。

.eslintrc.js

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: ['plugin:react/recommended', 'standard-with-typescript', 'prettier'],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
+     project: './tsconfig.json',
    },
    plugins: ['react'],
    rules: {
      'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

これでtsconfig.jsonのルールに沿ってEslintが走ってくれるので、エラーは解決します。

以上で、TypeScript, Eslint, Prettierの設定完了となります。

husky 導入

下記コマンドを入力して、huskyを導入していきます。

$ npx husky-init

導入ができたら、.huskyフォルダが作成されていることを確認してください。

sample-app
  ├── .next
  ├── node_modules
  ~
  └── .husky
       ├── pre-commit
       └── _
            ├── .gitignore
            └── husky.sh

pre-commitを編集していきます。

これを編集することで、コミット時にテストを走らせることができます。
今回は参考として例を載せておきます。

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

# bash echo color
RED='\033[1;31m'
GREEN='\033[1;32m'
BLUE='\033[1;36m'
BOLD='\033[1;37m'
NC='\033[0m'

echo "\n ${BOLD}Checking format, lint and types in your project before committing${NC}"

# Check Prettier standards
npm run check-format ||
(
    echo "\n Prettier Check ${RED}Failed${NC}. \n Run ${BLUE}npm run format${NC}, add changes and try commit again.\n";
    false;
)

# Check ESLint Standards
npm run check-lint ||
(
    echo "\n ESLint Check ${RED}Failed${NC}. \n Make the required changes listed above, add changes and try to commit again.\n"
    false;
)

# Check tsconfig standards
npm run check-types ||
(
    echo "\n Type check ${RED}Failed${NC}. \n Make the changes required above.\n"
    false;
)

# If everything passes... Now we can build
echo "${BOLD}All passed... Now we can build.${NC}"

npm run build ||
(
    echo "\n Next build ${RED}Failed${NC}. \n View the errors above to see why.\n"
    false;
)

# If everything passes... Now we can commit
echo "${GREEN}Build is completed... I am committing this now.${NC} \n"

続いて、huskyを走らせるコマンドを設定するために、package.jsonを編集しておきます。

package.json

  {
    "name": "nextjs-front-sample",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start",
      "lint": "next lint",
      "prepare": "husky install",
+     "check-types": "tsc --pretty --noEmit",
+     "check-format": "prettier --check .",
+     "check-lint": "eslint . --ext ts --ext tsx --ext js",
+     "format": "prettier --write .",
+     "test-all": "npm run check-format && npm run check-lint && npm run check-types"
    },
    "dependencies": {
      "next": "13.0.0",
      "react": "18.2.0",
      "react-dom": "18.2.0"
    },
    "devDependencies": {
      "@types/node": "18.11.7",
      "@types/react": "18.0.24",
      "@types/react-dom": "18.0.8",
      "@typescript-eslint/eslint-plugin": "^5.0.0",
      "eslint": "^8.0.1",
      "eslint-config-next": "13.0.0",
      "eslint-config-prettier": "^8.5.0",
      "eslint-config-standard-with-typescript": "^23.0.0",
      "eslint-plugin-import": "^2.25.2",
      "eslint-plugin-n": "^15.0.0",
      "eslint-plugin-promise": "^6.0.0",
      "eslint-plugin-react": "^7.31.10",
      "prettier": "^2.7.1",
      "typescript": "*",
      "husky": "^8.0.0"
    }
  }

これでhuskyの設定も完了しました。

Git Hubにコミットをした際にhuskyが走るようになります。

$ git commit -m "xxxxxx"

テストにパスすればコミットが成功します。

最後に

以上、Next.jsの環境構築に加えて、TypeScript, Eslint, Prettier, huskyの導入について紹介しました。

フロントの技術は日進月歩なので、やり方が古いや間違ってるといったことがあればコメントで教えてください。

最後まで読んでいただきありがとうございました。

参照

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Next.js】Next.js & TypeScript & ESLint, Prettier & husky Setup

はじめに

目次

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

Eslint 初期設定

Prettier 設定

eslint-config-prettier 設定

エラー 解決

husky 導入

最後に

参照

エラー解決