네트워크창에서 API Key를 감추고 싶습니다.

헉 벌써 Next.js로 사이드 프로젝트를 하셨다니...! 잘 들어주셔서 감사합니다.

작성해주신 상황만으로 정확히 어떤 상황인지는 모르겠지만, API를 호출할 때 parameter로 넘어가는 key값을 노출하고 싶지 않다는 질문으로 해석하고 답변드리겠습니다.

key값을 감추기위해서는 API Routes를 사용해야합니다. 제가 사이드 프로젝트를 할 때 사용한 방식을 아래에 설명해보겠습니다.

1. 말씀하신대로 rewrites를 사용하여 config를 수정해줍니다.

async rewrites() {
    return [
      {
        destination: 'https://naveropenapi.apigw.ntruss.com/:path*',
        source: '/test/:path*',
      },
    ];
  },

이 때, 뒤에 나오는 경로가 복잡하기 때문에 wildcard(*)를 사용했습니다. (공식 문서: https://nextjs.org/docs/api-reference/next.config.js/rewrites#wildcard-path-matching)

2. API Routes 안에 key를 숨깁니다.(불필요한 부분은 '...' 처리하였습니다.)
(경로: pages/api/map-direction)

export default async function handler(req, res) {
  ...
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_URL}/test/map-direction/v1/...`,     {
        headers: {
          'X-NCP-APIGW-API-KEY-ID': process.env.NEXT_NCP_CLIENT_ID,
          'X-NCP-APIGW-API-KEY': process.env.NEXT_NCP_CLIENT_SECRET,
        },
      },
    );
  ...
  res.status(200).json({ ... });
}

ncp secret key값을 API Routes안에 넣음으로써 사용자에게 key값을 보여주지 않게됩니다.

3. 이렇게 생성한 API를 클라이언트 코드에서 호출하면 됩니다.
(경로: pages/index)

const response = await fetch(`/api/map-direction...`);

아마 비슷한 과정을 거치셨을 것 같은데, rewrites의 source와 destination이 잘못 되어있을 확률이 높습니다.
1번의 wildcard(*)을 넣어 보거나 다른 문자열로 다시 시도해보시면 좋을 것 같습니다.
그래도 안되면 다시 질문 부탁드립니다. 감사합니다 :)