next-material-starter

[raycon]

앱 생성

npx create-next-app

폴더 구조를 변경한다.

public
src
  pages
    api
  styles

절대 경로 import 설정

jsconfig.js

import 구문에서 src/ 밑의 경로로 import 할 수 있게 설정한다.

{
  "compilerOptions": {
    "baseUrl": "src",
  }
}

ESLint

• npx install-peerdeps --dev eslint-config-airbnb
• npm install --save-dev eslint-config-prettier

  "devDependencies": {
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.3.0",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.0
  }

[raycon]

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

[raycon]

.eslintrc

{
  "extends": ["airbnb", "prettier"],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["node_modules", "src", "pages"]
      }
    }
  },
  "rules": {
    "no-unused-vars": 0,
    "react/react-in-jsx-scope": 0, // next.js 에서는 React 를 import 할 필요가 없는 것 같음
    "react/jsx-filename-extension": 0,
    "react/jsx-props-no-spreading": 0,
    "react/destructuring-assignment": 0,
    "react/prop-types": 0,
    "react/no-unescaped-entities": 0,
    "react/self-closing-comp": 0
  },
  "plugins": ["import", "react", "react-hooks"],
  "env": {
    "browser": true // document 를 사용하기 위해 설정
  },
  "parser": "babel-eslint"
}

[raycon]

Material-UI

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

npm install @material-ui/core @material-ui/styles

[raycon]

https://velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95