본문 바로가기
Dev/Next JS

[공식문서] Next.js 앱 만들기 #2

by ZEROGOON 2023. 8. 14.

설정

먼저 개발 환경이 준비되어 있는지 확인해 봅시다.

  • Node.js가 설치되어 있지 않다면 여기서 설치하세요. Node.js 버전은 10.13 이상이어야 합니다.
  • 이 강좌에서는 텍스트 편집기와 터미널 앱을 사용합니다.

 

Windows를 사용하신다면 Git for Windows를 다운로드하고 함께 제공되는 Git Bash를 사용하는 것을 권장합니다. Git Bash는 이 강좌에서 사용되는 UNIX 특정 명령어를 지원합니다. 또 다른 옵션으로 Windows Subsystem for Linux(WSL)을 사용할 수 있습니다.

 

Next.js 앱 만들기

Next.js 앱을 만들려면 터미널을 열고 원하는 디렉터리로 이동한 다음 다음 명령을 실행하세요.

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
실제로는 이 명령은 create-next-app라는 도구를 사용하며, 이를 통해 Next.js 앱을 시작합니다. --example 플래그를 통해 이 템플릿을 사용합니다.

작동하지 않는 경우 이 페이지를 확인하세요.

 

개발 서버 실행하기

이제 nextjs-blog라는 새 디렉터리가 생겼을 것입니다. 해당 디렉터리로 이동해 봅시다.

cd nextjs-blog

이동 후, 다음 명령을 실행하세요.

npm run dev

 

이 명령은 Next.js 앱의 "개발 서버"를 3000번 포트에서 실행합니다.

 

작동 여부를 확인해 보겠습니다.

브라우저에서  http://localhost:3000을 열어보세요.