🛠️

Next.js + TypeScript + Sass + eslint + prettier の環境構築超絶まとめ

2022/01/17に公開約9,000字

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

以下のようにファイルを修正します。

_app.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のオプションの設定値を記載するファイルです。
設定値の説明については割愛しますが、興味がある方は以下を参照ください。

https://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json
https://www.typescriptlang.org/tsconfig

以下のコマンドを実行します。

$ yarn dev

tsconfig.jsonが作成されます。

ファイルの中身は以下のようになります。

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の静的解析ツールです。
コードを実行する前にバグを見つけたり、括弧やスペース、クォーテーションの使い方などのスタイルを統一することができます。

詳しくは以下をご参照ください。

https://eslint.org/
https://qiita.com/mysticatea/items/f523dab04a25f617c87d

以下のコマンドを実行します。

$ 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: [...]はプロジェクトにあった設定にしてください。

.eslintrc.js
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に設定できるものは以下を参照してください。

https://eslint.org/docs/rules/

6. prettier

次に、prettierの導入です。

prettierとは、静的解析の1つでコードフォーマッター(ソースコードを整形してくれるツール)のことです。
プリティアと読みます。

prettierの詳細については、以下をご参照ください。

https://prettier.io/
https://qiita.com/soarflat/items/06377f3b96964964a65d

以下のコマンドを実行する。

$ 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

以下の設定値を記載します。
設定値はプロジェクトにあったものを設定してください。

.prettierrc.json
{
  "arrowParens": "always",
  "endOfLine": "lf",
  "jsxSingleQuote": true,
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5"
}

.prettierrcの設定値については以下をご参照ください。

https://prettier.io/docs/en/configuration.html
https://qiita.com/takeshisakuma/items/bbb2cd2f1c65de70e363

以下のコマンドで静的解析をかけることができます。

  • フォーマットが崩れているところを洗い出すコマンドは以下です。(自動でフォーマットされない)
$ npx eslint . --ext .tsx --ext .ts
  • フォーマットが崩れているところを修正するコマンドは以下です。(自動でフォーマットされる)
$ npx eslint . --ext .tsx --ext .ts --fix

まとめ

Next.js + TypeScript + Sass + eslint + prettier の環境構築の手順をまとめました。
Lint類は開発の上で非常に重要なツールになります。ぜひ、参考にしてみてください。

Discussion

ログインするとコメントできます