Next.js란?
Next.js는 React 기반의 서버사이드 렌더링 프레임워크이다. React 프로젝트에서 서버사이드 렌더링을 구현하기 위해서는 많은 설정과 작업이 필요하지만, Next.js를 사용하면 이러한 작업들을 간단하게 처리할 수 있기 때문에 요즘 많이 사용하는 추세다.
Next.js의 장점이라고 한다면
높은 초기 렌더링 성능
자동으로 처리되는 코드 스플리팅과 프리렌더링
파일 시스템 기반의 라우팅을 제공
API 라우팅과 같은 기능을 포함한다는 점일 것이다.
Next.js의 단점은
세부적인 설정을 제어하기가 어렵고
상대적으로 배우기 어려우며
일부 적용되지 않는 React 플러그인이 있을 수 있다는 점인데
단점보다는 장점이 독보적인지라 나도 이번 프로젝트에서
눈 딱감고 낙하하는 심정으로 Next.js를 써보기로 마음 먹었다.
Next.js 13 뭐가 달라졌을까?
Next.js 13 버전은 이전 버전보다 많은 새로운 기능과 개선된 성능을 제공한다.
Image 컴포넌트
우선 Image 컴포넌트의 성능이 향상되었다.
새로운 blurDataURL 옵션을 사용하여 이미지를 미리 로드하고 블러 처리된 이미지를 보여줌으로써, 이미지 로딩이 완료될 때까지 사용자는 빈 화면이 아닌 블러 처리된 이미지를 볼 수 있다.
Script 컴포넌트
새로운 Script 컴포넌트가 추가되었다. Script 컴포넌트를 사용하여 클라이언트 측에서 자바스크립트 코드를 로드하고 실행할 수 있게 됐다. 또한, Script 컴포넌트는 Google Analytics와 같은 서비스를 쉽게 추가할 수 있도록 지원한다.
간편한 CSS 모듈 지원
더욱 간편한 CSS 모듈 지원이 추가됐다. 이전 버전에서는 CSS 모듈을 사용할 때 styles.module.css와 같은 파일명을 사용해야 했지만, Next.js 13에서는 .module.css 확장자를 사용하는 것으로 충분하다. (만세!)
기타
Live Preview
변경 사항이 있을 때마다 자동으로 페이지를 빌드하고 브라우저에서 미리보기할 수 있도록 지원하는 Live Preview 기능
apiRoutes
자동으로 생성된 OpenAPI 스키마를 사용하여 API 라우트를 생성할 수 있는 새로운 apiRoutes 기능
useSession
Next.js 내부에서 쉽게 세션 관리를 할 수 있도록 지원하는 useSession 훅 기능, 이를 통해 로그인, 로그아웃 등의 인증 처리를 더욱 간편하게 할 수 있다.
이 외에도 다국어 지원을 해주는 localization 기능 등 Next.js 13에서는 다양한 개선사항과 새로운 기능이 추가되어 있다. 아직은 공식 문서를 통한 숙지가 더 필요해보인다.
