Nextjs(react), TypeScript, sassを用いたフロント開発環境を構築する手順。
前提：create-next-appを利用しない
Frameworkインストール
code:bash
// Next.js, React, sass
$ yarn add next react react-dom sass
// TypeScript, Reactの型定義
$ yarn add -D typescript @types/{react,react-dom}
eslint, prettierインストール
code:bash
// 本体
$ yarn add -D eslint prettier
// eslint用config, plugin
$ yarn add -D eslint-plugin-{react,react-hooks} eslint-config-{prettier,next}
$ yarn add -D @typescript-eslint/{eslint-plugin,parser}
eslint, prettier用定義作成
code:.eslintrc.json
{
"env": {
"es6": true,
"browser": true,
"commonjs": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"settings": {
"react": {
"version": "detect"
}
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"prettier"
],
"rules": {
// ts使用しているので不要
"react/prop-types": "off",
// Reactのimportが必須ではないので不要
"react/react-in-jsx-scope": "off",
// componentに型を明示する必要性を感じなかったのでoff(厄介な関数なんかは当然型付けする)
"@typescript-eslint/explicit-module-boundary-types": "off"
}
}
code:.prettierrc.json
// 好みの問題ではある semiはtrueの方が確実かも
{
"semi": false,
"singleQuote": true,
"jsxBracketSameLine": true
}
ディレクトリ構成例
code:project
/project
├ /src
│ ├ /components <- この中に共通コンポーネントを作成することにした
│ │ └ /...
│ ├ /pages <- この中身のreact componentをルーティングしてくれる
│ │ ├ /...
│ │ └ index.tsx
│ └ /styles <- この中にscssを配置することにした
│ └ /...
├ .eslintrc.json
├ .prettierrc.json
├ package.json
└ yarn.lock
/src内は/pagesのみ必須、その他構成は任意
/stylesの場所(要はどこにcss配置するか)なんかは人によって変わるだろう
package.jsonのscriptsを追加
code:package.json
// scripts以外は省略
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
// lintは好みに応じて変更 prettierだけformat用のコマンド切って分けるなど
"lint": "prettier --write ./src && eslint --fix ./src"
}