Next.js API Key 보관

카테고리 없음

Chan Dev 2024. 8. 1. 18:00

Api key 는 너무나도 중요하기 때문에
다른 누군가가 사용하지 않게 해야 합니다.

Next.js 로 개발을 하다가 특정 api key 를 가져와야 하는 경우가 생겨서 공부하면서 정리해 보았습니다.

설명

보통 개발을 하면서 자신의 Github 에 프로젝트를 올리고 관리할 것입니다.

개발을 하다보면 피치못하게 다른 개발자의 API 나 공공하게 사용하는 API 를 사용해야하는 경험을 하셨을 것입니다.

이때 대부분 API key 를 이용해서 API 를 불러옵니다.

API 에 따라 다르지만, 대부분 API 인증키가 본인 이외의 외부에 보여지는 것은 좋지 않습니다.

그래서 Next.js 는 .env.local 이라는 파일을 지원해 줍니다.

Next.js 에서 어떻게 .env.local 이라는 파일로 api key 를 보호 할 수 있을까요??

우선 루트 디렉토리에 .env.local 이라는 파일 명을 생성해 줍니다.

이렇게 설정을 해준 뒤에 내가 설정하고 싶은 api key 를 등록해 주면 됩니다.

여기서 주의해야 할 점은 api key 이름은 모두 대문자로 사용하는 것이 규칙입니다.

이렇게 설정을 하면 어떻게 불러오면 될까요??

이렇게 다양한 곳에서 그냥 불러와 주면 됩니다.

불러와 줄때는 process.env.내가 정해준 이름 으로 불러와 주면 됩니다.

만약 브라우저에 나타내기 위해 <p> {myAPIKey} </p> 라고 출력을 하면 어떻게 될까요??

정답은 "나오지 않는다" 입니다. 솔직히 여러분도 아시다시피 당연한 결과입니다. 나의 API key 는 당연히 보호받아야 하기 때문에

브라우저에서 나타나지 않는 것입니다.

그럼에도 불구하고 꼭 브라우저에 나타내야 하는 경우는 어떻게 해야 할까요??

이 변수를 브라우저에서도 사용하고 싶다면 변수명 앞에 NEXT_PUBLIC_을 붙여줘야 합니다.

이렇게 설정을 하고 아래 코드처럼 나타내면 브라우저에서 console 이 찍히는 모습을 보실 수 있습니다.

.gitignore 올리기

가장 중요한 점은 .gitignore 을 이용해서 Github 에 올라가지 않게 하는 것입니다.

이렇게까지 설정을 하시면 마음 놓고 API Key 를 여기저기서 사용할 수 있습니다.