Next. js で共通のレイアウトページを作成する

● Next. js で共通のレイアウトページを作成する

1 . 共通レイアウト Layout.js の作成

メインの children のところが各ページ内容に置き換わります

mkdir components
vi components/Layout.js

components/Layout.js

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>
      {/* ======================== / フッター ======================== */}
    </>
  )
}

2 . レイアウトを全ページへ適用

pages/_app.js

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

       ↓  このように修正

import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}
No.2119
01/17 10:02

edit