Next.js 開発環境構築
毎回いろいろサイト回りながら構築しているのでそろそろ自分用に残す。
create-next-app
--ts
オプションをつけてプロジェクトを作る。
bash
npx create-next-app --ts {ProjectName}
src
ディレクトリを作成し、 pages
, styles
ディレクトリを移動。
bash
cd {ProjectName} && mkdir src
mv pages/ src/
tsconfig.json
include
に src ディレクトリを追加。
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
},
"include": ["src", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
ESlint config & plugin
ESlint コンフィグとプラグインをインストール。
airbnb はこれが面倒なので最新版ではなく古いバージョンにした。
bash
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
.eslintrc.json
を削除して .eslintrc.js
を作成。
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
"airbnb",
"airbnb/hooks",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier",
],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
project: "./tsconfig.eslint.json",
sourceType: "module",
tsconfigRootDir: __dirname,
},
plugins: ["@typescript-eslint", "import", "jsx-a11y", "react", "react-hooks"],
root: true,
rules: {
// occur error in `import React from 'react'` with react-scripts 4.0.1
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
"lines-between-class-members": [
"error",
"always",
{
exceptAfterSingleLine: true,
},
],
"no-void": [
"error",
{
allowAsStatement: true,
},
],
"padding-line-between-statements": [
"error",
{
blankLine: "always",
prev: "*",
next: "return",
},
],
"@typescript-eslint/no-unused-vars": [
"error",
{
vars: "all",
args: "after-used",
argsIgnorePattern: "_",
ignoreRestSiblings: false,
varsIgnorePattern: "_",
},
],
"import/extensions": [
"error",
"ignorePackages",
{
js: "never",
jsx: "never",
ts: "never",
tsx: "never",
},
],
"react/jsx-filename-extension": [
"error",
{
extensions: [".jsx", ".tsx"],
},
],
"react/jsx-props-no-spreading": [
"error",
{
html: "enforce",
custom: "enforce",
explicitSpread: "ignore",
},
],
"react/react-in-jsx-scope": "off",
},
overrides: [
{
files: ["*.tsx"],
rules: {
"react/prop-types": "off",
},
},
],
settings: {
"import/resolver": {
node: {
paths: ["src"],
},
},
},
};
tsconfig.eslint.json
TypeScript 用の設定ファイルも追加する。
bash
touch tsconfig.eslint.json
tsconfig.eslint.json
{
"extends": "./tsconfig.json",
"include": [
"src/**/*.js",
"src/**/*.jsx",
"src/**/*.ts",
"src/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
Prettier
prettier をインストールする。
bash
yarn add -D prettier eslint-config-prettier
touch .prettierrc
.prettierrc
{
"trailingComma": "es5",
"tabWidth": 2,
"arrowParens": "always",
"singleQuote": true
}
一旦ここまでで TypeScript 、ESlint 、 Prettier が入ったので制約入れつつ開発ができるようになった。
ベストな状態ではないと思うので、ブラッシュアップの都度更新いれてくぞ。
/以上