Next.js14 학습코스 따라하기 (Chapter 1)

새 프로젝트 만들기

• 먼저, Next.js 애플리케이션을 만들기 위해, 터미널을 열고 프로젝트를 보관하려는 폴더로 이동한 후 아래 명령어를 입력한다.

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

• 설치 과정을 거치면, 처음부터 코드 과정을 작성하는 튜토리얼과 달리, 대부분의 코드가 작성된 모습을 볼 수 있을 것이다.
  • Learning-pages(Chapter 1)에서는 이러한 개발 환경을 세팅한 이유를 두 가지 정도로 제시하고 있다.
  • 하나는 기존 코드베이스를 사용함으로써, 실제 개발 환경을 더 잘 반영하기 위함이고, 나머지 하나는 모든 코드를 직접 작성하지 않고도 Next.js의 주요기능을 학습함에 중점을 두기 위한 것이라고 한다.

프로젝트 탐색하기

• 그 다음, 실제 작업 디렉터리 경로로 이동하기 위해, 터미널에 아래 명령어를 입력한다.

cd nextjs-dashboard

프로젝트의 폴더 구조에 대해 궁금하다면, 해당 링크를 클릭하여 관련 문서를 읽어볼 수 있다.

개발 서버 실행하기

• 프로젝트에서 사용할 패키지를 설치하기 위해 아래 명령어를 입력한다.

npm i

• 그 다음, 개발 서버 실행을 위해 아래 명령어를 입력한다.

npm run dev

• 명령어 입력으로 개발 서버가 실행되면, 아래 이미지에 표시된 내용을 출력하는 페이지를 열 수 있다.
  

• 만약 페이지를 여는 방법을 모르겠다면, 아래에서 제시하는 방법을 시도해볼 수 있다.
  1. 개발환경 실행 후, 해당 링크를 클릭
  2. 터미널에 표시된 localhost 주소 입력 및 클릭