브라우저에서 환경 변수 사용하기 In Next.js(publicRuntimeConfig)

sol·2023년 11월 28일
0

const config = require('config');
const Config = config.get('CONFIG');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});

/* @type {import('next').NextConfig} /
module.exports = withBundleAnalyzer({
swcMinify: true,
reactStrictMode: false,
output: 'standalone',
publicRuntimeConfig: {
Config,
},
productionBrowserSourceMaps: true,
});

안녕하세요 younhee님.

저희가 만드는 서비스는 next.js를 가지고 동작하죠.

이걸 서버에서 node.js를 가지고 실행을 한 뒤 브라우저로 해당 서버에 요청을 보내면 next.js에서 html, js, css 등을 전달하여 브라우저를 통해서 최종 렌더링 되는거에요.

그럼 node.js를 동작시키는 서버 내 환경에 여러가지 변수가 지정되어있을 수 있습니다. .env는 이 서버에서 사요하는 환경 변수를 별도의 동작없이 로컬환경에서 쓰기 위해서 사용하는 파일입니다.

다시 말해 .env는 순수하게 서버에서만 확인할 수 있는 환경변수이고, 사용자가 화면을 만나는 브라우저 단에는 아무런 변수가 존재하지 않겠죠.

그렇지만 브라우저에서도 우리가 어떤 동작을 할 때 환경변수 등을 써야할 일이 있으니까 외부(클라이언트)에 노출되어도 문제 없는 변수를 next_public을 통해서 제공할 수 있도록 next.js가 기능을 제공합니다.

다시 요약하면 next_public은 next.js가 브라우저나 node.js 환경 모두에서 쓸 수 있도록 변수를 전달해주는거구요. .env

profile
절겁게개발하자

0개의 댓글