React 프로젝트에 Next.js 프레임워크 도입하기

기존의 React 프로젝트에 Next.js 프레임워크를 도입하였다. 이 글에서는 그 도입 과정과 Next.js를 선택한 이유에 대해서 알아보자.

Next.js란?

Next.js는 서버 사이드 렌더링(SSR)을 지원하는 React 프레임워크이다. 초기 페이지 로딩 시간을 줄이고, 검색 엔진 최적화(SEO)를 개선하기 위해 서버 사이드 렌더링을 사용하는데, 이런 기능을 더욱 쉽게 구현할 수 있게 도와준다. 또한 Next.js는 자동 코드 분할, 파일 시스템 기반의 라우팅, API 라우트 등 다양한 기능을 제공한다.

왜 Next.js를 도입할까?

1. 서버 사이드 렌더링 (SSR): 이는 웹사이트의 초기 로딩 시간을 줄이고, 웹 크롤러가 사이트의 컨텐츠를 더욱 잘 이해할 수 있도록 도와주어 SEO를 개선한다.
2. Automatic Code Splitting: Next.js는 페이지 별로 번들을 분할하므로, 필요한 코드만 로드할 수 있다. 이로써 사용자 경험이 개선되며 성능도 개선된다.
3. API Routes: Next.js를 이용하면 서버 사이드에서 실행되는 API 엔드포인트를 쉽게 작성할 수 있다. 이 기능을 활용하면 별도의 서버 설정 없이 프로젝트 내에서 API 로직을 관리할 수 있다.

Next.js 도입 과정

1. Next.js 설치: 먼저, Next.js를 설치합니다. 기존 React 프로젝트에 Next.js를 추가하려면 터미널에 npm install next를 입력한다.
2. 페이지 이동: Next.js는 파일 시스템 기반의 라우팅을 사용한다. 그래서 기존의 React 컴포넌트를 'pages' 디렉토리로 옮기고, 각 페이지에 해당하는 컴포넌트를 루트 레벨에서 접근 가능하도록 만든다.
3. _app과 _document 파일 생성: Next.js는 커스텀 _app와 _document 파일을 제공하여 프로젝트 전체에 공통되는 로직을 관리할 수 있게 한다. _app 파일은 페이지 초기화를 담당하며, 페이지 전환에 대한 상태 유지, 추가 데이터를 페이지에 주입하거나 글로벌 CSS를 추가하는 역할을 한다. _document 파일은 서버에서만 렌더링되며, 일반적으로 서버 사이드 렌더링(SSR)을 위한 초기 HTML 문서 구조를 설정한다.
4. 라우팅 구현: Next.js는 파일 시스템 기반 라우팅을 제공한다. 이는 pages 디렉토리 내의 파일 구조를 바탕으로 URL 경로를 생성한다.
5. API 라우트 구현: Next.js에서는 pages/api 디렉토리 내에서 API 라우트를 생성할 수 있다. 이 기능을 사용하면 별도의 서버 없이도 API 로직을 처리할 수 있다.