[NextJs] NextJs+Typescript로 프로젝트 시작하기

1. Node 설치

- Node 설치가 되어있지 않은 경우 Node 부터 설치

- 이미 Node가 설치되어 있는 경우 2번부터 수행

// node version 확인
node -v

 

[ Mac OS ]

- 1) homebrew설치(없는경우)

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

- 2) node 설치

brew install node

[ Window ]

- 1)  Chocolatey 설치(없는경우)

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

 

- 2) node 설치

choco install -y nodejs.install

2. create-next-app를 설치

npm install -g create-next-app

3. 버전 확인으로 설치 여부 확인

create-next-app --version

4. 프로젝트 생성

npx create-next-app myapp
yarn create next-app my app
// 최신 버전 설치
npx create-next-app@latest


//start with typescript
npx create-next-app --typescript
yarn create next-app --typescript


//이미 프로젝트를 생성한 후 typescript를 따로 추가하는 경우
npm install --save-dev typescript @types/react @types/node
yarn add --dev typescript @types/react @types/node

5. 프로젝트 실행

npm run dev
yarn dev

 

정상적으로 실행된다면 http://localhost:3000/ 에서 초기화면을 확인할 수 있다.