Next.js 설치
먼저 Node.js와 yarn이 설치되어 있는지를 확인해봐야 합니다.
Node.js는 node -v 를 통해
$ node -v
v16.13.1다음과 같이 v와 함께 버전이 표시된다면 설치되어 있는 상태입니다.
yarn도 마찬가지로 -v를 통해서 확인할 수 있습니다.
$ yarn -v
1.22.17두 가지 모두 버전이 확인되면 node와 yarn의 설치는 필요하지 않고 다음 단계로 넘어가면 됩니다.
Node.js와 yarn이 설치되어 있지 않다면?
Node.js는 https://nodejs.org/ko/ 이곳에서 다운 받을 수 있습니다.
혹은 터미널에서
(Mac OS) $ brew install node@8
(Window OS)$ choco install nodejs-lts
를 쳐서 다운받을 수 있습니다.
이제, Next.js를 받을 준비가 끝났습니다.
프로젝트를 진행할 폴더에서 다음 명령어를 터미널에 입력해주세요.
$ npx create-next-app@latest바로 다음에 y를 입력해주고 프로젝트 이름을 입력하라고 나오는데 하고 싶은 프로젝트 명을 적어주시면 됩니다.
Ok to proceed? (y) y
? What is your project named? › my-app여기까지가 Next.js의 설치 방법입니다.
여기에 더해 emotion까지 함께 사용하고 싶으시다면 프로젝트가 있는 파일 속에서 다음 명령어를 입력해주시면 됩니다.
$ yarn add @emotion/react저는 Next.js의 설치 과정까지는 잘 따라왔지만 프로젝트를 진행하다가 특이한 에러가 떴었는데요.
Parsing error : Cannot find module 'next/babel'해당 에러는 stack overflow를 통해 해결할 수 있었습니다.
Create file called .babelrc in your root directory and add this code:
{
"presets": ["next/babel"],
"plugins": []
}And in .eslintrc, replace the existing code with:
{
"extends": ["next/babel","next/core-web-vitals"]
}루트 디렉토리에서 .babelrc 폴더를 만들어 위의 코드를 넣어두면 되고,
.eslintrc에서는 기존에 있는 코드를 아래의 코드처럼 수정하면 해당 에러를 해결할 수 있습니다.
다들, 프로젝트 성공적으로 설치해서 열심히 달려봅시다!! 화이팅!
