DiscourseのAPIキーはどこに配置すれば、投稿を取得できますか?

Discourse の投稿を取得しようとしていますが、API キーをどこに入力すればよいかわかりません。https://{defaultHost}/posts/{id}.json にフェッチを試みていますが、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"
「いいね!」 2

Next.jsで実装しています。どこにコードを配置すればよいですか?

Next.jsには詳しくないので、完全に確信はありませんが、Next.jsはAPIリクエストを行うためにSWRというツールを使用しているようです。

クライアントサイドに保存するAPIキーのスコープと、Discourseに対してどのAPI呼び出しを行うかについては、非常に注意する必要があります。Next.jsはサーバーサイドフレームワークではなくクライアントサイドフレームワークのように見えるため、グローバルAPIキーをユーザーに公開しないようにしてください。適切な方法はおそらく、Next.jsにサーバーサイドAPIリクエストを行わせ、それがDiscourseインスタンスに対して認証されたAPI呼び出しを行うことでしょう。

この回答がお役に立つかもしれません。

ドキュメントによると Arguments – SWR

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);
「いいね!」 1