nextjs에서 재빌드 없이 외부 config.js 파일로 부터 config 주입 받는 방법

config 파일 작성

일단 config를 작성할 config.js 파일이 필요하다

config.js

window.config = {
    myname: "woosub"
}

이런식으로 config 작성한다

꼭 window.config 를 확장할 필요는 없으나, 이게 뭔가 표준 같아보이고 편리하다

layout.tsx 에 Script 추가

layout.tsx 의 body 태그 내부에 <Script src="/config.js" strategy="beforeInteractive" /> 를 추가한다

strategy 값	실행 타이밍	용도
beforeInteractive	Hydration 전에 실행	전역 설정, 초기 환경 변수, Polyfill
afterInteractive	Hydration 후 실행	분석 도구(GA, Facebook Pixel) 등
lazyOnload	페이지 로드 완료 후 실행	비필수 스크립트 (예: 광고 SDK)

layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className={`${notoSansKR.variable}`}>
      <body className="overflow-y-hidden h-full bg-white">
        <Script src="/config.js" strategy="beforeInteractive" />
        {children}
      </body>
    </html>
  );
}

typescript 사용 시 window.config type 확장

typescript 사용 시 그냥 window.config 를 호출하면 내가 추가한 config 들이 타입으로 안잡히니 아래와 같이 확장해줘야함

windowConfig.d.ts

export { };
 
declare global {
    interface Window {
        config: {
            myname: string
        };
    }
}

사용법

이제 내가 추가한 config 를 코드상에서 불러올 수 있다

console.log(window.config.myname);

만약 실서비스로 배포되었을때도 재빌드없이 <Script src="/config.js" strategy="beforeInteractive" /> 에 명시된 경로상의 config.js 파일을 수정하기만 하면 config 를 적용할 수 있다

CommonJs vs ES Module nextjs프로젝트를 도커로 배포하고 nginx로 서비스하는 방법