Next.js v13のサーバーコンポーネント内でCookie取得

はじめに

お疲れ様です。
@いけふくろうです。

• Next.js v13の思想としては、サーバーコンポーネントの利用が推奨されていると読み取れる
• そのため、ページ訪問時にSSRでバックエンドのAPIをコールするケースがあり、認証必須のAPIは、HTTPヘッダーのAuthorizationにトークンを付与したり、HTTP OnlyのCookieを送信することが必要となる

概要

• サーバーコンポーネント内でfetchを活用して、APIをコールする
• Cookieの情報を取得する

環境

• React v18.2.0
• Next v13.2.1

実装内容

• 上述の通り、サーバーサイドでAPIをコールするため、Cookie情報を送信するために必要となるcredentials: "include"をリクエストの設定として付与してもCookieは送信されない
• 公式のβ版ドキュメントに記載があり、そちらをベースに以下のようなユーティリティ関数を作るようにもした

import { cookies } from "next/headers";

export const getAllCookies = (): string => {
  const cookieStore = cookies();
  const cookie = cookieStore
    .getAll()
    .map((cookie) => `${cookie.name}=${cookie.value}`)
    .join(";");
  return cookie;
};

• next/headersのcookiesを使用して全て取得する
  • 取得例： ga=GAxxxxxx;accessToken=xxxxxxxxxxxxxxxxxxxxxxx;

import { getAllCookies } from "@/utils/getCookie";

const getSystemOverView = async (): Promise<{ [key: string]: string }> => {
  const cookie = getAllCookies();
  const options: RequestInit = {
    headers: {
      cookie,
    },
    cache: "no-store",
  };
  const data = await fetch(
    "http://localhost:8080/api/v1/admin/system-overview",
    options,
  );
  return await data.json();
};

const ExamplePage = async () => {
  const systemOverViewData = await getSystemOverView();
  return (
    <>
      <h2>サンプルページ</h2>
    </>
  );
};

export default ExamplePage;

• getSystemOverView内で、Cookie情報取得のメソッドを呼び出して、cookieを付与している
• 本記事の例としては、cache: "no-store"は、キャッシュを使用しないように指定している（※業務仕様によって決める必要あり）

以上です。
本記事が何かの一助になれば幸いです。