NextjsでCookieを設定&ロードをする

なぜライブラリを使わないといけないのか?

NextjsはSSR(サーバーサイドレンダリング)ベースなので、基本的にサーバーでHTMLを生成してからそれをブラウザに転送します。そういった使用上、cookieはもちろんwindowやdocumentオブジェクトも通常では使用できません。

Nextjsのレンダリングについて
Rendering - nextjs.org

今回使用するライブラリ

基本的な使い方

今回はTypescript版のNextjsを使います

import { setCookie } from 'cookies-next';

setCookie('key', 'value', options);

setCookieという関数でセット、getCookieで取得します。optionsはCookieの使用可能時間などを設定します。

実装方法

これだけだとエラーになってしまうのでいろいろ追加して実装してみました。

import { setCookie,getCookie } from 'cookies-next';
import { useEffect, useState } from "react";

export default function Cookie () {
    const [loginedData, setLoginedData] = useState<string>()
    useEffect(() => {
      // セット
      setCookie('key', 'value', {maxAge: 30 * 24 * 60 * 60});
      //　取得
      setLoginedData(getCookie('userids'));
  }, [])
  return (
    <>
      <p>{loginedData}</p>
    </>
  )
}

こんな感じで開発者コンソールでも見れます。

以上でーす。

まとめ

こんな感じでツールを使わないとCookieが取れないのはNextjsのデメリットの一つですね💦

あとそのほかのSNSもよろしく(宣伝)