2026年09月14日の日記 📖
フルちゃん
今日のメモ
# 今日やったこと
ミニアプリの実装（フラッシュメッセージ（トースト）の共通部品）
# 今日理解できたこと
昨日のNext.jsで理解したこと
app/(auth)/layout.tsx の中身はapp/layout.tsxに入ること
```
/login を開いたときの実際の構造
app/layout.tsx
└── <html><body>
<AuthProvider>
<SiteHeader />
<div className="flex flex-1 flex-col">
│
└── app/(auth)/layout.tsx ← ここに入る
└── <main className="flex flex-1 items-center justify-center">
<div className="... カード ...">
│
└── app/(auth)/login/page.tsx ← さらにここに入る
<h1>ログイン</h1>
<form>...</form>
</div>
</main>
</div>
<SiteFooter />
</AuthProvider>
</body></html>
```
また、(auth)とディレクトリの名称を括弧書きにすると、ルートに表示されなくなること
ログイン画面の場合、auth/loginではなく/loginとなること
フラッシュメッセージ（トースト）の共通部品において、XSS対策のCSPの設定が必要になるため、react-hot-toastやsoonerなどのライブラリを用いずに（後で設定が面倒になるよう）自前で作成することにした！
- aria-atomic、aria-aliveについて学んだ（長くなるため、詳細は省略）
# まだ理解できていないこと
# 次にやること
面接の回答を考える！
# 感想など
明日は就活対策をやりたい
ミニアプリの実装（フラッシュメッセージ（トースト）の共通部品）
# 今日理解できたこと
昨日のNext.jsで理解したこと
app/(auth)/layout.tsx の中身はapp/layout.tsxに入ること
```
/login を開いたときの実際の構造
app/layout.tsx
└── <html><body>
<AuthProvider>
<SiteHeader />
<div className="flex flex-1 flex-col">
│
└── app/(auth)/layout.tsx ← ここに入る
└── <main className="flex flex-1 items-center justify-center">
<div className="... カード ...">
│
└── app/(auth)/login/page.tsx ← さらにここに入る
<h1>ログイン</h1>
<form>...</form>
</div>
</main>
</div>
<SiteFooter />
</AuthProvider>
</body></html>
```
また、(auth)とディレクトリの名称を括弧書きにすると、ルートに表示されなくなること
ログイン画面の場合、auth/loginではなく/loginとなること
フラッシュメッセージ（トースト）の共通部品において、XSS対策のCSPの設定が必要になるため、react-hot-toastやsoonerなどのライブラリを用いずに（後で設定が面倒になるよう）自前で作成することにした！
- aria-atomic、aria-aliveについて学んだ（長くなるため、詳細は省略）
# まだ理解できていないこと
# 次にやること
面接の回答を考える！
# 感想など
明日は就活対策をやりたい
visibility
公開