next.js 시작해보기

next.js가 뭐지

• 프론트엔드 개발을 공부하면서 next.js에 대해 들어봤지만 정확한 용도에 대해 알지는 못했다. 회사에서 next.js를 사용하기 때문에 이에 대해 잘 알아둬야 할 필요성이 생겨서 글을 남기면서 공부해보자!
• 하지만 누가 뭐라해도 공식문서가 최고이긴 하다!
• https://nextjs.org/

Next.js by Vercel - The React Framework

• https://nextjs.org/learn/foundations/about-nextjs

Learn | Next.js

next.js는 프레임워크!

• React는 반응형 UI를 제작하는 Javascript 

library이기 때문에 개발자가 어플리케이션을 구축하기 위해 자유롭게 커스텀할 수 있는 부분이 많지만 
동시에 어플리케이션을 바닥부터 구축하기 위해선 어느정도의 노력이 필요하다고도 볼 수 있다.
(어떤 요구사항에 대해 개발자가 모두 직접 구현해야 함! - react-router-dom, react-helmet 등등..)

• next.js는 React로 UI를 만드는 SSR(Server Side Rendering) 기능을 제공하는 프레임워크이다.
  • (CSR)Client Side Rendering을 제공하지 않는게 아님!! 

Next.js는 리액트를 기반으로 한 프레임워크로 React를 이용해서 어플리케이션을 구축할 때
추가적인 도구, 기능, 최적화를 제공한다

React로 UI를 그리고 Next.js를 이용해서 필요한 기능들을 별도의 노력 없이 가져다 쓸 수 있다
(라우팅, 데이터 패칭, code-splitting 등등)

• code-splitting ?
  • code-splitting은 어플리케이션의 bundle을 페이지에 필요한 작은 덩어리로 나눠서 각 진입점에 나눠주는 것!
  • code-splitting의 목표는 어플리케이션의 초기 로드 시간을 페이지에 필요한 코드 부분만 나눠줘서 줄이는 것이다
  • 처음에 페이지가 로드되면 next.js는 사용자가 탐색할 가능성이 있는 페이지의 코드를 미리 로드할 수 있음!

 

 

next.js 간단하게 시작해보기

• react의 CRA와 마찬가지로 next.js에서 제공하는 CNA(Creat Next App)를 이용해 간단하게 next.js 프로젝트를 생성할 수 있다.
• 아래 명령어를 통해 간단히 next.js 프로젝트를 생성해보자

yarn create next-app [프로젝트명]
// or typescript
yarn create next-app [프로젝트명] --typescript

• 설치를 완료했다면 아래 명령어를 통해 next.js 프로젝트를 시작해보자!

// yarn
yarn dev
// npm
npm run dev