[NextJS] 프로젝트 생성 및 실행 방법

NextJS 

 

Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다

*  Pre-Rendering, SSR, CSR 개념 *
https://cocococo.tistory.com/41

 

 

---

1. NextJS 실행 과정

1) reactJS를 백엔드에서 동작시켜서 페이지를 미리 만들어 컴포넌트들을 렌더링 시킨다.
2) 렌더링이 끝났을 때 HTML이 되고 HTML를 페이지 소스 코드에 넣어준다.
3) 사용자는 자바스크립트와 reactJS가 로딩되지 않더라도 콘텐츠를 볼 수 있다.
4) react가 로딩이 끝났을 때 기본적으로 존재하는 것들과 연결시켜주어 react App이 된다.
    - 사용자가 웹사이트에 가면, 초기 상태 컴포넌트로 된 미리 생성된 HTML 페이지를 보게 되고, 상호작용이 일어나면              reactJS는 그걸 받아서 작동한다.

 

---

2. 프로젝트 생성

터미널(CMD)에서 작업

npx create-next-app@latest

// TypeScript로 프로젝트 생성
npx create-next-app@latest --typescript

...
? What is your project named? [프로젝트명]

• 다운로드를 하기 위해서 프로젝트명을 입력하라고 나온다.

 

2-1) 프로젝트 열기

code [프로젝트명]
// ex) code nextjs-test

• 프로젝트가 있는 경로에서 해당 명령어를 입력

 

 

---

3. Web Server 실행

프로젝트 터미널에서 작업

npm run dev

web server 실행