【Next.js】Next.js + TypeScript + Sass + eslint + prettier の環境構築超絶まとめ
Next.js + TypeScript + Sass + eslint + prettier の環境構築超絶まとめ
はじめに
表題のとおりですが、以下の使用した環境構築の手順をまとめました。
- Next.js
- TypeScript
- Sass
- eslint
- prettier
環境
環境は以下のとおりです。
- OS: Mac(intel) ※M1でも構築実績あり
- ブラウザ: Google Chrome
- Node.js: v14.17.2.
1. Next.jsの導入
まずはNext.jsの導入です。
Next.jsプロジェクトを作成したいディレクトリに移動します。(ディレクトリは任意です)
ここでは、project配下にNext.jsアプリを作成します。
$ cd project
以下のコマンドを実行します。
$ npx create-next-app myapp
myappはプロジェクトの名前を入れます。(プロジェクト名は任意です)
ここでは、プロジェクト名をmyappとしています。
Success! Created myapp at ...がターミナルに表示されたら成功です。
Initialized a git repository.
Success! Created myapp at /Users/xxxx.yyyy/project/myapp
Inside that directory, you can run several commands:
yarn dev
Starts the development server.
yarn build
Builds the app for production.
yarn start
Runs the built app in production mode.
We suggest that you begin by typing:
cd myapp
yarn dev
以下のコマンドを実行します。
$ cd myapp
$ yarn dev
ターミナルにready - started server on 0.0.0.0:3000, url: http://localhost:3000が表示されます。
Chromeで「http://localhost:3000」にアクセスします。
以下のようなデフォルトのNext.jsアプリが開きます。
フォルダ構成の定義を追加します。
以下のコマンドで実行します。
$ mkdir src && mv pages src && mv styles src
srcディレクトリを作成し、pagesディレクトリとstylesディレクトリをsrcディレクトリに移動します。
2. TypeScriptの導入
次に、TypeScriptの導入です。
以下のコマンドを実行します。
$ npm install --save-dev typescript @types/react @types/react-dom
以下のようにエラーが出ていなければ成功です。
+ @types/react-dom@17.0.11
+ @types/react@17.0.38
+ typescript@4.5.4
added 9 packages from 68 contributors, removed 5 packages, updated 237 packages and audited 262 packages in 43.614s
66 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
以下のファイルをリネームします。
_app.jsx -> _app.tsx
index.js -> index.tsx
以下のようにファイルを修正します。
import { AppProps } from 'next/app';
import '../styles/globals.scss';
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<div className='app'>
<main className='wrapper'>
<Component {...pageProps} />
</main>
</div>
);
};
export default MyApp;
3. Sassの導入
次に、Sassの導入です。
以下のコマンドを実行します。
$ npm install sass --save-dev
以下のようにエラーが出ていなければ成功です。
+ sass@1.48.0
added 11 packages from 52 contributors, updated 5 packages and audited 272 packages in 12.229s
66 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
以下のファイルをリネームする。
global.css -> global.scss
Home.module.css -> Home.module.scss
同時に、import分もxxx.scssに修正します。
4. tsconfig.jsonの作成
次に、tsconfig.jsonの作成です。
tsconfig.jsonはTypeScriptのオプションの設定値を記載するファイルです。
設定値の説明については割愛しますが、興味がある方は以下を参照ください。
以下のコマンドを実行します。
$ yarn dev
tsconfig.jsonが作成されます。
ファイルの中身は以下のようになります。
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
5. eslintの導入
次に、eslintの導入です。
eslintとは、JavaScript、TypeScriptの静的解析ツールです。
コードを実行する前にバグを見つけたり、括弧やスペース、クォーテーションの使い方などのスタイルを統一することができます。
詳しくは以下をご参照ください。
以下のコマンドを実行します。
$ npx eslint --init
するとターミナル上でいろいろ聞かれます。
自分のプロジェクトに合うものを選択してください。
ここでは、「❯」のあるものを選択しています。
? How would you like to use ESLint? …
To check syntax only
To check syntax and find problems
❯ To check syntax, find problems, and enforce code style
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these
? Which framework does your project use? …
❯ React
Vue.js
None of these
? Does your project use TypeScript? No / ❯ Yes
? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ Browser
Node
? How would you like to define a style for your project? …
❯ Use a popular style guide
Answer questions about your style
? Which style guide do you want to follow? …
❯ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xo
? What format do you want your config file to be in? …
❯ JavaScript
YAML
JSON
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:
eslint-plugin-react@^7.28.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.3 eslint-plugin-jsx-a11y@^6.5.1 eslint-plugin-react-hooks@^4.3.0 @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / ❯ Yes
Successfully created .eslintrc.js file in ...が表示されたら成功です。
+ eslint-plugin-jsx-a11y@6.5.1
+ eslint-plugin-react@7.28.0
+ eslint-plugin-import@2.25.4
+ eslint-plugin-react-hooks@4.3.0
+ eslint-config-airbnb@19.0.4
+ @typescript-eslint/parser@5.9.1
+ eslint@8.7.0
+ @typescript-eslint/eslint-plugin@5.9.1
added 16 packages from 11 contributors, removed 2 packages, updated 10 packages and audited 291 packages in 16.609s
15 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Successfully created .eslintrc.js file in /Users/xxxx.yyyy/project/myapp
.eslintrc.jsが生成されますので、以下のように修正します。
※rules: [...]はプロジェクトにあった設定にしてください。
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:prettier/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint', 'prettier'],
rules: {
'no-use-before-define': 'off',
'jsx-a11y/heading-has-content': 'off',
'jsx-a11y/no-noninteractive-element-interactions': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
'jsx-a11y/click-events-have-key-events': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'@typescript-eslint/no-use-before-define': [
'error',
{ variables: false },
],
'@typescript-eslint/no-unused-vars': 'error',
'react/react-in-jsx-scope': 'off',
'import/no-unresolved': 'off',
'import/no-extraneous-dependencies': [
'error',
{ devDependencies: true },
],
'react/jsx-props-no-spreading': 'off',
'react/jsx-filename-extension': [
'error',
{ extensions: ['.jsx', '.tsx'] },
],
'import/extensions': [
'error',
{ extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'] },
],
'react/prop-types': 'off',
'spaced-comment': ['error', 'always', { markers: ['/ <reference'] }],
'prettier/prettier': 'error',
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
};
rulesに設定できるものは以下を参照してください。
6. prettier
次に、prettierの導入です。
prettierとは、静的解析の1つでコードフォーマッター（ソースコードを整形してくれるツール）のことです。
プリティアと読みます。
prettierの詳細については、以下をご参照ください。
以下のコマンドを実行する。
$ npm install ---save-dev prettier eslint-config-prettier eslint-plugin-prettier
以下のようにエラーが出ていなければ成功です。
+ eslint-plugin-prettier@4.0.0
+ prettier@2.5.1
+ eslint-config-prettier@8.3.0
added 5 packages from 5 contributors and audited 295 packages in 4.835s
69 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
myapp配下に.prettierrc.jsonを作成します。
$ touch .prettierrc.json
以下の設定値を記載します。
設定値はプロジェクトにあったものを設定してください。
{
"arrowParens": "always",
"endOfLine": "lf",
"jsxSingleQuote": true,
"printWidth": 80,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5"
}
.prettierrcの設定値については以下をご参照ください。
以下のコマンドで静的解析をかけることができます。
- フォーマットが崩れているところを洗い出すコマンドは以下です。(自動でフォーマットされない)
$ npx eslint . --ext .tsx --ext .ts
- フォーマットが崩れているところを修正するコマンドは以下です。(自動でフォーマットされる)
$ npx eslint . --ext .tsx --ext .ts --fix
まとめ
Next.js + TypeScript + Sass + eslint + prettier の環境構築の手順をまとめました。
Lint類は開発の上で非常に重要なツールになります。ぜひ、参考にしてみてください。
Discussion