Root Layout

TL;DR

App Router の app ディレクトリ直下に置く layout.tsx。すべての URL Segment に適用される最上位の Layout で、<html> と <body> を含む。

例

page.tsx と同じく、export default する必要がある。

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <div className={styles.container}>
          <Header />
        </div>
        <div className={styles.content}>
          <Nav />
          <main className={styles.main}>{children}</main>
        </div>
        <Footer />
      </body>
    </html>
  )
}

注意点

公式ドキュメントによると、app ディレクトリには Root Layout が必ず必要で、Root Layout は <html> と <body> のタグを定義しなければならない。<title> や <meta> などの <head> のタグは手で足さず、Metadata API を使う。Metadata API は、ストリーミングや <head> の要素の重複の除去などを自動で扱う。

Root Layout は複数作れる。上に layout.js を持たない Layout は、すべて Root Layout になる。Route Groups で app/(shop)/layout.js と app/(marketing)/layout.js を作る方法や、app/layout.js を置かずにサブディレクトリごとに Layout を置く方法がある。ただし、異なる Root Layout をまたいで移動すると、クライアント側の遷移ではなく、ページ全体の読み込みが起きる。

関連

• layout.tsx
• page.tsx

出典

• layout.js - Next.js
• Root Layout - Next.js