Next.js

Next.js : ログイン済みユーザの取得をcustom hooksで実装した

どうも、シローです。

アプリケーションではユーザの認証機能が必要になることが多いです。

認証にはサーバサイドとフロントサイドのそれぞれの担当があり、主にフロントサイドでは

認証済みのユーザを取得したり、

ユーザが取得できたかどうかで、ページへのアクセスを制限したり、表示を切り替える制御を行う

といったことが必要になります。

そこで今回はユーザ情報の取得や状態の管理方法としてcustom hooksを用いた例を紹介します。

custom hooksとは

Next.jsではコンポーネント内で

動的に変化する値の格納と変更を可能にするuseStateや

ある値が変更されたら特定の処理を行うuseEffectなどを用いることで

ユーザの操作やアプリケーションの状態に応じた画面を描画することが可能になります。

ただ、一つのコンポーネントには

DOMを出力する部分と

描画に用いるデータの管理やサーバとの通信といったロジック部分

が混在していることが多く、ソースコードを長くして可読性が悪くなるのに繋がります。

そこで便利になるのが、ロジック部分を別のファイルに切り出すことを可能にするcustom hooks(https://reactjs.org/docs/hooks-custom.html)です。

ユーザ取得部分をcustom hooksで実装

実際にユーザの取得部分をcustom hooksで実装した例を載せます。

全ページでユーザがログインしているかどうかを確認する必要があると思ったので、レイアウトのコンポーネントでcustom hooksを使うようにしています。

レイアウト部分

useGetMeがcustom hooksを使用している部分になります。

userにログイン済みユーザ情報、loadingにユーザ取得のAPIを実行中かどうかの状態を保持しています。

custom hooksを呼び出している時点で、hook内部ではユーザ情報の取得が実行されているので、コンポーネント内でAPIの実行を叩く必要はありません。

custom hooks

useApiの内部ではuseStateでユーザ情報やAPIの実行済みかを保持しており、useEffectで初回のみAPIを実行してuseStateのそれらの値を更新しています。

このcustom hooksを利用しているコンポーネント側では、APIの実行後にユーザ情報がuserに格納されていることになります。

-Next.js

© 2024 Shiro's secret base