レスポンシブデザイン | CSS Modules・useMediaQuery

スタイルの細かな指定が行いやすいCSS Modulesでスタイル付けをしました。useMediaQueryを使用するときはHydration Errorが起きやすいため、useEffectを使用しマウント完了後に描画するなどをして対処しました。

認証機能 | NextAuth・Prisma・Supabase

データベースの操作がスムーズにできるPrismaを使用し、SupabaseのDBと連携しています。SupabaseはNext.jsとの相性が良いため選択しました。NextAuthのOAuth、クレデンシャル認証にゲスト用のログインボタンを設置し、バリエーションのあるログイン機能を制作しました。Formはreact-hook-form、zodResolverを使用して入力内容のバリデーションを行っています。

決済 | Stripe

以前制作したサイトはカートページのみでしたが購入ボタンを設置し、実際に商品を購入できるように変更し、ECサイトである機能性を高めました。Stripeには合計数と合計金額を登録し、購入時にStripeIdと共に商品の個別データをSupabaseへ登録することで、後にユーザーページに購入履歴を追加できるようにしています。

お気に入り登録 | useState & DB登録

サイト内の商品数が増えるに伴い、気に入った商品を探したりページ移動する手間が出てきてしまいます。そのため、ユーザーページを追加しユーザーのお気に入り一覧が見れる機能が欲しいと考えました。そうすることで毎回スムーズに商品を購入できると考えました。useStateを使用し、ハートをクリックすることで、お気に入りに追加できたり外したりできます。ログインしていない場合は、クリックした時にログインページへ推移します。お気に入り商品はDBで管理しています。

工夫した点

サーバーコンポーネントとクライアントコンポーネントの表示速度の差によるレイアウトシフトが発生したため、skeletonUIをマウントされるまでの間表示させることで高さを確保し、レイアウトのズレをなくすことができました。

難しかった点・今後の課題

初期表示のLCPの高さを下げることが難しく、CSSのDisplayで切り替えても、useMediaQueryで調整してもうまくいきませんでした。元画像の大きさもできる限り小さくしましたが変化はあまりみられませんでした。