[Next.js] 미들웨어, 환경변수 정리중...

버전

• Next.js : 14.0.3

참고문서

• https://nextjs.org/docs/app/building-your-application/deploying#environment-variables
• https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#runtime-environment-variables
• https://nextjs.org/docs/app/api-reference/functions/use-router

Middleware (미들웨어)

미들웨어는 모든 request와 asset 이전에 실행된다.
-> 짧은 지연시간을 보장한다.

환경변수

Next.js에서 정의한 환경변수는 기본적으로 Node.js 환경에서만 사용할 수 있다.

하지만 브라우저 단에서도 접근 가능한 환경변수를 만들고 싶을 때, 변수 앞에 prefix로 NEXT_PUBLIC_을 붙여줄 경우 런타임 환경에서도 환경변수를 읽을 수 있다.

// .env
MY_ENV=something
NEXT_PUBLIC_MY_ENV=something

⚠️ 주의사항

env는 빌드 시 (next build) 참조되기 때문에 런타임에서 동적으로 환경변수를 불러올 수는 없다.
예를 들어, 다음 경우에는 환경변수를 참조할 수 없다.

// This will NOT be inlined, because it uses a variable
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])
 
// This will NOT be inlined, because it uses a variable
const env = process.env
setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)