"Next.js" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

프로젝트를 개발하다 보면 "Build Once, Deploy Anywhere" 개념을 한 번쯤은 접하게 됩니다. 한 번의 빌드로 여러 환경에 배포하거나, 환경변수만 수정해 다양한 variant로 배포하고 싶은 니즈를 표현하는 문구입니다.

하지만 Next.js는 빌드 타임에 환경변수를 결정하는 철학을 가지고 있어, 이 개념과 본질적으로 충돌합니다.

누군가는 어쩔 수 없이 Docker 이미지 하나로 여러 환경에 배포해야 하는 상황에 마주할 수 있습니다

이 글에서는 그런 분들을 위해 Next.js app router에서 런타임 환경변수를 사용하기 위한 다양한 방법을 살펴봅니다.

Next.js App Router로 전환하면서 가장 혼란스러운 부분은 렌더링 방식의 변화입니다.

Page Router에서 SSR/SSG 기반 렌더링을 사용했다면, App Router에서는 RSC+Client Component 기반 렌더링을 사용하도록 변경되었습니다.

이 글에서는 두 방식의 동작 원리를 비교하고, App Router는 Page Router의 개선 버전이 아닌 서로 다른 패러다임을 가진 Next.js의 렌더링 방식임을 설명하려고 합니다.