[REACT] [nextjs] process.env.PUBLIC_URL가 undefined

react 페이지 코드

<img src={`${process.env.PUBLIC_URL}/header/img-left-ad.jpg`} alt="광고이미지"						/>

이슈 process.env.PUBLIC_URL가 undefined로 뜰때

해결

.env 파일에서 PUBLIC_URL앞에 접두사 REACT_APP을 붙여서 넣어 준다.

📄 .env

REACT_APP_PUBLIC_URL=http://localhost:3002

.env 파일에서 REACT_APP_을 붙이는 경우는 React의 환경 변수로 설정되며, process.env.REACTAPP 접두사를 통해 클라이언트 측 코드에서 접근할 수 있습니다.

.env 파일에서 REACT_APP_을 붙이지 않는 경우 이러한 변수들은 주로 서버 측 또는 빌드 환경에서 사용됩니다. 클라이언트 측에서 직접적으로 액세스할 수는 없지만, 서버 측 또는 빌드 스크립트에서 사용될 수 있습니다.

클라이언트 측에서 이 환경 변수에 접근하려면 next.config.js 파일에서 선언해야 합니다.

📄 next.config.js

This way:
module.exports = {
  reactStrictMode: true,
  env: {
    REACT_APP_PUBLIC_URL: process.env.REACT_APP_PUBLIC_URL,
  }
}

변경된 내용이 반영될 수 있도록 ctrl + c로 서버를 껏다 켜주는 것을 잊지 말자!