Next.js

tags : React, JavaScript

プロジェクトの始め方

ライブラリ

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

prettier

.prettierrc を作る

singleQuote: true
trailingComma: "all"
semi: false
printWidth: 120

eslint

ライブラリを入れる

yarn add -D eslint-config-prettier eslint-config-standard eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-storybook @typescript-eslint/eslint-plugin @types/eslint @emotion/eslint-plugin

.eslintrc.yml

env:
  browser: true
  es2021: true
extends:
  - "next"
  - "next/core-web-vitals"
  - 'plugin:react/recommended'
  - standard
  - '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: '.'
plugins:
  - react
  - '@typescript-eslint'
  - 'import'
  - 'jsx-a11y'
  - 'react'
  - 'react-hooks'
  - '@emotion'
root: true
rules:
  no-use-before-define: 'off'
  '@typescript-eslint/no-use-before-define': 'error'
  "@typescript-eslint/explicit-function-return-type": 0
  "@typescript-eslint/explicit-module-boundary-types": 0
  "@typescript-eslint/no-misused-promises":
    - error
    - checksVoidReturn: false
  quotes: 'warn'
  '@typescript-eslint/ban-types':
    - error
    - extendDefaults: true
      types:
        '{}': false
        object: false
  'react-hooks/rules-of-hooks': 'error'
  'react-hooks/exhaustive-deps': 'off'
  'import/no-extraneous-dependencies':
    - error
    - devDependencies:
        ['.storybook/**', 'stories/**', '**/*/*.story.*', '**/*/*.stories.*', '**/__specs__/**', '**/*/*.spec.*', '**/__tests__/**', '**/*/*.test.*']
  '@emotion/pkg-renaming': 'error'
  no-unused-vars: 'off'
  '@typescript-eslint/no-unused-vars':
    - warn
    - args: after-used
      argsIgnorePattern: ^_
      vars: all
      varsIgnorePattern: ^_
      ignoreRestSiblings: false
overrides:
  - files: ['*.tsx']
    rules:
      'react/prop-types': 'off'
settings:
  react:
    version: 'detect'