Uncategorized
Next.jsでブラウザAPI使おうとしたら「window is not defined」って怒られた
Next.jsで開発してると必ず出くわすエラーです。 最初のうちはもちろん、もう知ってるはずなのに、ついwindow.localStorageと書いちゃってまたこのエラーが出ちゃうことも珍しくないです。 一応、モジュール […]
ボタンのテキスト長くしたら、隣のアイコンがぺしゃんこに。flex-basisが原因だった
「送信」って書いてあるボタン、あとから「お問い合わせ内容を送信する」に文言を変えたくなること、ありますよね。先日、まさにその修正をすることになって、テキスト変えるだけなら余裕だと思って、ささっと変更したんです。 そしたら […]
inputのフォーカス外れ？コンポーネント内のコンポーネント定義のバグ
プロジェクトで、検索フォームコンポーネントを作成していたのですが、テキスト入力欄に文字を入力するたびに、謎のフォーカス外れが発生してました。 こんな感じです。ユーザーからしたら単純なバグでは済まない、明らかにUXが損なっ […]
「Parallel & Intercepting Routes」でURL同期モーダルを作る
Next.js（App Router）でかなり便利なのに、仕様が分かるまで苦戦した、Parallel RoutesとIntercepting Routes の組み合わせについて書きます。 Xなどで「投稿一覧で写真をタップ […]
Next.jsのHydration Errorに、useEffect以外で3つのやり方で回避する
Next.jsで開発しているとよく遭遇するあのエラー。 Hydration Errorです。サーバー側のレンダリング結果とクライアント側の結果がズレたときに出るやつです。 とりあえずuseEffectという力技はやめて、 […]
CSS-in-JSをやめて「CSS Modules + Tailwind」のいいとこ取りする
以前までEmotionやstyled-componentsなどがメインでしたが、最近はスタイリングを CSS Modules + Tailwind CSSのハイブリッドに移行しています。CSS-in-JSがしんどくなった […]
justify-contentに頼らない「Flexbox×margin: auto」で手軽レイアウト
Webサイト作ってるとき、レイアウト調整といえば、大抵Flexboxを使っています。 でも実装しているときに気づくのが、親要素（Flexコンテナ）にてjustify-contentだけで配置しようとしすぎちゃう点。 それ […]
Tailwind全盛期に、あえて「素のCSS変数」でデザインシステムを作る
日頃からTailwind CSSにはお世話になっていますが、中規模以上のプロジェクトを経験する中で、Tailwindだけに頼ると後々の保守が大変になるケースに何度も直面してきました。 Tailwindを活かしつつも、あえ […]