Next.js #0 create-next-app

https://nextjs.org/

Next.js by Vercel - The React Framework

 

Next.js는 React.js의 프레임워크 중 하나이면서 최근에 여기저기서 많이 쓰이고있는 유용한 프레임워크이다.

 

기존의 React.js만으로는 부족했던 CSR(Client-side Rendering)의 단점을 보완해주고

React.js를 사용하면서 SSR(Server-side Rendering)을 간단하게 지원해준다.

 

최근에는 수많은 웹어플리케이션 및 사이트가 구축되면서

포털사이트내에서 검색어가 상위권에 올라가야지 직접적인 수익이 발생한다.

 

뿐만 아니라 기업사이트내의 각종 script와 code를 통한 SEO 최적화도 상당히 중요한 요소다.

 

지금까지 느낀 Next.js의 장점은

 

#1. 라우팅처리가 편하다 (폴더별로 간단하게 정리가능)

#2. 위에 언급했던것처럼 SSR 방식을 통한 SEO 최적화에 유리하다.

#3. 대게 프레임워크들이 그렇듯 편리한 컴파일시스템과 자동 저장 및 리프레시를 지원한다.

#4. 또한 static(정적) 파일들 또한 지원한다.

 

정도이다.

 

아직까지 대규모프로젝트에서 사용해본적은 없지만 확실히 기존의 React.js보다 Router 설정 측면에서 유리하고 문법도 React.js를 알고있었던 사람이라면 부담없이 사용 가능하다. (애초에 React.js문법 기반이다.)

 

---

 

#1. 앱 생성 (create-next-app)

 

React.js의 cra(create-react-app)과 마찬가지로 Next에서도 cna(create-next-app)을 지원한다.

 

npx create-next-app nextjs-blog

# typescript
npx create-next-app nextjs-blog --ts
touch tsconfig.json

 

그리고 Next.js를 사용하기 위해서는 노드버전이 높아야한다. (10.13 or later)

 

---

 

#2. 프로젝트 실행

 

위의 명령어로 프로젝트가 생성 되었으면 개발툴을 이용해서 확인 해본다.

CNA 기본 파일들

 

그 다음에 터미널에서 노드를 실행시켜준다.

 

npm run dev

 

명령어를 치게되면 포트내에 Next.js 실행되게 된다.