吹き出しコンポーネント作成メモ

[pss-aileen]

• よりよく作れる方法がありそうだが、とりあえず一旦自分が作れる方法で実装中...
• 疑問点、今すぐ解決できなさそうなことのメモです...！

[pss-aileen]

困りごと: svg でなく、pngを表示しようとするとエラーが出た

軽く調査したがエラーすぐ解決しなさそうだったので一旦飛ばした、のちにちゃんと調べたい

Error: Image Optimization using the default loader is not compatible with { output: 'export' }.
Possible solutions:

• Remove { output: 'export' } and run "next start" to run server mode including the Image Optimization API.
• Configure { images: { unoptimized: true } } in next.config.js to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api

[kazzyfrog]

next exportで静的サイト生成して、それをGitHub Pagesにデプロイしているので、
そのような場合、<Image>コンポーネントの画像最適化の機能が使えないっぽいですね！
（多分、svgはブラウザで描画するので、画像の最適化は行われないという感じなんですね。。）

なので、next.config.js内に{ images: { unoptimized: true } }を記載して最適化を無効にするか、
<img>に置き換えてしまってもいいかもです！！

[pss-aileen]

こちらひとまず { images: { unoptimized: true } } とすることにしました！

[pss-aileen]

後でする: z-index 調整

背景の絵文字を後ろにしたのはよかったが、そうするとホバーできなくなったので、うまいことすること

[pss-aileen]

メモ: おおよそのコンポーネントの実装は終了

• TODO
  • 変数名とかボロボロなところを修正する
  • propsの渡し方もっと何かないか調査する
• その他
  • z-indexは別issueにまわして検討、調査、修正でいきたい！