Next.jsで.envから定数を読めないときに確認するポイント
Next.jsで.envに定義した定数をクライアントサイドのコードで参照する場合は、NEXT_PUBLIC_ というプレフィックスを付ける必要があります。
NEXT_PUBLIC_HOGE=HOGEまたもう一つの落とし穴と ...
Google map の無料埋め込みだとストリートビューが使えない
Google map を開いて、地点を指定した後に画面左側の「共有」アイコンから「地図を埋め込む」を選択すると、iframe のコードが表示されるので、それをWebサイトに張り付けるだけで簡単にGoogle mapをあなたのサイトに表 ...
CSS 背景色だけ透過させる方法
以下のようなHTMLがあるとします。
文字列はそのままで、グレーの部分だけを透過させたい場合は、グレーの部分に透過を適用します。
background-color に rgba を指定し、四つ目の値を1以下にし ...
float と flex どちらを使うか
HTML要素を並べる手段として、float と flex があります。
現在では flex を使うのが一般的ですが、float を使わないとできないことがあります。
それがテキストの回りこみです。
< ...
Web Vitals の INP
Web Vitals には INP という新しい指標が試験的に存在しています。
INPは Interaction to Next Paint の略です。
これは、ユーザーの操作に対して視覚的な反映がどれくらい遅 ...
CLSとaspect-ratio
これまでにこんな経験はないでしょうか。
Webサイトのアクセスしてリンクをクリックしようとしたら、直前で広告の画像が表示されてしまい、リンクの位置が下にずれて、間違って広告をクリックしてしまった。
このようなこ ...
Next.jsのnext/imageを使って親要素のサイズに画像を合わせる
next/imageを使って画像を表示するときに、親要素のサイズを満たすように画像を表示したい場合です。
例えば、親要素が300*300で、画像が300*350だったとします。
縦横の比率は同じままで、親要素を ...
注意 これから引っ越しを考えている人に絶対におすすめしないホラー映画
これから引っ越しを考えている人に、ぜひ見てもらいたくないホラー映画があります。
残穢-住んではいけない部屋-
タイトルからして内容が明確なのですが、このホラー映画がなぜ怖いかを考えてみました。
ホラ ...
TypeScript テクニック union 型から特定のメンバーを削除する方法
既存の union 型から特定のメンバーを削除した型作成する方法です。
extends を使用します。
以下の型があります。
type T1 = 'a' | 'b' | & ...
TypeScript AxiosError の response について
AxiosError は axios で catch ブロックに入った時の error オブジェクトの型を表します。
注意なのは、AxiosError.response はオプショナルであることです。
つまり、 ...









