문장 수정 및 표현 개선

Author: echoja

src/app/article/2025-07/nextjs-inject-env/page.mdx

@@ -61,7 +61,7 @@ export const metadata = getArticleMetadata(item);
 
 각각은 끼워넣기로 어지간해선 해결이 될 것 같고, 피쳐플래그 같은 경우 다시 빌드하는 것보다 환경변수 바꿔서 재시작하는 게 훨씬 운영에 부담이 없을 것 같아요.
 
-SSG 페이지는 빌드 시점에 뭔가 결정하려고 한다는 뜻이기 때문에 `NEXT_PUBLIC_` 함수를 적극적으로 쓰는게 어색하지 않습니다. 그리고 빠른 페이지 로딩 등의 이득을 보기 위한 거라 목적도 뚜렷합니다. 런타임 때 행동을 다양하게 바꾸겠다라는 목적과 모순됩니다. 서버를 시작할 때 생성되는 정적 페이지(일종의 ISR)를 상상해볼 수도 있겠지만, 그것도 너무 특이한 케이스일 거 같아서 이 글에서는 다루지 않겠습니다.
+SSG 페이지는 빌드 시점에 뭔가 결정하려고 한다는 뜻이기 때문에 `NEXT_PUBLIC_` 함수를 적극적으로 쓰는게 어색하지 않습니다. 그리고 빠른 페이지 로딩 등의 이득을 보기 위한 거라 목적도 뚜렷합니다. 런타임 때 행동을 다양하게 바꾸겠다라는 목적과 모순됩니다. 서버를 시작할 때 생성되는 정적 페이지(일종의 ISR)를 상상해볼 수도 있겠지만, 음, 그건 좀 특이한 케이스일 거 같아서 이 글에서는 다루지 않겠습니다.
 
 끼워넣기를 했다 칩시다. 그런데 SSR에서도 지원되어야 하지 않냐고요? 래핑 함수를 만들면 되지 않을까요?
 
@@ -79,7 +79,7 @@ export const getAPIEndpoint = () =>
 우선 소스코드. https://github.com/echoja/inject-env-nextjs-pages-router
 실습에서는 `API_ENDPOINT` 환경변수를 다르게 넣어주는 걸로 하겠습니다.
 
-`_document.tsx` 파일에서 환경변수를 넣어줍시다. [문서에 따르면 이 파일은 서버에서만 렌더링](https://nextjs.org/docs/pages/building-your-application/routing/custom-document)된다고 합니다. 하지만, 즉 `process.env`에 접근할 수 있다는 이야기지요. `script` 태그에 `dangerouslySetInnerHTML`로 직접 넣어주면 될 것 같지만 빌드 타임에 대체되는 것처럼 보이더라구요. 그래서 `env.js`라는 파일을 서버 시작 시점에 만들어서 `public` 폴더에 넣도록 하겠습니다.
+`_document.tsx` 파일에서 환경변수를 넣어줍시다. [문서에 따르면 이 파일은 서버에서만 렌더링](https://nextjs.org/docs/pages/building-your-application/routing/custom-document)된다고 합니다. 즉 `process.env`에만 접근할 수 있다는 이야기지요. `script` 태그에 `dangerouslySetInnerHTML`로 직접 넣어주면 될 것 같지만 빌드 타임에 치환되는 것 같더라구요. 그래서 **`env.js`라는 파일을 서버 시작 시점에 만들어서 `public` 폴더에 넣도록 하겠습니다.**
 
 일단 `env.js` 파일을 즉시 가져올 수 있도록 `_document.tsx` 파일을 수정해줍니다.
 
@@ -102,7 +102,7 @@ export default function Document() {
 }
 ```
 
-`env.js` 파일은 다른 파일보다 먼저 로딩되어야 하므로 `async`나 `defer`를 붙여주지 않습니다.
+`env.js` 파일은 다른 파일보다 먼저 로딩되어야 하므로 **`async`나 `defer`를 붙여주지 않습니다.**
 
 이제 Next.js 앱이 시작할 때 `env.js` 파일이 생성될 수 있도록 코드를 짜줍니다. `next.config.ts` 파일을 수정해줍니다.
 
@@ -285,19 +285,19 @@ window.API_ENDPOINT = "${process.env.API_ENDPOINT}";`,
 </Head>
 ```
 
-처음에는 위처럼 직접 `script`와 `dangerouslySetInnerHTML`를 이용하여 환경변수를 넣어줬지만 빌드 시점 환경변수로 고정되어서 영영 사용할 수 없었습니다. Static Site Generation 페이지인지 아닌지 판단하는 기준을 정확히 알 순 없지만, 일단 SSG로 빌드됐다면 그 페이지는 실행 시점에 변경할 수 없으므로 환경변수로 제어할 수 없습니다.
+처음에는 위처럼 직접 `script`와 `dangerouslySetInnerHTML`를 이용하여 환경변수를 넣어줬지만 빌드 시점 환경변수로 고정되어서 영영 사용할 수 없었습니다. Static Site Generation 페이지인지 아닌지 판단하는 기준을 정확히 알 순 없지만, 일단 SSG로 빌드됐다면 그 페이지는 실행 시점에 변경할 수 없으므로 환경변수로도 제어할 수 없습니다.
 
 ## 한계
 
-Next.js 가 추천하는 패턴도 아니고 빌드의 상세한 과정이나 로직이 문서에 명시되어 있는 것도 아니라서 좀 불안합니다. 우리가 임의로 삽입한 스크립트가 Next.js 내부 빌드 로직 변화에 의해 언제든지 영향받을 수 있습니다.
+`env.js`를 삽입하는 방식은 Next.js 가 언급하는 패턴도 아니고, 저런 단순무식한 `script` 태그 삽입과 관련하여 `next build`의 상세한 과정이나 로직이 문서에 명시되어 있는 것도 아니라서 좀 불안합니다. 우리가 임의로 삽입한 스크립트가 Next.js 내부 빌드 로직 변화에 의해 언제든지 영향받을 수 있습니다.
 
 조금 더 검증된 방법이 필요하다면 [next-runtime-env](https://www.npmjs.com/package/next-runtime-env) 라이브러리를 뜯어보시는 것도 좋을 것 같아요. 저도 여기 소스코드를 크게 참조하여 이 글의 아이디어를 얻었습니다. 어떻게 동작하는지 유심히 살펴보시려면 [next-runtime-env 원리 파헤치기(by 개발자 류준열)](https://www.wnsdufdl.com/post/eCulLQxzTrSoL7asxyqUNA) 글도 참조해주시면 좋습니다.
 
 Next.js가 공식적으로 추천하는 방법은 [getServerSideProps](https://nextjs.org/docs/pages/guides/environment-variables#runtime-environment-variables)를 쓰거나 App Router의 서버 컴포넌트로 하라 하네요. 그렇게 해서 해결할 수 있다면 굿.
 
 ## 번외
 
-`env.js` 파일을 생성할 때 [instrumentation.ts 파일](https://nextjs.org/docs/pages/guides/instrumentation)([App Router](https://nextjs.org/docs/app/guides/instrumentation))을 사용하면 좋을 수도 있겠습니다. 한번 시도 해주세요...
+`env.js` 파일을 생성할 때 [instrumentation.ts 파일](https://nextjs.org/docs/pages/guides/instrumentation)([App Router](https://nextjs.org/docs/app/guides/instrumentation))을 사용할 수도 있겠습니다. 저는 에너지가 다했으니 여러분이 한번 시도 해주세요...
 
 ## 레퍼런스