Next.js
Next.js는 현대적인 웹 애플리케이션을 위한 React 기반의 오픈 소스 SPA 프레임워크다. 이는 개발자들에게 서버 사이드 렌더링(SSR), 정적 사이트 생성(Static Site Generation, SSG), API 라우트, 최적화된 프리페칭 등 다양한 기능을 제공하여 애플리케이션의 성능을 향상시키고, 검색 엔진 최적화(SEO)에 유리한 조건을 제공한다.
Next.js의 특징
- 페이지 기반 라우팅 시스템: 파일과 폴더 구조를 기반으로 자동으로 라우트를 설정한다.
pages디렉토리 내의 각 파일은 라우트로 변환되어, 빠르고 효율적인 페이지 구성을 가능하게 한다.
- Next.js 13부터
app router기반으로 라우팅 시스템을 사용할 수 있도록 수정되었는데, 아직까지는 버그도 많고 다른 라이브러리들과 호환성이 좋지 않아서pages디렉토리 사용을 선호한다.
- 자동 코드 분할: 각 페이지에 필요한 최소한의 JavaScript만 로드하여, 빠른 페이지 로딩 속도를 보장한다.
- 내장 CSS와 Sass 지원: CSS와 Sass를 컴포넌트 레벨에서 직접 임포트할 수 있으며, CSS 모듈을 사용하여 스타일 충돌 없이 스타일을 적용할 수 있다.
- 빠른 리프레시: 개발 모드에서는 빠른 리프레시를 지원하여, 코드 변경 사항이 즉시 반영되어 개발 생산성을 높여준다.
- API 라우트: API 엔드포인트를 쉽게 생성할 수 있어, 백엔드 로직을 Next.js 애플리케이션 내에 구현할 수 있다.
SSR(Server Side Rendering)
SSR은 초기 페이지 로드 시 서버에서 전체 페이지의 HTML을 생성하고 클라이언트로 전송하는 기술이다. 이는 첫 번째 바이트까지의 시간(TTFB)을 줄이고, 크롤러가 페이지 내용을 쉽게 인덱싱할 수 있게 하여 SEO에 유리하다.
CSR(Client Side Rendering)과의 차이
CSR 방식에서는 클라이언트 측에서 JavaScript를 이용해 동적으로 콘텐츠를 생성한다. 이는 사용자 인터랙션이 빈번한 웹 애플리케이션에 적합하지만, 초기 로딩 속도가 느리고 검색 엔진 최적화(SEO)에 단점이 있다.
Next.js의 데이터 가져오기 메서드
getStaticProps: 빌드 타임에 데이터를 가져와 페이지를 미리 생성한다. 블로그 포스트, e커머스 제품 리스트 등 자주 변하지 않는 데이터의 로드에 적합하다.
getStaticPaths: 동적 라우팅을 사용하는 페이지를 미리 렌더링하기 위해 필요한 경로를 지정한다. 예를 들어, 블로그 포스트의 각각의 페이지를 생성할 때 사용한다.
getServerSideProps: 각 요청마다 서버에서 데이터를 가져와 페이지를 렌더링한다. 사용자의 요청에 따라 달라지는 데이터를 다루는 페이지에 적합하다.
설치 방법
Next.js 프로젝트는 쉽게 시작할 수 있다. JavaScript 프로젝트를 위해서는 다음 명령어를 사용한다
npx create-next-app@latest npx create-next-app@latest ./ (현재 폴더에 src를 생성할 수 있어 선호한다)
기본 구조와 컨벤션
Next.js는 효율적인 개발을 위해 명확한 폴더 구조와 컨벤션을 제안한다.
pages 디렉토리는 애플리케이션의 라우트와 연결되며, **public**은 정적 파일을 위한 곳이다. 스타일링과 관련된 CSS 파일은 styles 디렉토리에 보관된다. 이와 같은 구조는 Next.js 프로젝트의 관리를 용이하게 하고, 개발자가 더 로직에 집중할 수 있도록 도와준다.Next.js를 사용하면 빠르고 사용자 친화적이며, SEO에 강력한 웹 애플리케이션을 쉽게 구축할 수 있다. 다양한 사전 설정 옵션과 최적화 기능을 통해 현대적인 웹 개발의 요구 사항을 충족시키는 강력한 프레임워크다.