このサイトを開発時に一瞬詰まった問題．このサイトは Next.js ベースで作成されていて，navbar のリンクに対して Framer Motion でアニメーションを実装している．この遷移を行う際に本番環境でのみリンクを押してから元居たページの CSS が一瞬崩れてから目的のページに遷移する現象が見られた．

よく当該現象を睨むと外れるのは一部のスタイルのみであり，具体的には CSS Modules のみが外れることが判明した．すなわち_app.tsx で globals.css を読んでいたり Tailwind CSS を使っていたりするがこれらは外れることは無い．よってひとまず_app.tsx にそれ以外を移すことで対応した．

こういう本番環境でのみ発生する系のやつ，React をそんなに書いていないのに 2 例目なので次のような 2 つの CI/CD を 書いて GitHub Actions に追加した：

• PR が[opened, synchronize, reopened]で発火
• PR の名前から private なリポジトリを作って yarn export の結果を突っ込む
• GitHub Pages で公開して URL を reviewdog 使って PR のコメントに付ける

これで本番環境のプレビューが確認できるようになった

• PR が closed で発火
• その PR に紐づいたリポジトリを削除

これで PR を閉じると自動的にプレビュー用リポジトリも削除されるようになった．

元々 prettier の check をかけたり main への push 時には yarn export とかしてデプロイをするやつはあるので workflow が 3 つに増えて快適になった．人間は反省で強くなる．