[Next.js] Next 프로젝트 수동 setup

1.  프로젝트 폴더 만들기

$ mkdir prj_folder

 

2. 프로젝트 폴더로 이동

$ cd prj_folder

 

3. 해당 폴더를 VSCode에서 열어보기

$ code .

 

4. package.json 폴더 생성

$ npm init -y

 

5. 필요한 라이브러리 설치

  - react : UI와 다른 모든 것을 구성

  - react-dom : 위의 것을 브라우저의 Document Object Model(DOM)에 렌더하는 역할

$ npm install react@latest next@latest react-dom@latest

 

6. jackage.json 스크립트 수정

"scripts" : {
	"dev" : "next dev"
},

 

7. 프로젝트 실행 확인

$ npm run dev

  - local server 실행 : http://localhost:3000

  - Next.js가 자동으로

      - typeScript dependencies 설치

      - app/page.tsx 를 참조하여 화면 띄어줌

      - app/layout.tsx  파일 생성

 

8. README.md 파일 추가

$ touch README.md