개발자
류준열

next

Next.js에서 런타임에 환경변수를 설정 할 수 있게 하는 법

Node.js가 없는 고객사 PC에서 환경변수를 수정하려면 본사인원에게 빌드를 요청하고 파일을 메일로 주고받는 번거로움이 있었다. 하지만 런타임에서 환경변수를 설정 할 수 있게 되면, docker-compose만 수정하면 되므로 빌드 없이 어떤 환경에서든 즉시 배포가 가능해진다.

Next 환경변수의 비밀: 빌드타임 환경변수

Next.js에서의 환경변수는 빌드타임에 등록된다. 쿠버네티스에서 환경변수는 컨테이너 이미지가 빌드된 후 런타임에 주입된다. 그래서 쿠버네티스+Next.js 조합에서는 둘중에 하나를 변경해주어야 한다.

prefetchQuery 이용해서 로딩제거

prefetchQuery를 이용해서 서버 컴포넌트에서 데이터를 캐싱하고 클라이언트 컴포넌트에서는 캐시에서 데이터를 가져옴으로 로딩을 제거 할 수 있다.

next.js에 다국어 기능 넣기

useTraslation 훅을 통해 언어를 관리하는 경우 새로고침이나 링크 공유시에 언어가 초기화 되는 이슈가 있었다. 페이지 구조를 엎어야 했다.

블로그 제작기

티스토리에서 블로그를 운영하고 있지만 프론트엔드 개발자가 쌩으로 만든 블로그 하나는 갖고 있어야 하는것 아닌가? 하는 생각에 블로그를 만들게 되었다.

use client 컴포넌트 네트워크탭에서 확인

Next App router에서 use client가 CSR을 뜻하지는 않는다.

분명히 서버컴포넌트로 렌더링되는건 아닌데,, use client를 사용하면 CSR로 된다는 뜻이 아닌가? 하고 공식문서를 보았다. 공식문서에서 클라이언트 컴포넌트 (use client) 가 어떻게 렌더링 되는지 잘 작성되어 있다.