ちなみにnpmとnpxの違いはこれ。ManagerとExecuterらしい。
だからnpx installではなくnpm instalなのか。
https://zenn.dev/uniformnext/articles/c68ea2bb6cbe00

とするとnpm run devってどういうこと。。？

https://zenn.dev/luvmini511/articles/6c6f69481c2d17

生成AI(claude-4-sonnet)によれば…

今回の場合における理由

1. オブジェクト型の拡張

• React.ComponentProps<"div">を継承している
• interfaceはextendsキーワードで直感的に拡張できる
• typeでも可能だが、交差型（&）を使う必要がある

2. React のベストプラクティス
   Reactコミュニティでは、コンポーネントのpropsを定義する際にinterfaceを使うのが一般的です

type vs interface の違い

1. interfaceの特徴：

• 宣言マージが可能
• 継承が直感的

2. typeの特徴：

• ユニオン型が使える
• 計算されたプロパティ
• 条件型がつかえる

使い分けの指針

1. interface を使うべき場合：

• オブジェクトの形状を定義する
• 継承・拡張が必要
• Reactコンポーネントのprops
• 将来的に拡張される可能性がある

2. type を使うべき場合：

• ユニオン型（string | number）
• プリミティブ型のエイリアス
• 計算されたプロパティ
• 条件型やマップ型

まとめ

今回interfaceを選んだ理由：

• Reactの慣習：コンポーネントpropsはinterfaceが標準的
• 拡張性：extendsによる継承が直感的
• 可読性：意図が明確（「これはオブジェクトの型定義」）
  将来性：必要に応じて他の場所で拡張可能

一番大きいのは、コンポネントのpropsを設定したかったからってとこかな？
typeでもよさげではあるけど。

LayoutはNext.jsの仕様
https://nextjs.org/docs/app/api-reference/file-conventions/layout

@egoist/tailwindcss-icons

• @egoist/tailwindcss-iconsをglobal.cssに設定しても反映されず、色々設定を触ってみたりしたがなかなか直らず…。結局.nextファイルを消して再度npm run devをしたら（？）なおった。
• 新しいアイコンフォントを追加するときはnpm install @iconify-json/emojione-monotone

フリーのアイコンサイトからインストールして使うことも検討したが、逐一探してcomponentに登録するのは面倒なので、よほどこだわりのある絵柄でない限りはtailwindやタグとして記述できるようなライブラリを使ったほうが楽そう。

• アイコンの種類が豊富そうなので今回は@egoist/tailwindcss-iconsを利用する。
• @iconify/tailwindが公式のようだが、補完が聞かないとのことなのでegoistの方を利用。
  • https://scrapbox.io/lacolaco/Iconify_for_Tailwind_CSSのすすめ

• @egoist/tailwindcss-icons、spanタグの中でよく使われているが、spanタグの中まで見に行かないと何が表示されているかわからないのは不便…
• Iconesのサイトでコンポネント自体も配布されているし、それつかってもいいかと思ったが、下記の理由からtailwindcss-iconsを使ってコンポネントを作って利用することにした。
  • スタイルの変更にSVGの形式を逐一調べるのは面倒
  • ほかがTailwindcssでスタイルの設定がされているのにここだけスタイルが変わるのは読みにくそう