Next.js 설치하기
yarn create next-app or yarn create next-app 프로젝트명
처음부터 프로젝트명 안적어도 걱정 ㄴㄴ. 나중에 project name 뭐로 할건지 물어봄.ㅎ
생성한 프로젝트 실행시키기
yarn dev
바로 yarn dev로 실행 시켰더니 http://localhost:3000/ 페이지로 들어갈 수 있었다.
그런데에에에!
pages/index.js 파일에 들어가보니 아무 에러 없이 화면은 잘 나오는데, 1번 째 줄, import 부분에 빨간 밑줄이 생기면서 뭔가 문제가 있다고 계속 떴다.
알아보니 Next.js 버전 업그레이드 됨에 따라 하나 추가설정 해줘야 하는게 있었다.
Parsing error: Cannot find module 'next/babel'
프로젝트 최상위 root 폴더에 .babelrc
폴더를 만든다.
그냥 한마다로 내가 만든 프로젝트 폴더 바로 밑에 만들면 된다.
- 기본으로 추가할 코드
{ "presets": ["next/babel"], "plugins": [] }
styled-components 도 이용할거기때문에 plugin 에 styled-component 추가
{ "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, // 서버사이드 렌더링 옵션 "displayName": true, // 태그 class명에 디렉토리, 컴포넌트명 추가 "preprocess": false } ] ] }
- .eslintrc.json 수정
//기존코드 { "extends": "next/core-web-vitals" } -> //수정된 코드 { "extends": ["next/babel"] }
여기까지 수정하면 오류수정 끝!