ほっぺ

<h1 id="%E3%81%93%E3%82%8C%E3%81%AF%E3%81%AA%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%93%E3%82%8C%E3%81%AF%E3%81%AA%E3%81%AB" aria-hidden="true"></a> これはなに</h1>
<ul data-line="1" class="code-line">
<li data-line="1" class="code-line">最近は管理業務やUIデザインばかりやっているほっぺさんが久しぶりにNext.jsで開発を行う上でのメモ</li>
</ul>
<h1 id="%E8%83%8C%E6%99%AF" data-line="3" class="code-line">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h1>
<ul data-line="4" class="code-line">
<li data-line="4" class="code-line">とあるお店のホームページを諸事情で作りなおすことになった</li>
<li data-line="5" class="code-line">最大2階層で、バックエンドなど特になしの静的サイト</li>
<li data-line="6" class="code-line">安いレンタルサーバーにFTPアップロード</li>
<li data-line="7" class="code-line">デザインはFigmaでコンポーネントレベルまで落とし込んでいる</li>
<li data-line="8" class="code-line">業務ではここ1年ほどはFigmaとタスク管理とドキュメント作成くらいしかしてない</li>
<li data-line="9" class="code-line">Cursorエディタを使ってみたくなった</li>
</ul>


<h1 id="%E3%83%9B%E3%83%BC%E3%83%A0%E7%94%BB%E9%9D%A2%E3%81%AE%E6%A7%8B%E6%88%90" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%83%9B%E3%83%BC%E3%83%A0%E7%94%BB%E9%9D%A2%E3%81%AE%E6%A7%8B%E6%88%90" aria-hidden="true"></a> ホーム画面の構成</h1>
<p data-line="1" class="code-line">これらをどういう単位で、どういうディレクトリで切っていくか</p>
<ul data-line="3" class="code-line">
<li data-line="3" class="code-line">ヘッダ</li>
<li data-line="4" class="code-line">営業情報</li>
<li data-line="5" class="code-line">キャッチ画像（カルーセル）</li>
<li data-line="6" class="code-line">ウェルカムメッセージ</li>
<li data-line="7" class="code-line">臨時のお知らせ</li>
<li data-line="8" class="code-line">各ページ紹介
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">お店のこだわり</li>
<li data-line="10" class="code-line">商品カテゴリ紹介</li>
<li data-line="11" class="code-line">アクセス</li>
</ul>
</li>
<li data-line="12" class="code-line">最新情報</li>
<li data-line="13" class="code-line">個別記事</li>
<li data-line="14" class="code-line">フッタ</li>
</ul>
