Next.js 클라이언트 컴포넌트에서 api 요청 시 보안 문제?

Question

Next.js에서 클라이언트 컴포넌트에 사용하는 환경 변수에 NEXT_PUBLIC을 붙여줘야하는 것으로 압니다.

제가 프로젝트에서 api 키를 포함해 클라이언트 컴포넌트에서 fetch 요청을 보내야하는 상황이라(리액트 쿼리 사용 중), 해당 api키에 위와 같은 변수를 붙여주었습니다. 그런데 해당 방법이 안전한걸까요? 전에 chatGPT에서는 NEXT_PUBLIC을 붙이는 환경 변수에는 api 키와 같은 보안에 중요한 변수는 넣지 않는게 좋다고 하더라고요.... 이 말이 사실인건가요? 그렇다면 그 이유가 궁금합니다..

+ Next.js에서 리액트 쿼리를 사용하고 있는데 리액트 쿼리를 사용하는 곳은 클라이언트 컴포넌트여야 정상적으로 작동하더라고요.. 만약 api 키가 포함된 요청을 클라이언트 컴포넌트에서 사용하는 것이 보안에 좋지 않다면, 어떤 방법을 써서 api 요청을 보내야할까요? Next.js의 api 라우트를 만들어 요청하는게 맞는건가요?

개발에 대해 잘 몰라 질문이 깔끔하지 않습니다만.. 혹시 아는 분 계시면 도와주세요 😭❕

포크코딩 · Answer

클라이언트 컴포넌트는 사용자(브라우저)에 직접 노출됩니다. 사람의 실수로 중요한 정보가 노출될 가능성이 있으므로 권장하지 않는겁니다.

Nextjs 버전 14(app router)에서 권장하는 방식은 다음과 같습니다. 데이터 패칭(GET)은 서버 컴포넌트에서 async, await를 통해 진행하세요. 그 외 요청(POST, PUT, DELETE 등)은 API 라우트를 사용하시면 좋습니다.

짹 · Answer

NEXT_PUBLIC 으로 절대 외부 api key나 api secret을 정의하시면 안됩니다.

api router로 한 번 proxy를 만들어주세요.
Client => Api Router => 외부 API

Api Router에서는 process.env로 환경변수 접근이 가능합니다.