[Next.js] Project 생성 및 설정

• 프로젝트 생성
  • cmd 창 프로젝트 위치에서 npx create-next-app@latest 입력

    • 

• 프로젝트 실행
  • cmd 창 위에서 만든 project name 위치로 이동
  • yarn lint 입력
  • yarn dev 입력
  • http://localhost:3000/ 접속

 

• 기타
  • prettier 설치
    • cmd 창 project name 위치에서 npm i -D prettier eslint-config-prettier 입력
    • package.json 파일의 scripts 블록 안에 "prettier": "prettier --write .” 추가
    • .eslintrc.json 파일의 extends 안에 "prettier" 추가, extends 아래에 "rules": { "no-unused-vars": "error" } 추가
    • .prettierrc 파일 생성 후 아래 코드 추가

      • {
          "singleQuote": true,
          "jsxSingleQuote": true,
          "semi": true,
          "tabWidth": 2,
          "trailingComma": "es5"
        }

    • cmd 창 project name 위치에서 yarn prettier 입력
    • cmd 창 project name 위치에서 npm i -D @trivago/prettier-plugin-sort-imports 입력
    • .prettierrc 파일 하단에 아래 코드 추가

      •   "plugins": ["@trivago/prettier-plugin-sort-imports"],
          "importOrder": [
            "^next$",
            "^next/\\w*$",
            "^next/(.*)$",
            "^react$",
            "^react/(.*)$",
            "^@/lib/(.*)$",
            "^[./]"
          ]

  • .eslintrc.json 파일 등에서 Unable to load schema 에러 발생 시
    • Settings- Http: Proxy Support 검색 후 off로 변경

      • 

    
    
    • 또는 Settings- default formatter 검색 후 Prettier ESLint로 변경

      • 

    • • •  
   
•