Next.jsのgetStaticPropsではnookiesによってcookieのデータを取得できなくて困った話

結論

getStaticPropsではなくgetServerSidePropsを利用してcookieのデータを取得した。
（SSGでcookieデータを取得しようと調べすぎたので、SSRで時間をかけずに実装する方が良いと感じた。）

nookiesとは？

• cookieデータをクライアントで取得することが可能なJsライブラリ

コンポーネントの中でcookieの取り出し操作が簡単に行える。

なぜgetStaticPropsだと取得できないのかを考える

今回やりたかったこと

getStaticPropsでcookie情報を取得したい

• 記事を探すものの・・・
  • getStaticPropsで取得する記事やドキュメントに情報がなかった。😭

あるのはSSR、getServerSidePropsでの取得の方法のみ。

SSGで変更したかったがなくなくSSRでの実装となった。
(SSGで統一したかったという個人的な意志が崩されただけ)

import { parseCookies } from "nookies";

// nookiesによりcookieからデータを取得するメソッド
const getCookie = (context?: any) => {
  const cookie = parseCookies(context);
  return cookie.userId;
};
export default getCookie;


// SSRでフォロワーリストを取得
export const getServerSideProps: GetServerSideProps = async (context) => {
  // cookieに存在するユーザーIDを取得
  const userId = Number(getCookie(context));

  //　ユーザーIDをもとにフォロワーリストを取得
  const followerList = await fetchFollowerList(userId);

  return {
    props: {
        followerList: followerList,
    },
  };
};

なぜSSGでcookieの取得ができないのか

Next.jsの公式を見ると

export async function getStaticProps(context) {
  return {
    props: {} // ページコンポーネントにpropsとして渡されます。
  };
}

getStaticProps（静的生成）
ページから getStaticProps という async 関数をエクスポートすると、Next.js はビルド時に getStaticProps から返される props を使ってプリレンダリングします。

contextパラメータは次のキーを含むオブジェクトです:
paramsはページが動的ルートを利用するためのルートパラメータを持ちます。たとえば、ページ名が [id].js である時、paramsは { id: ...} のように見えます。詳細は 動的ルーティングのドキュメントをご覧ください。後に説明する getStaticPathsと一緒に使う必要があります。

つまり、引数として渡ってくるcontextの中身はparamsというルートパラメーターしか存在しない
だから、リクエストの中にcookieは含まれないという個人的に衝撃の事実(解釈が違っていたらすみません)がわかった。

---

一方、getServerSidePropsは・・・

export async function getServerSideProps(context) {
  return {
    props: {} // ページコンポーネントにpropsとして渡されます。
  };
}

getServerSidePropsという async 関数をエクスポートすると Next.js はリクエストごとに getServerSideProps から返されるデータでプリレンダリングします。

contextパラメータは以下のキーを含むオブジェクトです。

params: ページが動的ルートを使えば、paramsはルートパラメータを含みます。ページ名が [id].js であれば、paramsは { id: ... } のようになります。詳細は動的ルーティングのドキュメントをご覧ください。

req: HTTPインカミングメッセージオブジェクト。

res: HTTPレスポンスオブジェクト。

query: クエリストリング。

preview: previewはページがプレビューモードであれば true 、そうでなければ false になります。プレビューモードのドキュメントをご覧ください。

previewData: プレビューデータは setPreviewData によって設定されます。プレビューモードのドキュメントをご覧ください。

contextにリクエストが送られるため,cookieの情報も送られていることがわかる。
そのため、SSRの記述の中でnookieを取得することが可能になる理由がここにあった。

個人的には名探偵コナンくんなみのひらめきを発揮したので満足。

---

まとめ

SSGではCookieの情報が取得できない理由はgetStaticPropsが受け取る引数としてそもそもヘッダー情報が存在しないから。
Nextjsを用いたサーバーサイドでcookieを取得したければSSRの取得の仕方を取れば良い。

この記事を書いていて、いま気がついたが、SSRはリクエストを送るのだから方法はサーバー側でcookieを取得するのであればSSRしかない。

思わぬところで躓いたが、SSGとSSRの理解が深まったので良い経験となった。

まだまだ学習中のため、至らないや異なる情報を記載していた場合はご連絡をいただけると助かります。