포스트를 가져오려면 디스커스의 API 키를 어디에 입력해야 하나요?

디스코urs의 게시글을 가져오려고 하는데, API 키를 어디에 넣어야 하는지 모르겠습니다. 그래서 https://{defaultHost}/posts/{id}.json으로 fetch를 시도하고 있지만, API 키를 제공하지 않아서 오류가 발생합니다. API 키는 어디에 입력해야 하나요?

API 요청을 어떤 도구나 프로그래밍 언어로 보내고 있는지 정확히 알 수는 없지만, API 키와 사용자 이름은 HTTP 헤더에 포함해야 합니다.

아래는 Discourse REST API Documentation 에서 가져온 curl 예시입니다.

curl -X POST "http://127.0.0.1:3000/categories" \
-H "Content-Type: multipart/form-data;" \
-H "Api-Key: 714552c6148e1617aeab526d0606184b94a80ec048fc09894ff1a72b740c5f19" \
-H "Api-Username: discourse1" \
-F "name=89853c20-4409-e91a-a8ea-f6cdff96aaaa" \
-F "color=49d9e9" \
-F "text_color=f0fcfd"

저는 Next.js로 하고 있습니다. 이 코드를 어디에 넣어야 할까요?

저는 nextJS에 익숙하지 않아서 정확히 확신할 수는 없지만, nextJS가 API 요청을 위해 SWR이라는 도구를 사용하는 것 같습니다.

nextJS가 서버 사이드 프레임워크가 아닌 클라이언트 사이드 프레임워크인 것으로 보이기 때문에, 전역 API 키가 사용자에게 노출되지 않도록 클라이언트 측에 저장하는 API 키의 범위를 매우 주의 깊게 관리하고, Discourse에 어떤 API 호출을 하는지 신중하게 살펴봐야 합니다. 올바른 방법은 아마도 next.js가 서버 사이드에서 API 요청을 수행한 후, 인증된 API 호출을 Discourse 인스턴스로 보내는 방식일 것입니다.

이 답변이 도움이 될 수 있습니다:

https://stackoverflow.com/a/65863845/588458

문서(Arguments)에 따르면 다음과 같이 해야 합니다.

const fetcher = (url, token) =>
    axios
      .get(url, { headers: { Authorization: "Bearer " + token } })
      .then((res) => res.data);

const { data, error } = useSWR(
  [`http://localhost:8000/api/v1/users/get-avatar`, auth.token],
  fetcher
);
if (error) console.log(error);
if (data) console.log(data);