Next.js(App Router)でヘッドレスCMS【⑥HTML構成】

2025.03.08

html
- head
- body
  - header（サイトタイトルやロゴなど）
    - h1
  - nav
    - ul > li > a（メニュー）
    - form > imput（検索バー）
  - main（ページごとに 1 回だけ使用）
    - article > h2 , p , section > h3 , p
    - aside > h2 , ul（用語集の項目、著者略歴、関連リンクなど）
  - footer
    - p（コピーライト）

<!doctype html>
<html lang="ja">
  <head>...</head>
  
  <body>
    <!-- ウェブサイトのすべてのページで使用されるメインヘッダー -->
    <header>
      <h1>Header</h1>
    </header>
    
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
      </ul>

      <!-- 検索フォーム: サイト内を移動するためのもう 1 つの方法 -->
      <form>
        <input type="search" name="q" placeholder="Search query" />
        <input type="submit" value="Go!" />
      </form>
    </nav>
    
    <!-- このページの主なコンテンツ -->
    <main>
      <!-- article（記事） -->
      <article>
        <h2>Article heading</h2>

        <p> 長めの文章 </p>

        <!-- section（章） -->
        <section>
          <h3>Subsection</h3>

          <p> 長めの文章 </p>

          <p> 長めの文章 </p>
        </section>

　　　　　<!-- section（章） -->
        <section>
          <h3>Another subsection</h3>

          <p> 長めの文章 </p>

          <p> 長めの文章 </p>
        </section>
      </article>

      <!-- 補足コンテンツ：メインコンテンツ内にネストすることも可能 -->
      <aside>
        <h2>関連情報</h2>

        <ul>
          <li><a href="#">私は海辺にいるのが好きです</a></li>
          <li><a href="#">私は海のそばにいるのが好きです</a></li>
          <li><a href="#">イングランド北部では</a></li>
          <li><a href="#">雨は止まない</a></li>
          <li><a href="#">しかたがない…</a></li>
        </ul>
      </aside>
    </main>
    
    <!-- ウェブサイトのすべてのページで使用されるフッター -->
    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
    
  </body>

まとめ

header、nav、footerはどのページでも共通で、mainの中身はページごとに異なると理解しました。

Next.jsの「app/layout.tsx」はどのページでも表示されるので、header、nav、footerをここに置けば良さそうです。

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {/* 背景 z-index: -50 */}
        <BackGround />
        {/* <header>と<nav> */}
        <NavBar />
        {/* <main> */}
        {children}
        {/* <footer> */}
        <footer>
          <p>©Copyright 2025 by hoge. All rights reversed.</p>
        </footer>
      </body>
    </html>
  );
}