[Next.js] Next.js 설치 및 실행

들어가며

Next.js 학습을 하며 정리할 예정입니다. 노마드 코더 'Next.js 시작하기' 강의를 참고하며 학습 내용을 정리할 예정입니다. 

• Next.js 13 이상
• VSCode

---

Next.js 프로젝트 생성

npx create-next-app@latest

#타입스크립트를 사용할 경우
npx create-next-app@latest --typescript

• CNA를 활용하여 프로젝트를 생성합니다
• typescript를 사용하는 경우 --typescript 옵션을 추가합니다

추가 설정

위 명령어를 실행하게 되면, 몇 가지 설정을 추가적으로 하게 됩니다. 내용은 다음과 같습니다.

1. What is your project named?

• 프로젝트 명을 입력한다

2. Would you like to use ESLint with this project?

• ESLint 사용 여부
  • ESLint를 사용하면 자동으로 문법 오류를 잡아준다.
• default - Yes
• ESLint를 사용하면 자동으로 문법 오류를 잡아줘서 편리하지만, VSCode에서 코드를 작성하는 경우 간혹 prettier extenstion이랑 충돌이 난다.

3. Would you like to use Tailwind CSS with this project?

• Tailwind CSS 사용 여부
• default - Yes
• Tailwind CSS는 CSS 프레임워크이며, 인라인 스타일을 사용하는 것만큼 쉽고 빠르게 스타일링을 할 수 있으면서 일관된 디자인을 가능하게 해주는 유용한 프레임워크이다.

4. Would you like to use src/ directory with this project?

• src 디렉토리를 사용할 것인지
• default - No

No를 선택한 경우

Yes를 선택한 경우

5. Would you like to use experimental app/ directory with this project?

• app 디렉토리를 사용할 것인지
• default - No
• 아직 베타 버전이며, Next.js 13 버전 부터 도입되었다
• 자세한 사용은 여기를 참고하면 좋을 듯 하다.

6. What import alias would you like configured?

• import alias 를 설정하면서 프로젝트를 생성할 수 있다
• 나중에 설정할거면 비워둔 채로 다음 스텝으로 넘어가면 된다
• import alias 설정 참고 자료

Next.js 프로젝트 실행

cd [프로젝트 이름]
npm run dev

 

실행 결과

터미널

구동된 server의 주소와 접속 URL을 확인할 수 있다.

 

브라우저

localhost:3000 접속 모습

참고 자료

• 노마드 코더 - NextJS 시작하기
• NextJS 공식 문서

NextJS 시작하기 – 노마드 코더 Nomad Coders