Next.js x TypeScript x ESLint x Prettier プロジェクトのセットアップ手順

npx create-next-app <project-name>

.
├── .next # build 後のファイルが配置される
├── node_modules
├── pages # Page コンポーネント
│   ├── api
│   │   └── hello.js
│   ├── _app.js # 全ページ共通 Page コンポーネント
│   └── index.js
├── public # 画像やテキストファイルなどの静的リソース
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

yarn add -D typescript @types/react @types/react-dom @types/node

yarn dev

tsconfig.json
next-env.d.ts

// pages/_app.tsx

import { FC } from 'react'
import { AppProps } from 'next/app'
import '../styles/globals.css'

const MyApp: FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />
}

export default MyApp

// pages/index.tsx

import { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      // ...
    </div>
  )
}

export default Home

yarn add -D sass

import '../styles/globals.css'
↓
import '../styles/globals.scss'

import styles from '../styles/Home.module.css'
↓
import styles from '../styles/Home.module.scss'

yarn add -D eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y @typescript-eslint/eslint-plugin @typescript-eslint/parser

module.exports = {
  ignorePatterns: ['!.eslintrc.js', '!.prettierrc.js'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
  ],
  plugins: ['@typescript-eslint', 'react'],
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
}

yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

module.exports = {
  semi: false,
  singleQuote: true,
}

module.exports = {
  // ...
  extends: [
    // ...
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
  // ...
}

module.exports = {
  ignorePatterns: ['!.eslintrc.js', '!.prettierrc.js'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint',
  ],
  plugins: ['@typescript-eslint', 'react'],
  parser: '@typescript-eslint/parser',
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    'react/prop-types': 'off',
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
}

yarn add -D stylelint stylelint-config-recommended-scss stylelint-order stylelint-scss

module.exports = {
  extends: 'stylelint-config-recommended-scss',
  plugins: ['stylelint-order', 'stylelint-scss'],
  rules: {
    'order/properties-alphabetical-order': true,
    'scss/at-rule-no-unknown': null,
    'scss/at-import-no-partial-leading-underscore': null,
  },
}

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

// .vscode/settings.json

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}

{
  // ...
  "scripts": {
    // ...
    "lint": "eslint --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore .",
    "stylelint": "stylelint \"**/*.scss\""
  },
  // ...
}

yarn lint # ESLint の Lint
yarn lint --fix # ESLint の Format

yarn stylelint # stylelint の Lint
yarn stylelint --fix # stylelint の Format