[Nextjs] 초기 설치 & 세팅 (Installation)

NextJS 대표로고

---

접근 (요약)

 

  1. Automatic Installation_NextJS app 만들기

      (1.1) create-next-app 명령어 사용

 

  2. Manual Installation_필수 패키지 설치

      (2.1). npm install (next@latest / react@latest / react-dom@latest)

      (2.2). package.json 파일 열고 scripts 추가하기

      (2.3). scripts 상세내용 정리

 

  3. 프로젝트 내, app 폴더 생성하기

      (3.1). app/layout.tsx 내에 코드 추가

      (3.2). app/page.tsx 내에 코드 추가

 

  4. (optional) 프로젝트 내, public 폴더 생성하기

      (4.1). app/layout.tsx 내에 코드 추가

      (4.2). app/page.tsx 내에 코드 추가

 

  5. Development Server 실행(Run)

      (5.1). npm run dev 명령어 사용

      (5.2). http://localhost:3000 접속

      (5.3). app/layout.tsx / app/page.tsx 수정해보기

 

 

---

방법

  1. Automatic Installation_NextJS app 만들기

      (1.1) create-next-app 명령어 사용

npx create-next-app@latest 명령어

'npx create-next-app'이라는 명령어를 통해 Next.js app 프로젝트를 생성합니다.

결과적으로 만들어진 sets up들은 자동으로 구성이 됩니다. 

(npx create-next-app 뒤에 붙은 '@latest'는 가장 최신의 버전을 의미합니다.)

프로젝트 sets up을 자동 완료하기 전, 설정값을 유저에게 선택할 수 있도록 함.

Next.js app의 명칭을 작성해줌으로 시작해,

Next.js app에 기본으로 구성이 되어있는 TypeScript, ESLint, Tailwind CSS를 구성할지 묻기도 합니다.

Next13이전에 사용했던 "src/"를 선택할지, Next13이후에 사용될 App Router를 선택할지 결정할 수도 있습니다.

 

NextJS project 생성 후 Explorer 모습

그렇게, NextJS 프로젝트 app을 구성(생성)하고 나면, 위와같이 자동으로 구성된 sets up 내역을 확인할 수 있게 됩니다.

---

  2. Manual Installation_필수 패키지 설치

      (2.1). npm install (next@latest / react@latest / react-dom@latest)

필수 패키지 (Required packages)인 next / react  / react-dom을 설치

      (2.2). package.json 파일 열고 scripts 추가하기

package.json 파일 내 scripts 내용 추가

 

 

      (2.3). scripts 상세내용 정리

               - dev : next dev 는 Next.js를 개발모드에서 실행(Run)시키는 것

               - build : next build는 배포 사용을 위해 애플리케이션을 빌드(build)시키는 것

               - start : next start는 Next.js 배포 서버를 실행시키는 것

               - lint : Next.js가 내장하고 있는 ESLint 구성을 set up 시키는 것

---

  3. 프로젝트 내, app 폴더 생성하기

      (3.1). app/layout.tsx 내에 코드 추가

      (3.2). app/page.tsx 내에 코드 추가

 

 

 

---

  4. (optional) 프로젝트 내, public 폴더 생성하기

      (4.1). app/layout.tsx 내에 코드 추가

      (4.2). app/page.tsx 내에 코드 추가

 

 

 

---

  5. Development Server 실행(Run)

      (5.1). npm run dev 명령어 사용

      (5.2). http://localhost:3000 접속

      (5.3). app/layout.tsx / app/page.tsx 수정해보기

생성한 프로젝트 명으로의 경로(path) 진입 후,  'npm run dev' 명령어를 입력해줍니다.

이후, 기본 url로 하는 http://localhost:3000 에 접속해 프로젝트가 정상적으로 구동이 되는지 확인을 합니다.

마지막으로 layout.tsx와 page.tsx를 수정해 변경사항이 적용이 되는지 확인합니다.

 

 

 

 

 

---

이상으로, NextJS를 활용해 app 초기세팅과 설정작업을 학습해봤습니다.

추가 질문을 댓글을 달아주시면 감사하겠습니다^^

오늘도 파이팅입니다!