Next.js 공부하기 1일차
안녕하세요 🐸
AWS를 공부하면서 올릴 프로젝트를 어느 것으로 할지 고민하다가 NextJS 를 사용해 보는 것은 어떨까 싶어서 정리해봅니다.
시작하기
NextJS 프로젝트의 시작 방법입니다.
우선, 프로젝트를 시작하고 싶은 폴더의 위치 아래에서 다음의 명령어를 통해 프로젝트를 생성/초기화 합니다.
1
npm init
선택 사항이 여러 개 나오는데 신경쓰지 않습니다.
다음으로 아래의 3가지 항목을 설치 받습니다. 저는 강의에 따라 최신 버전을 설치했습니다.
npm@버전의 형식을 입력하는 것으로 특정 버전 혹은 최신 버전을 받을 수 있습니다.
1
npm install react@latest next@latest react-dom@latest
현재 상태에서는 node_modules, package-lock.json, package.json 파일 밖에 없습니다.
하지만 NextJS는 app 폴더의 post 라는 파일을 찾아 사용합니다. 그렇기 때문에 위치에 맞게 폴더와 파일을 생성합니다. 이름의 대소문자도 동일하게 생성합니다. 단, jsx로 생성할 것인지 tsx로 생성할 것인지는 자유입니다. 자바스크립트를 사용할 계획이라면 jsx로 생성하고 타입스크립트를 사용할 계획이라면 tsx로 생성하면 됩니다.
저는 강의와 동일한 환경을 위해 tsx로 생성했습니다. 앞으로의 내용도 타입스크립트를 기준으로 작성했습니다.
package.json 파일의 script 내용에서 다음의 코드를 추가합니다.
1
"dev":"next dev"
위에서 생성한 page.tsx 에서 다음의 코드를 입력합니다.
1
2
3
4
export default function Tomato(){
return <h1>Hello</h1>
}
이 때, vscode에서는 컴파일 에러를 발생 시킵니다. 앞에서 타입스크립트를 사용하기 위한 작업이 되지 않았기 때문인데요, 하지만 다음의 명령어를 실행시키면 해결됩니다.
1
npm run dev
위에서 설정한 next dev 스크립트를 동작시키는 명령어 입니다. 실행시키면 중간에 다음과 같은 내용이 나옵니다.
1
We detected TypeScript in your project and created a tsconfig.json file for you.
대충 번역해보자면 타입스크립트 쓰려고 하는데 준비 안 한 것 같으니 우리가 준비해줬다~ 요정도 입니다.
그리고 다시 돌아와서 page.tsx를 확인해보면 컴파일 에러가 사라집니다.
프로젝트를 실행한 로그를 확인해보면 다음의 로그가 있는 것도 확인 할 수 있습니다.
1
⚠ Your page app/page.tsx did not have a root layout. We created app\layout.tsx for you.
app/layout.tsx 파일이 없어서 이것도 만들어 줬다고 합니다. 아직 이 레이아웃 파일이 정확히 어떤 역할을 하는지는 다음에 공부하니 오늘은 여기까지 알아보겠습니다.