NEXT.JS 프로젝트 하신다고요? 축하드립니다.

8월엔 참 많은 일이 있었다. 스타트업에 취업도 하게되고 다니던 부트캠프도 그만 두고 ..

 
이번 글은 앞으로 당분간 쓰게될 NEXT.js 에대해 간단하게만 정리해보고자한다.
 
 

모두가 리액트를 할때

NEXT.JS를 하는 심정이란..

ssr 멋있다~

 

Next.js의 탄생 배경

우리가 흔히 웹사이트를 만들 때, 프론트엔드와 백엔드를 따로따로 작업하는 방식이 많았는데, 이는 여러 가지 문제를 안고 있었다. 그 중 대표적인 게 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 장단점이었다.
서버 사이드 렌더링은 페이지 로딩 속도에서 유리하지만, 개발과 유지보수가 번거로웠고, 클라이언트 사이드 렌더링은 인터랙티브한 사용자 경험을 제공하지만 SEO(검색엔진 최적화)에 문제가 있었다.
 

 
이러한 문제를 해결하고자 2016년에 Next.js가 등장했다. React 기반의 서버 사이드 렌더링을 손쉽게 구현할 수 있게 해주고, 동시에 클라이언트 사이드 렌더링도 지원하면서도 설정이 최소화된 프레임워크로, 개발자들의 많은 사랑을 받게 됐다.

Next.js의 의의

Next.js는 그저 프레임워크일 뿐이지만, 개발 생산성을 높여주는 도구라는 점에서 큰 의의가 있다. React를 기반으로 하면서도, 기존 React 앱에서 쉽게 서버 사이드 렌더링을 구현할 수 있도록 해주고, 또한 SEO 최적화와 빠른 페이지 로딩을 가능하게 해주는 특장점이 있다. 이는 특히 스타트업과 소규모 개발 팀에게 큰 도움이 되며, 그만큼 빠르게 결과물을 만들어야 하는 프로젝트에서 매우 유용하게 사용될 수 있다.
 
간단한 설정만으로 페이지를 렌더링하는 방법을 바꿔주고, SEO 최적화까지 지원하는 Next.js는 단순한 React 앱을 넘어, 실제 프로덕션 레벨 웹 애플리케이션까지 구현할 수 있게 해준다. 실제로 Next.js를 사용하면, React 앱을 사용하는 방식에 있어 많은 선택지를 제공하면서도, 번거로운 설정과 문제들을 자동으로 처리해준다.

다음 글에서는…

Next.js를 어떻게 설치하고, 기본적인 기능을 사용하는지, 그리고 getServerSideProps, getStaticProps, API routes 등 Next.js만의 특이한 기능들을 다뤄보려고 한다. 그 전에 간단히 왜 Next.js를 선택했는지, 그리고 어떤 프로젝트에서 유용하게 사용할 수 있는지에 대해 간략히 짚어봤다. 
 
 
 
참고로..