리액트 대신 넥스트JS를 선택한 이유: 현대 웹 개발의 새로운 표준

웹 개발 생태계에서 React는 오랫동안 가장 사랑받는 도구였습니다. 저 역시 오랫동안 React를 사용해왔고, 그 유연함과 강력한 컴포넌트 생태계에 매료되어 있었습니다. 하지만 프로젝트의 규모가 커지고, 특히 사용자의 유입을 위한 검색 엔진 최적화(SEO)와 초기 로딩 속도가 중요해지면서 기존 React(CSR) 방식의 한계를 느끼기 시작했습니다.

오늘은 제가 왜 순수 React가 아닌 Next.js를 선택했는지, 그리고 이 선택이 프로젝트에 어떤 실질적인 변화를 가져왔는지에 대해 자세히 이야기해보려 합니다.

1. 검색 엔진 최적화(SEO)와 렌더링 방식의 혁명

가장 결정적인 이유는 SEO였습니다. React는 기본적으로 Client-Side Rendering(CSR) 방식을 따릅니다. 이는 브라우저가 빈 HTML을 먼저 받고 자바스크립트를 실행하여 화면을 그리는 방식입니다. 하지만 대부분의 검색 엔진 봇이나 SNS 공유 시의 크롤러들은 실행된 자바스크립트 결과를 완벽하게 기다려주지 않습니다.

Next.js는 Server-Side Rendering(SSR)과 Static Site Generation(SSG)을 기본으로 제공합니다.

• SSR: 요청이 올 때마다 서버에서 HTML을 미리 렌더링하여 전달합니다.
• SSG: 빌드 타임에 미리 페이지를 생성해두어 응답 속도를 극대화합니다.

이 덕분에 사이트에 접속하자마자 완성된 콘텐츠를 볼 수 있고, 검색 엔진은 우리 사이트의 데이터를 훨씬 더 정확하고 빠르게 수집할 수 있게 되었습니다. hafuture와 같은 도구 모음 서비스에게 노출은 생명과도 같기에, 이는 대체 불가능한 장점이었습니다.

2. 파일 시스템 기반의 직관적인 라우팅

React를 사용할 때는 react-router-dom과 같은 외부 라이브러리를 설치하고, 복잡한 Route 구조를 직접 코드로 작성해야 했습니다. 프로젝트가 커질수록 라우팅 설정 파일은 비대해졌고 유지보수가 어려워졌습니다.

Next.js는 app 디렉토리 기반의 파일 시스템 라우팅을 제공합니다. 폴더 구조가 곧 URL 구조가 되며, 이는 개발자에게 매우 직관적인 경험을 제공합니다.

• app/about/page.tsx -> /about
• app/[locale]/layout.tsx -> 다국어 지원 레이아웃

이러한 규격화된 방식은 협업 시에도 코드의 위치를 찾기 쉽게 만들어주며, 개발 생산성을 비약적으로 향상시켰습니다.

3. 성능 최적화의 기본 내장 (Zero Setup)

웹 성능은 사용자 이탈률과 직결됩니다. Next.js는 개발자가 일일이 신경 써야 했던 최적화 작업들을 프레임워크 차원에서 대신해줍니다.

1. 이미지 최적화 (next/image): 이미지의 크기를 자동으로 조절하고 WebP와 같은 최신 포맷으로 변환하며, 지연 로딩(Lazy Loading)을 지원합니다.
2. 폰트 및 스크립트 최적화: 레이아웃 시프트(Layout Shift)를 방지하는 폰트 로딩 방식과 효율적인 외부 스크립트 로드 방식을 제공합니다.
3. 자동 코드 분할 (Code Splitting): 각 페이지에 필요한 자바스크립트만 로드되도록 자동으로 쪼개주어, 사이트 전체의 가벼움을 유지합니다.

이러한 기능들은 제가 별도의 설정을 하지 않아도 기본으로 적용되므로, 저는 서비스의 본질적인 로직에만 더 집중할 수 있었습니다.

4. 풀스택 개발의 가능성

Next.js는 단순한 프론트엔드 프레임워크가 아닙니다. Route Handlers를 통해 API 엔드포인트를 매우 쉽게 만들 수 있습니다. 별도의 Express 서버를 구축하지 않고도 폼 제출 처리, 데이터베이스 연동, 외부 API 호출 등을 안전하게 처리할 수 있습니다.

특히 Middleware 기능은 사용자 인증이나 다국어 리다이렉션 처리에 있어 강력한 위력을 발휘합니다. hafuture가 한국어, 영어, 일본어를 매끄럽게 지원할 수 있는 것도 Next.js의 Middleware 덕분입니다.

5. 뛰어난 DX(Developer Experience)와 에코시스템

Vercel과의 연동은 배포 및 호스팅 경험을 완전히 신세계로 바꾸어 놓았습니다. git push 한 번으로 전 세계 엣지 네트워크에 사이트가 배포되고, 미리보기 배포(Preview Deployment)를 통해 팀원들과 즉각적인 피드백을 주고받을 수 있습니다.

또한, 강력한 커뮤니티와 공식 문서의 퀄리티는 문제가 발생했을 때 해결 속도를 높여줍니다. Next.js는 이제 단순한 유행을 넘어 웹 개발의 표준이 되었고, 이는 수많은 라이브러리와 예제들이 Next.js를 우선적으로 지원한다는 것을 의미합니다.

결론: 사용자가 먼저 느끼는 차이

기술을 선택할 때 가장 중요한 기준은 "사용자에게 어떤 가치를 줄 수 있는가"입니다. Next.js를 선택함으로써 사용자는 더 빠른 사이트 속도를 경험하게 되었고, 저는 더 견고하고 확장이 용이한 코드를 작성할 수 있게 되었습니다.

순수 React가 주는 자유로움도 좋지만, 실제 서비스를 운영하고 비즈니스를 성장시키기에는 Next.js가 제공하는 '가이드라인'과 '최적화'가 훨씬 더 강력한 무기가 된다는 것을 깨달았습니다. 미래를 생각한다면, Next.js는 선택이 아닌 필수라고 생각합니다.

감사합니다.