Next.js 開発環境構築

毎回いろいろサイト回りながら構築しているのでそろそろ自分用に残す。

create-next-app

--ts オプションをつけてプロジェクトを作る。

bash: title=bash
1npx create-next-app --ts {ProjectName}
2

src ディレクトリを作成し、 pages, styles ディレクトリを移動。

bash: title=bash
1cd {ProjectName} && mkdir src
2mv pages/ src/
3

tsconfig.json

include に src ディレクトリを追加。

json: title=tsconfig.json
1{
2  "compilerOptions": {
3    "target": "es5",
4    "lib": ["dom", "dom.iterable", "esnext"],
5    "allowJs": true,
6    "skipLibCheck": true,
7    "strict": true,
8    "forceConsistentCasingInFileNames": true,
9    "noEmit": true,
10    "esModuleInterop": true,
11    "module": "esnext",
12    "moduleResolution": "node",
13    "resolveJsonModule": true,
14    "isolatedModules": true,
15    "jsx": "preserve",
16    "incremental": true
17  },
18  "include": ["src", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
19  "exclude": ["node_modules"]
20}
21
22
23

ESlint config & plugin

ESlint コンフィグとプラグインをインストール。

airbnb はこれが面倒なので最新版ではなく古いバージョンにした。

bash: title=bash
1 yarn add -D eslint-config-airbnb@18.2.1 eslint-config-next eslint-plugin-jsx-a11y eslint-plugin-prefer-arrow eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin
2

.eslintrc.json を削除して .eslintrc.js を作成。

json: title=.eslintrc.js
1module.exports = {
2  env: {
3    browser: true,
4    es2021: true,
5  },
6  extends: [
7    "airbnb",
8    "airbnb/hooks",
9    "plugin:import/errors",
10    "plugin:import/warnings",
11    "plugin:import/typescript",
12    "plugin:@typescript-eslint/recommended",
13    "plugin:@typescript-eslint/recommended-requiring-type-checking",
14    "prettier",
15  ],
16  parser: "@typescript-eslint/parser",
17  parserOptions: {
18    ecmaFeatures: {
19      jsx: true,
20    },
21    ecmaVersion: 12,
22    project: "./tsconfig.eslint.json",
23    sourceType: "module",
24    tsconfigRootDir: __dirname,
25  },
26  plugins: ["@typescript-eslint", "import", "jsx-a11y", "react", "react-hooks"],
27  root: true,
28  rules: {
29    // occur error in `import React from 'react'` with react-scripts 4.0.1
30    "no-use-before-define": "off",
31    "@typescript-eslint/no-use-before-define": ["error"],
32    "lines-between-class-members": [
33      "error",
34      "always",
35      {
36        exceptAfterSingleLine: true,
37      },
38    ],
39    "no-void": [
40      "error",
41      {
42        allowAsStatement: true,
43      },
44    ],
45    "padding-line-between-statements": [
46      "error",
47      {
48        blankLine: "always",
49        prev: "*",
50        next: "return",
51      },
52    ],
53    "@typescript-eslint/no-unused-vars": [
54      "error",
55      {
56        vars: "all",
57        args: "after-used",
58        argsIgnorePattern: "_",
59        ignoreRestSiblings: false,
60        varsIgnorePattern: "_",
61      },
62    ],
63    "import/extensions": [
64      "error",
65      "ignorePackages",
66      {
67        js: "never",
68        jsx: "never",
69        ts: "never",
70        tsx: "never",
71      },
72    ],
73    "react/jsx-filename-extension": [
74      "error",
75      {
76        extensions: [".jsx", ".tsx"],
77      },
78    ],
79    "react/jsx-props-no-spreading": [
80      "error",
81      {
82        html: "enforce",
83        custom: "enforce",
84        explicitSpread: "ignore",
85      },
86    ],
87    "react/react-in-jsx-scope": "off",
88  },
89  overrides: [
90    {
91      files: ["*.tsx"],
92      rules: {
93        "react/prop-types": "off",
94      },
95    },
96  ],
97  settings: {
98    "import/resolver": {
99      node: {
100        paths: ["src"],
101      },
102    },
103  },
104};
105

tsconfig.eslint.json

TypeScript 用の設定ファイルも追加する。

bash: title=bash
1touch tsconfig.eslint.json
2

json: title=tsconfig.eslint.json
1{
2  "extends": "./tsconfig.json",
3  "include": [
4    "src/**/*.js",
5    "src/**/*.jsx",
6    "src/**/*.ts",
7    "src/**/*.tsx"
8  ],
9  "exclude": [
10    "node_modules"
11  ]
12}
13

Prettier

prettier をインストールする。

bash: title=bash
1yarn add -D prettier eslint-config-prettier
2touch .prettierrc
3

json: title=.prettierrc
1{
2  "trailingComma": "es5",
3  "tabWidth": 2,
4  "arrowParens": "always",
5	"singleQuote": true
6}
7

一旦ここまでで TypeScript 、ESlint 、 Prettier が入ったので制約入れつつ開発ができるようになった。

ベストな状態ではないと思うので、ブラッシュアップの都度更新いれてくぞ。

/以上