shimotsu tech

Webフロントエンドエンジニア @ to-R inc.

Next.js

Next.js 製の静的サイトを S3 + CloudFront + Github Actions で自動デプロイする

これまで Next.js や Gatsby を使った Jamstack なサイトを作る際には Netlify や Vercel といったホスティングサービスを使うことがほとんどでした。 そこで Jamstack に関する理解を深めるため、AWS の S3 + CloudFront (デプロイは Github Actions で自…

Next.js の特定のディレクトリ下において指定したCookieの有無で閲覧制御をする

例えばアプリケーションのログインページおよび新規登録ページが、それぞれ /auth/login、/auth/signup に配置されていると仮定します。 - pages - auth - login.tsx - signup.tsx このとき、これらのページにアクセスできるのは未ログイン状態のユーザーの…

【Firebase Auth】ソーシャルログインしたアカウントをすぐに削除しようとすると "auth/requires-recent-login" のエラーが出る

今作っているアプリケーションで、Firebase Authentication のソーシャルログインを活用しているものがある。そこで、ソーシャルログインしたのち(この時点でFirebase Authentication 上にユーザー情報が作られる)、場合によってすぐにユーザー情報を削除…

【Next】Firebase Authentication で取得したユーザ情報を整形してアプリケーション内で使う

Firebase Authentication を活用したアプリケーションにおいて、取得したユーザ情報を useContext などを使ってグローバルに保持するケースがあると思います。具体的には以下のような実装です。 import { FC, createContext, useEffect, useState } from 're…

Next.js でクライアントから環境変数が読み込めない

Next.js で今個人的に作っているアプリケーションにおいて、クライアント(ブラウザ)から環境変数(.env.*)が読めないという事象に遭遇したので、その原因と解決法をメモしておきます。やりたいことは、ページコンポーネント上で、アクセス時に毎回 Fireba…