[Next.js] 환경변수 타입 지정 및 자동완성(.env)

참고: https://jforj.tistory.com/259

 

1. .env 파일에 사용할 변수 입력

COOKIE_NAME= carrot_market
COOKIE_PASSWORD = carrot_password

 

2. next.config.js 파일에 변수들에 대해 입력 ( 자동완성 )

/** @type {import('next').NextConfig} */

module.exports = {
    reactStrictMode: true,
    env: {
        COOKIE_NAME: 'carrot_market',
        COOKIE_PASSWORD: 'carrot_password',
    },
};

 3. env 타입 지정

• root 경로에 @types 폴더 생성 후 그 안에 import-env.d.ts 파일 생성

• import-env.d.ts 파일에 .env 등록했던 변수들에 대해 타입을 지정

declare namespace NodeJS {
    interface ProcessEnv {
        COOKIE_NAME: string;
        COOKIE_PASSWORD: string;
    }
}

 

cf) 나는 이름과 암호에 대해서도 env 파일에 등록한뒤 next.config.js에서 사용함. 잘되더라(깃에 config 파일을 올리고 싶었는데 암호랑 이름은 감추고 싶어서)

/** @type {import('next').NextConfig} */
module.exports = {
    reactStrictMode: true,
    env: {
        COOKIE_NAME: process.env.NEXT_CONFIG_COOKIE_NAME,
        COOKIE_PASSWORD: process.env.NEXT_CONFIG_COOKIE_PASSWORD,
    },
};