NextJS 시작하기

NextJS란 공식 문서에 따르면, react 기능을 기반으로 한 Full Stack 프레임워크 입니다.

 

React는 CSR(Client Side Rendering) 방식으로, 브라우저가 자바스크립트를 다운 받은 후 화면에 UI를 표시하기 때문에 자바스크립트가 동작하지 않는 환경에서는 화면이 표시되지 않습니다. 또한, 검색엔진과 같은 로봇들이 컨텐츠를 활용하지 못 해 검색엔진 최적화에 약하다는 단점이 있습니다.

 

그에 반해, NextJS는 SSR(Server Side Rendering) 방식으로, 서버 쪽에서 자바스크립트를 렌더링하고 완성된 HTML을 브라우저로 전송하기 때문에 자바스크립트가 동작하지 않는 환경에서도 화면이 잘 보여집니다. 이는 검색엔진 친화적이라는 의미이기도 합니다.

 

설치방법 1.

1. 터미널에 아래 명령어를 입력한다.

npx create-next-app@latest 프로젝트명

 

2. 명령어를 입력하고 나면 아래와 같은 질문들이 나오는데, 본인의 상황에 맞게 선택하여 환경을 설정하면 된다.

 

 

설치방법 2.

1. 터미널에 아래 명령어를 입력한다. (최소한의 필수 패키지만 세팅하는 방법)

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

 

2. package.json에 script 부분을 아래 내용으로 교체한다. (실행, build 등을 위함)

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
}

 

 

실행

설치 후 npm run dev를 입력하면 실행 가능하다.

기본 실행 주소(http://localhost:3000)로 브라우저에서 실행해 보면 아래와 같은 화면을 볼 수 있다.

 

 

실행종료

Control + C