Next.js App Routerを駆使したアプリケーション開発:React Server Componentを使った機能実装とテストの結合
Server Actionで状態遷移するベストプラクティスが知りたい フォーム入力 データベース更新 画面更新 というよくある黄金シナリオを考えます。 NextJSはSSR Frameworkなので可能な限りServer Componentを利用することを推奨しています。しかしServer ComponentではHooksが使えません。 これまでのようにAPIを叩く→State更新→画面再レンダリングという黄金のパターンは使えなくなります[1]。そこでhooksに頼らずにデータの更新と再レンダリングを行う新しいNextJSのメンタルモデルに適応する必要があります。 公式ドキュメントでおすすめされる1つの方法はServer Actionを使うことです。今日はこのあたりのベストプラクティスについて備忘録としてまとめます。 Server Action Server Actionとはサーバーサイド
今回やること 前回Next13の新機能ServerActionsを使ってユーザー登録を作ったので、ログインフォームを作っていく。 認証部分は(初めてだけど)NextAuthを使う。 Nextで実装できる箇所についてはNext側で実装していくためNextAuthはログインでの認証のみ実装。 作ってみた 流れと実装方法 実装の流れ NextAuthでログインの処理 ログインしているかどうかでヘッダーの内容を変更 セッションからユーザーのIDを取得しServer側でユーザーデータを取得する 本編とは逸れるのでここに記載するが今回からNextUIとReactIconsを導入。 導入方法は割愛するので各ドキュメント等参照。 NextAuthの準備 NextAuthについて。 認証機能をNextに実装できるライブラリ。 インストール まずはドキュメントに合わせてインストールしていく。 import {
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く