Next.jsでログイン状態を管理したい

Question

実現したいこと

Next.jsでページをリロードしても、ログイン中のユーザーを表示したい。

前提

バックエンド側のAPIからユーザーを取得して、フロント側でcookieに保存し、ユーザーのログインまでは完了したのですが、現在ログイン中のユーザーをuseStateを使って管理すると初期画面では無事表示されるのですが、
ページをリロードするとuseStateがリセットされるせいなのかログインユーザーが表示されません。

試したこと

cookieを使ってログインの管理をしようと思ったのですが、自分の知識不足のため、やはりuseStateを使用した管理方法しか思いつきません。

他の管理方法、またはuseStateを使用してもページ再読み込み時にリセットされない方法がありましたら教えていただけると助かります。

分かりづらい説明ではありましたが、ご回答お願いします。

補足情報（FW/ツールのバージョンなど）

Next.js v13 (App Router)
js-cookie

Answer 1

まずuseStateについては確認された通り、リロード時に状態がリセットされる挙動で正しいです。(一先ず後述の内容を全て確認した後で、改めて検討しましょう。)

https://ja.react.dev/reference/react/useState

※引用: useStateはフックであるため、コンポーネントのトップレベルまたはカスタムフック内でのみ呼び出すことができます。

---

次に前提の確認ですが、API側でDBを用いてユーザーを登録・取得しているという認識で合っていますか？

念の為APIデータ取得〜表示までの流れをまとめます。

1. APIエンドポイントの作成: apiディレクトリ内にファイルを作成し、そこでDBからデータを取得するためのAPIエンドポイントを設定する。
2. クライアント側でのAPI呼び出し: AxiosなどのHTTPクライアントライブラリを使用して、作成したAPIを叩きデータを画面に呼び出す。
3. 必要に応じてuseStateで状態管理

もし上記1ができているのであれば、クライアント側でAPIを叩いてください。

※axiosサンプル

import axios from 'axios';

const fetchUser = async () => {
  try {
    const response = await axios.get('APIのURL');
    console.log(response.data); 
  } catch (error) {
    console.error(error);
  }
};

fetchUser();