Next.jsのプロジェクトを作る(2023)

Next.js

TypeScript

2023/08/05

Next.jsの環境構築の方法をいつも忘れるのでメモしておく。

作る環境

以下のパッケージをインストールする。

Next.js
TypeScript
ESLint (Linter)
Prettier (Formatter)
Stylelint (CSS用のFormatter)
husky (Gitのコミット前などにコマンドを実行するツール)
lint-staged (stagingしたファイルに対してLintするツール)
Jest (テストツール)

手順

create-next-app

プロジェクトディレクトリを作成したい階層でnpx create-next-app@latest を実行。

質問に答えていくとNext.js + TypeScript + ESLint が設定された環境までは手に入る。

パッケージの追加インストール

npm install --save-dev husky lint-staged stylelint stylelint-config-recommended \
prettier eslint-config-prettier @typescript-eslint/eslint-plugin@^5.0.0\
jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

eslint-pluginはv6系統だと依存関係を解決できない様子(参考: eslint-config-nextのdependencyがeslint-plugin-jestとコンフリクトする)。そのうちeslint-config-nextが更新されたら使えるようになると思う。

package.jsonの設定

scriptsの部分を置き換えて、lint-stagedを追加する。

{
	"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --dir src",
    "lint:fix": "next lint --dir src --fix",
    "lint:css": "stylelint \"**/*.css\" --fix",
    "format": "prettier --write --ignore-path .gitignore ./**/*.{js,jsx,ts,tsx,json,css}",
    "test": "jest --passWithNoTests",
    "test:ci": "jest --ci --passWithNoTests",
    "prepare": "husky install"
  },
  ...,
  "lint-staged": {
    "*.{ts,tsx}": [
			"npm run lint:fix",
      "npm run format"
    ],
	  "*.{css,less,sass,scss}": [
      "npm run lint:css"
    ]
  }
}

eslintの設定

.eslintrc.jsonを書き換える。TypeScript関連の設定などを追加する。

{
  "extends": [
    "eslint:recommended",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions":  {
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "root": true,
  "rules": {
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  }
}

prettierの設定

以下の内容を.prettierrc.jsonとして保存。中身は好みに応じて変える

{
  "trailingComma": "all",
  "tabWidth": 2,
  "singleQuote": false,
  "semi": false
}

huskyの設定

最初に npm run prepare を実行する。

以下の内容を.husky/pre-commitとして保存。

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

npx lint-staged

コミット前にlint-stagedによる自動フォーマットが走るようになる。

stylelintの設定

以下の内容を.stylelintrc.jsonとして保存

{
    "extends":["stylelint-config-recommended"]
}

jestの設定

以下の内容をjest.config.jsとして保存

const nextJest = require("next/jest");

const createJestConfig = nextJest({
  dir: "./",
});

const customJestConfig = {
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};

module.exports = createJestConfig(customJestConfig);

a4rcvv.net