💻Next.js 15를 선택한 이유

개요

이번 글에서는 이번 프로젝트에서 Next.js 15을 선택한 이유를 설명하도록 하겠습니다.

Next.js란?

Next.js란 풀스택 웹 애플리케이션 구축을 위한 React 프레임워크입니다. Next.js는 번들링, 컴파일링 등 React에 필요한 도구를 추상화하고 자동으로 구성합니다. 이를 통해 애플리케이션 설정에 들이는 시간을 줄일 수 있습니다. 또한 서버 사이드 렌더링(Server-Side Rendering, SSR)과 정적 사이트 생성(Static Site Generation, SSG) 등의 기능을 제공함으로써 더 나은 사용자 경험과 개발자 편의성을 제공합니다.

Next.js의 장점

Next.js의 장점은 다음과 같습니다.

• 코드 스플리팅(Code Splitting)

  Next.js에서 사용하는 서버 컴포넌트를 통해 페이지 단위로 코드 스플리팅을 자동으로 수행합니다. 이를 통해 불필요한 코드가 로딩되지 않도록 하여 번들 크기를 줄임으로써 초기 로딩 속도를 최적화하여 사용자 경험을 개선할 수 있습니다.

• 폴더 기반 라우팅

  Next.js의 App Router는 폴더 기반 라우팅을 지원하므로 React에서의 복잡한 라우팅 설정 작업이 불필요합니다.

• 검색 엔진 최적화(Search Engine Optimization, SEO)

  Next.js는 서버 사이드 렌더링(SSR)을 지원하므로, 서버에서 미리 렌더링된 HTML을 생성할 수 있습니다. 이를 통해 초기 로딩 속도가 빨라지고 검색 엔진 최적화(SEO)에도 유리합니다.

• 이미지 최적화

  Next.js에서 제공하는 next/image 컴포넌트는 이미지 자동 최적화 기능을 제공합니다. 특히, 다양한 해상도에 맞춰 이미지가 로드되도록 지원합니다.

• 미들웨어

  Next.js의 미들웨어 기능을 통해 요청이 완료되기 전에 서버에서 코드를 실행할 수 있습니다. 특히, 로그인한 사용자만 접근할 수 있는 페이지에 접근할 때 미들웨어를 통해 사용자 로그인 페이지로 리다이렉트함으로써 불필요한 화면 깜빡임 현상을 없앨 수 있습니다.

Next.js 14 버전 대신 Next.js 15 버전을 선택한 이유

한국 시간 기준 2024년 10월 22일에 Next.js 15 버전이 릴리즈되었습니다. 이번 프로젝트에서는 Next.js 14 버전 대신 Next.js 15 버전을 선택하기로 결정하였습니다. 사실 출시된지 얼마 안됐기 때문에 그냥 14 버전을 사용하는 것이 프로젝트 진행에 있어서 좀 더 안전할 수 있지만, 그럼에도 15 버전을 선택한 이유는 다음과 같습니다.

• Turbopack

---

---

Turbopack(베타)은 JavaScript와 TypeScript에 최적화된 점진적 번들러로, Rust로 작성되었으며 Next.js에 내장되어 있습니다. 아직 베타 버전이기 때문에 build 시에는 사용할 수 없고 dev 모드에서만 사용할 수 있지만 그럼에도 Turbopack을 사용할 수 있다는 점에서 크게 관심이 생겼습니다. Next.js 15 버전에서는 Turbopack Dev 가 안정화되었다고 발표되었습니다. Turbopack은 Rust로 작성되었기 때문에 웹팩보다 700배 빠르고, Vite보다 10배 빠르다고 알려져 있습니다. 이와 같은 이유로 Turbopack를 사용하여 개발 속도 향상을 기대하고 있습니다.

• 캐시 정책 완화

  캐시는 앱 최적화에 있어서 중요한 요소이지만 Next.js 14 버전에서의 단점 중 하나인 너무 엄격한 캐시 정책이 큰 문제로 다가왔습니다. Next.js 15 버전에서는 14 버전과 달리 fetch 요청이 기본적으로 캐시 처리되지 않도록 변경되었습니다. 또한 14 버전의 불편한 점 중 하나였던 Client Router Cache 가 15 버전부터는 기본적으로 캐시 처리되지 않도록 변경되었습니다. 이와 같은 변경점을 고려하여 15 버전을 사용하면 불필요한 캐시 처리로부터 생길 수 있는 오류 발생이 감소할 것으로 기대하고 있습니다.

참고 자료

• https://nextjs.org/
• https://nextjs-ko.org/docs
• https://nextjs.org/blog/next-15
• https://nextjs.org/blog/turbopack-for-development-stable