Next.js
Next.js 는 인기 있는 자바스크립트 라이브러리인 React 위에 구축된 자바스크립트 프레임워크입니다. 빠르고 확장 가능한 웹 어플리케이션을 보다 쉽게 구축할 수 있도록 여러 기능과 최적화를 제공하고 있기 때문에 인기가 많습니다. 단순히 React를 사용하는 것보다 Next.js 를 사용하면 얻는 잇점이 무엇이 있을까요?
- 서버사이드 랜더링 (Server-side Rendering, SSR)
그냥 리액트만 사용할 경우, 클라이언트단에서 페이지의 모든 컴포넌트를 랜더링 하기 때문에 브라우저가 자바스크립트를 모두 다운로드하고 실행하는 것을 기다려야 하기 때문에 사용자의 경험 측면에서 안좋을 수 있습니다.
하지만, Next.js 는 서버사이드 랜더링을 기본적으로 제공합니다. 페이지의 HTML 파일이 서버에서 생성되어 브라우저에 전송함으로써 페이지 로딩시간을 단축하고, SEO 를 향상시키는 장점이 있습니다. - Static export
Next.js 를 사용하면 웹 어플리케이션을 정적 사이트로 내보낼 수 있습니다.
CDN 또는 기타 정적 호스팅 솔루션에 쉽게 배포하고 호스팅 할 수 있게 됩니다.
서버 없이 파일 시스템에서 직접 사이트를 서비스할 수 있으므로 동적 데이터가 필요하지 않은 웹사이트를 만들고 싶을 때 유용합니다. - Routing
Next.js의 라우팅은 자동으로 코드를 작게 분할해서 로딩시간을 단축시키는 시스템을 제공합니다. 브라우저는 모든 코드가 아닌 현재 페이지에 필요한 코드만 다운로드하면 되기 때문에 로딩 시간을 단축시킬 수 있습니다. - Optimized Builds
Next.js 는 빌드 프로세스를 최적화 해서 javascript 번들의 크기를 줄여주고, 이를 통해 클라이언트단에서 로딩 시간이 줄어듭니다. 이 최적화는 코드 분할 및 tree-shaking 과 같은 여러 기술이 접목돼 있습니다. 또한 이미지를 최적화할 수 있고 이미지의 placeholder 기능도 내장하고 있습니다. - 사용하기 쉬운 API
Next.js 는 개발자들이 최소한의 코드로 복잡한 웹 어플리케이션을 쉽게 만들 수 있도록 쉽고 간단한 API 를 제공해줍니다. 이 API 는 자동 코드 분할, 동적 가져오기, 통합 css 지원과 같은 기능을 포함합니다. - 강력한 커뮤니티
Next.js 는 프로젝트에 참여하고 서로를 서포트하는 크고 활발한 커뮤니티를 가지고 있습니다. 문서나 자습서 및 포럼을 비롯해 다양한 리소스와 전문 지식을 활용할 수 있기 때문에 문제 해결에 도움을 받을 수 있습니다. - 자동 코드 최적화
Next.js 는 수많은 성능 최적화 기능을 내장하고 있기 때문에, 빠른 속도와 확장성이 높은 웹 어플리케이션을 쉽게 만들 수 있습니다. - 보안
Next.js 는 크로스 사이트 스크립팅(XSS) 및 클릭잭킹과 같은 공격들로부터 보호할 수 있도록 도움이 되는 CSP(COntent Securety Policy)와 HTTP 헤더와 같은 보안 기능을 제공해줍니다. - head 커스터마이징
Next.js 는 각 페이지에 대한 head 문서를 쉽게 설정할 수 있으므로 SEO 와 메타 정보를 쉽게 관리할 수 있습니다. - 유연한 배포 옵션들
Next.js 는 다양한 플랫폼에 배포할 수 있습니다. 오래된 플랫폼이나 클라우드 프로바이더, 정적 호스팅 서비스 등 사용자의 필요에 따라 배포 서비스를 선택할 수 있습니다. - Typescript 내장
Next.js는 타입스크립트를 내장하고 지원을 하고 있어서 유지보수도 쉽고 확장 가능한 코드를 더 쉽게 작성할 수 있습니다. - Integrated Testing
Next.js 는 Jest 및 리액트 테스팅 라이브러리와 같은 테스트를 위한 툴들과 라이브러리들을 포함하고 있습니다. 그래서 고품질 테스트를 작성하고 유지관리하기가 쉽습니다.
결론
위와 같은 장점들로 인해 React 대신 Next.js 를 선택할 수 있습니다. 둘 중에 선택하는 것은 궁극적으로는 각종 요구사항이나 조건에 따라 다르지만 Next.js 는 속도가 빠르고 유지보수와 확장성이 높은 웹 어플리케이션을 구축하는데 적합하여 널리 사용되고 있으므로 선택할 가치가 매우 높다고 할 수 있습니다.
