Next.js 란?
Next.js는 개발자가 웹 서비스를 빠르게 개발하는데 필요한 도구를 제공하는 React 프레임워크
현대의 웹 서비스를 만들다보면 라우팅(Routing), 데이터 페칭(Data Fetching), 렌더링(Rendering), 성능(Performance), 개발자 경험(Developer Experience) 등 여러 요소를 고려하고 결정해야 한다. 개발자는 각 요소에 대해 직접 구현할지 라이브러리나 프레임워크를 사용할지 결정해야 한다.
React는 유저가 화면에서 보는 요소들을 구현하는 JavaScript '라이브러리'입니다. React가 라이브러리이기 때문에 사용하는 개발자가 어떻게 유용한 함수를 사용할지 보다 자유롭게 결정할 수 있습니다. 그렇기 때문에 약간의 노력이 필요하고 시간이 더 소요된다.
반면, Next.js는 개발자에게 웹 서비스를 만드는데 필요한 도구 제공하는 '프레임워크'이다.이는 Next.js가 프레임워크로써 React에 필요한 도구와 설정을 처리하고 코드의 구조, 추가적인 기능들과 최적화까지 함께 제공한다는 의미를 나타낸다
Next.js가 필요한 이유
Next.js를 사용하면 React로 UI를 구현하고 라우팅, 데이터 페칭, 성능과 같은 요소를 해결함과 동시에 개발자 경험까지도 개선할 수 있다.
React만으로 서비스를 만들기 위해선 고려해야할 사항이 많다. 웹팩과 같은 번들러를 사용해 코드를 번들링하고 바벨과 같은 컴파일러를 사용해 변환도 해줘야한다. 적절한 코드 분할로 최적화도 해야하고 SEO를 위해 일부 페이지를 미리 렌더링 해야할 수도 있다.
Next.js는 적절한 추상화를 통해 개발자가 직접 고려해야하는 위와 같은 사항들을 해결해준다. Next.js는 아래와 같은 도구를 기능을 탑재해 최고의 개발자 경험을 제공한다.
직관적인 파일 시스템 기반 라우팅 시스템
페이지 단위의 사전 렌더링(Pre-rendering), 정적 생성(SSG), 서버 사이드 렌더링(SSR)
- 빠른 페이지 로딩을 위한 자동 코드 분할
- 최적화된 프리페칭(prefetching)을 통한 클라이언트 사이드 라우팅
- 빠른 새로고침을 지원하는 개발 환경
- 서버리스 함수로 API 엔드포인트를 구축할 수 있는 API 라우팅
- 완전한 확장성
