[Next.js] Next.js 프로젝트 시작하기

Next js는 Server Side Rendering (SSR) 과 Pre-Rendering 그리고 Search Engine Optimize(SEO) 에 가장 강력학 프레임워크다.

기존의 react앱을 만들때는 create-react-app (CRA) 를 이용하게 되는데 CRA는 Single Page Application이며 

SRA 의 단점으로는  웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하기 때문에, 첫 로딩 시간도 오래걸리고 Search Engine Optimization(SEO)에 취약하다는 단점이 있다.

반면, next.js는 pre-reloading을 통해 미리 데이터가 렌더링된 페이지를 가져올수 있게 해주므로 사용자에게 더 좋은 경험을 주고, 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다. pre-reloading은 SSR 뿐만 아니라 정적 사이트 생성(Static-Site Generate (SSG))도 가능하게 해준다. 또, SSR과 CSR도 혼합하여 사용 가능하다.

 

next 시작하기 

$ npx create-next-app@latest --typescript 
projectName

or

$ npx create-next-app@latest 
projectName


npm run dev
or
yarn 
yarn dev