Next.jsのRoute Groupsを使用することで、ページの種類ごとに異なるレイアウトを簡単に適用することができます。 例えばログイン済みユーザー用のページ、非ログインユーザー用のページ、管理者用のページといった具合にページの種類ごとにレイアウトを分け…

フロントエンドにNext.js、バックエンドにRailsのAPIモードを採用した構成において、一つのリポジトリで管理するMonorepoの環境をDockerを利用して開発環境を構築する方法について解説します。 環境情報 セットアップ前のProcjectの構成 docker-compose.yml…

Next.jsのgetServerSideProps等でfetch APIを使用してSSRする場合に、queryパラメータを扱う方法を説明します。 実装 query-stringというNPMライブラリを使用します。 query-stringを使用することで、安全にqueryパラメータを生成することができます。 impor…

Next.jsの初回アクセス後にnext/router等で画面遷移すると、getServerSidePropsの処理中が挟むことによって画面遷移の待ちが発生してしまいます。 フリーズしているような見た目になってしまうので、見た目としてあまり好ましくありません。 待機中にloading…

前回、Rails7 APIモードの認証機能をdevise_token_authで実装するという記事で、devise_token_authの導入方法や使い方を一通り説明いたしました。 今回はNext.jsとdevise_token_authを使ってログイン処理と認証制御周りを具体的な実装例を踏まえて説明します…