メインの children のところが各ページ内容に置き換わります
mkdir components
vi components/Layout.js
components/Layout.jsx レイアウトを複数作る場合は components/layouts/default.jsx
import Image from 'next/image'
import Script from 'next/script'
import Link from 'next/link'
import Head from 'next/head'
export default function Layout({ children }) {
return (
<>
<Head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<title>サイトのタイトル</title>
<meta name="description" content="サイトのデスクリプション" />
</Head>
{/* ======================== ヘッダ ======================== */}
<header className="header">
</header>
{/* ======================== / ヘッダ ======================== */}
{/* ======================== メイン ======================== */}
<main>{children}</main>
{/* ======================== /メイン ======================== */}
{/* ======================== フッター ======================== */}
<footer className="footer"></footer>
{/* ======================== / フッター ======================== */}
</>
)
}
pages/_app.js
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
↓ このように修正
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}