PackagesUIComponents
AppShell
アプリケーション全体のレイアウト骨格。ヘッダーとメインコンテンツ領域を構造化し、フルハイトレイアウトを提供する。
いつ使うか
- Next.js の
layout.tsxでアプリケーション全体のレイアウトを組み立てるときに使用する - Header コンポーネントと組み合わせて、ヘッダー + メインコンテンツの標準構成を作るときに使用する
いつ使わないか
- ページ内の部分的なレイアウトには使わない。Stack や Grid を使用する
- ダッシュボード等のサイドバー付きレイアウトには使わない（将来的に sidebar スロットを追加予定）
Usage
import { AppShell } from '@bi-shop-it/ui/app-shell';
import { Header } from '@bi-shop-it/ui/header';
// layout.tsx
const RootLayout = ({ children }: { children: React.ReactNode }) => (
<html lang="ja">
<body className={inter.className}>
<Providers>
<AppShell
header={
<Header
logo={<span className="font-bold">AppName</span>}
nav={<Nav>...</Nav>}
/>
}
>
{children}
</AppShell>
</Providers>
</body>
</html>
);Props
AppShell
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
header | ReactNode | — | 上部に固定配置するヘッダー |
children | ReactNode | — | <main> 要素内に配置されるページコンテンツ |
状態
ヘッダー付き
Header と組み合わせた標準的なアプリケーションレイアウト。メインコンテンツ領域がビューポートの残りの高さを占有する。
AppName
ページコンテンツ
<AppShell
header={
<Header
logo={<span className="font-bold">AppName</span>}
nav={
<Nav>
<NavItem href="/dashboard" isActive>
ダッシュボード
</NavItem>
<NavItem href="/settings">設定</NavItem>
</Nav>
}
/>
}
>
ページコンテンツ
</AppShell>ヘッダーなし
header を省略した最小構成。メインコンテンツのみでフルハイトレイアウトを適用する。
ヘッダーなしのコンテンツ
<AppShell>ページコンテンツ</AppShell>レイアウトガイドライン
- フルハイト:
min-h-screenでビューポート全体の高さを確保する - フレックスレイアウト: 縦方向の flex コンテナとして機能し、
<main>が残りの高さをflex-1で占有する - セマンティクス: コンテンツ領域は
<main>要素で囲まれ、メインランドマークとして機能する - body へのスタイル不要:
bodyにレイアウト用の Tailwind クラスを書く必要がなくなる
アクセシビリティ
コンポーネントが内部で処理すること
<main>要素でコンテンツ領域をラップし、スクリーンリーダーがメインランドマークとして認識する
利用者が対応すること
- header スロットには
Headerコンポーネント（<header>要素）を配置し、バナーランドマークを確保すること - ページ内に複数の
<main>要素を配置しないこと
関連コンポーネント
- Header — header スロットに配置するアプリケーションヘッダー
- Container — メインコンテンツの幅制約
- Stack / HStack — コンテンツ内の垂直・水平レイアウト