[Next.js] React 세팅하기

서민지·2021년 12월 31일
0

Whatsapp 클론코딩을 진행하면서 Next.js 를 사용해보려고 한다.

what is Next.js?

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 폴더를 만든다.
그냥 한마다로 내가 만든 프로젝트 폴더 바로 밑에 만들면 된다.

  1. 기본으로 추가할 코드
{
  "presets": ["next/babel"],
  "plugins": []
}

styled-components 도 이용할거기때문에 plugin 에 styled-component 추가

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true, // 서버사이드 렌더링 옵션
        "displayName": true, // 태그 class명에 디렉토리, 컴포넌트명 추가
        "preprocess": false
      }
    ]
  ]
}
  1. .eslintrc.json 수정
//기존코드
{
  "extends": "next/core-web-vitals"
}
->
//수정된 코드
{
  "extends": ["next/babel"]
}

여기까지 수정하면 오류수정 끝!

profile
Do what I want for no regret

0개의 댓글