ダッシュボードレイアウトでコンポーネントの理解をする

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>
  );
}

参考