.
├── public # 画像及びPDFなど
└── src
├── app
│ ├── _components # 汎用的なコンポーネント
│ ├── _functions # 汎用的な関数
│ └── detail
│ └── [game] # 詳細ページ
├── libs # ライブラリ
├── schema # microCMSのAPIスキーマ
└── types # 型情報パッケージマネージャはpnpmを使用。
Next.jsではApp Routerを使用する。
基本的にサーバーコンポーネント（SC）を使用。やむを得ない場合のみクライアントコンポーネント（CC）を使用する。
スタイリングはTailwindCSSを使用する。
MicroCMSでゲームの情報を管理し、ゲーム一覧と記事ページの中身はゲーム情報APIから動的に生成する。
TailwinCSSのHeadlessUI
TailwindCSS公式が提供している、アクセシビリティ対応もしてくれている便利コンポーネント集。
ヘッダーメニューではHeadlessUIのPopoverを使用。
HeadlessUIはCCのみ使用可能なため、Headerコンポーネント(SC)でHeaderClientコンポーネント（CC）を呼び出している。
menuとの違い
menuはタブ選択時にはボタンがfocusできるが、中の選択肢にはfocusしない。矢印上下キーで選択肢を選択できるようになっている。
ヘッダーメニューではメニュー内部もfocusできるpopoverの方が適している。
App RouterでPopoverを開いている状態でPopoverコンテンツ外をクリックした時にPopoverが閉じないバグあり。対策用のdivを追加する必要がある。
参照：HeadlessUIのissueコメント
MicroCMSではリッチエディタかHTML記述を選べる（組み合わせも可）。ID指定などをしたい場合はHTMLで記載する。
参照：Title: リッチエディタを使いつつ一部はHTMLで入稿する | microCMSブログ
MicroCMSのリッチエディタで作成した記事はhtml-react-parserでDOMに変換後、@tailwind/typographyを使用してスタイリングする。
これはTailwind公式が提供する、タグ要素を適切にレイアウトされたライブラリ。
さらにカスタムが必要であればproseでクラスを指定、またはtailwind.configにproseの指定を記述する。
API設定 > APIスキーマ > 「この設定をエクスポートする」で出力されるjsonファイルをsrc/schema配下に格納し、generate:cms typesコマンドを実行すると、src/types配下に型が出力される。
ファイル名からエンドポイント名を取り出すので、スキーマのファイル名は変更しない。
フォルダ上に同じエンドポイント名のファイルがある場合は、ファイル末尾の日付から最新のものが選択される。
AWS Amplify × Route53でホスティング。
production_netlifyブランチにプッシュすることでビルド可能。
MicroCMSのAPI情報は環境変数で保持する。
※以前はnetlifyでVue CLIのSSG環境を立てていたが、App RouterでSSRビルドすると404になるバグが発生したため、Amplifyに移行した。