クエスト8：レイアウトの共通化

今回の課題

Layout コンポーネントを完成させよう！Header と Footer を children の前後に配置してね。

📖 解説を見る

🏗️ ヘッダー・フッターを全ページに共通化しよう

Next.js では pages/_app.js に Layout コンポーネントを入れることで
全ページに共通のヘッダー・フッターを適用できます。
children props に各ページのコンテンツが入ります。

ヒントを見る

<Header /> と <Footer /> を children の前後に追加しよう

期待する出力

My Blog

📄 見本

「答えを見る」を押すと、お手本のコードが出ます。クリックでコピーできます。

💻 コードエディタ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>body{margin:0;font-family:sans-serif}</style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
// レイアウトコンポーネントを完成させよう
// Next.jsでは _app.js でLayout を全ページに適用できる

// Headerコンポーネント
function Header() {
  return (
    <header style={{background:"#000",color:"#fff",padding:"12px 20px"}}>
      <h1 style={{margin:0,fontSize:"20px"}}>📰 My Blog</h1>
    </header>
  );
}

// Footerコンポーネント
function Footer() {
  return (
    <footer style={{background:"#f3f4f6",padding:"12px 20px",textAlign:"center",fontSize:"14px",color:"#666"}}>
      <p>© 2026 My Blog</p>
    </footer>
  );
}

// Layoutコンポーネントを完成させよう
// children を Header と Footer で挟んで表示する
function Layout({ children }) {
  return (
    <div>
      {/* Header を表示しよう */}
      <main style={{padding:"20px"}}>{children}</main>
      {/* Footer を表示しよう */}
    </div>
  );
}

// ページコンポーネント
function BlogPage() {
  return (
    <Layout>
      <h2>最新の記事</h2>
      <p>Next.jsのレイアウト共通化について学ぼう！</p>
    </Layout>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BlogPage />);
  </script>
</body>
</html>

あなたの出力

実行すると結果がここに表示されます

このクエストはプレミアム限定です

クエスト8：レイアウトの共通化

クエスト8：レイアウトの共通化

れんしゅうもんだい