[Next.js] 01. 시작하기

Front-End/Next.js

[Next.js] 01. 시작하기

Bigone17 2022. 3. 8. 16:09

🟡 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 확인하기