ダッシュボードレイアウトでコンポーネントの理解をする
-
SideNavをインポートして、<SideNav />として呼び出す。
/// /app/dashboard/layout.tsx
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}
レイアウトを使うことの利点
-
レイアウトが再度レンダリングされる際、更新処理のある特定のコンポーネントのみ更新される。これは
Partial Renderingと呼ばれていて、画面遷移の際にクライアントサイドのReactの状態を保存する特徴を持つ。 -
親の
page.tsxに適用したコンポーネントとデザインレイアウトは子階層のレイアウト全てに共通して適用できる。
Rootレイアウト
- アプリケーション全体に適用したい場合は
Root Layoutを使用することができる。
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}
参考