[Next.js] 01. 시작하기

 

 

 

 

🟡 1. next js 시작 전 세팅

 🟣 Node.js 버전 10.13 이상 설치

   Node.js 설치 후 설치가 정상적으로 되었는지 확인하기 위해서 터미널을 여신 후 'node -v'를 입력하여 확인.

//노드 버전 확인
node -v

 

 🟣 npm 혹은 yarn

  npm (Node Package manager)은 노드 설치 시 자동적으로 같이 설치가 됩니다. 

// npm  버전 확인
npm -v

터미널에서 'npm -v'를 입력하면 설치 버전이 나옵니다.

 yarn은 페이스북에서 만든 자바스크립트 패키지 매니저입니다. npm과 기능은 동일하고, 페이스북 측에서 npm보다 보안이 뛰어나고 성능이 빠르다고 주장은 하고 있습니다 ㅎㅎ.. (사실 npm, yarn 둘 다 좋습니다.)

yarn 설치 방법은 터미널에서 npm install yarn -g라고 입력하면 됩니다.

// yarn 설치
npm install yarn -g

 

 

🟡 2. Next.js 시작하기

 🟣 2.1 CNA을 이용하여 설치

npx create-next-app
or
yarn create-next-app

// typescript 버전
npx create-next-app --typescript
or
yarn create next-app --typescript

터미널에 npx create-next-app이라고 입력하면 아래와 같이 프로젝트 명을 입력하면, 자동으로 설치가 진행됩니다.

npx create-next-app
Need to install the following packages:
  create-next-app
Ok to proceed? (y) y
√ What is your project named? ... my-first-next-app
Creating a new Next.js app in D:\GIT\my-first-next-app.

Using npm.

Installing dependencies:
- react
- react-dom
- next


added 16 packages, and audited 17 packages in 10s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Installing devDependencies:
- eslint
- eslint-config-next


added 203 packages, and audited 220 packages in 31s

63 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initialized a git repository.

Success! Created my-first-next-app at D:\GIT\my-first-next-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-first-next-app
  npm run dev

 

 

🟣 2.2 생성된 Next.js 확인하기

생성된 Next.js 파일 구조

 

- node_modules 폴더 : 현 프로젝트에 필요한 노드 모듈들을 모아 놓은 폴더

- pages 폴더 : 웹사이트의 페이지들의 파일을 모아 놓은 폴더

- public 폴더 : next.js 프로젝트에서 전역적으로 사용하는 사진, 동영상들을 모아 놓은 폴더

- styles 폴더 : css들을 모아 놓은 폴더

- .gitignore : 깃허브에 올릴 때 제외할 항목을 적어 놓는 파일

- next.config.js : 웹팩 번들링 및 api 통신을 할 때 사용

- package.json : 현 프로젝트의 설정과 정보를 적어 놓은 파일

 

 

 

 

🟣 2.3 Next.js 실행

 1. 에디터(저 같은 경우는 vscode)에서 터미널을 여신 후 'npm run dev'라고 입력하면 next.js가 실행이 됩니다.

npm run dev
or
yarn dev

npm run dev 입력 후 출력된 문구

2. 크롬을 여신 후 주소창에 localhost:3000이라고 입력

localhost:3000

 

 

🟣 2.4 next.js 종료하기

 - 에디터 터미널 클릭 후 ctrl + c  입력, 아래 사진과 같이 문구가 뜨면 Y 입력 후 엔터

 

 

 

📝 정리 

1. node.js 설치하기 (10.13 이상 버전으로)
2. npx create-next-app or yarn create-next-app으로 설치
3. npm run dev or yarn dev로 실행

 

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~