next/image
画像の表示を最適化するNext.jsのComponent
o
以下のようなことをやってくれる
ブラウザごとに適切なフォーマットで配信
e.g. WebP
viewportに入ったらload
画像にwidthとheight属性を指定していても、レスポンシブ対応
画像の縦横比が崩れない
clientのJSを削減
styleと設定が簡単になった
defaultでalt属性を必要とした
ブラウザのlazy loadにより、hydrationが不要なため高速になった
Improved Performance:
Always serve correctly sized image for each device, using modern image formats
Visual Stability:
Prevent Cumulative Layout Shift automatically
Faster Page Loads:
Images are only loaded when they enter the viewport, with optional blur-up placeholders
Asset Flexibility:
On-demand image resizing, even for images stored on remote servers
images.comaings
外部Domainの画像を最適化する場合は事前にdomainを設定しておく
Next.jsのpublicディレクトリにある画像は不要
セキュリティ的に良くないのかなmrsekut.icon
追加したら再起動しないといけない
してないとこんなエラーが出る
code:error
Unhandled Runtime Error
Error: Invalid src prop (https://hogehoge.com/.jpg) on next/image, hostname "hogehoge.com" is not configured under images in your next.config.js styled-componentsでwrapすると型が消える
height/widthを指定しなくてもエラーが出ない..
こうすればいけた
code:ts
const BannerImage = styled(Image)<ImageProps>
「実際に表示しているサイズよりも大きなサイズのデータが欲しい」とき、どうすればいいか？
実際に表示しているサイズが50pxで、実際に取得するデータも50pxにすると、画像が荒くなってしまう
なので、取得するデータは150pxで、styleで50px表示、とかにしたい
){kind=link}