【inner, Layoutなど】ページ共有のコンポーネントの書き方

innerのように、全ページで共有しつつ、でも中身はページごとに異なる、なんていうコンポーネントの書き方

▼基本の書き方

/**
* {children}をpropsとして渡すことで、中に書かれたコンポーネント類をそのままラップして出力する
* ことができる。
*/

export default function Layout(**{ children }**) {
  return <div>**{children}**</div>;
}

▼インポート先での書き方

import Link from "next/link";
import Head from "next/head";
import Script from "next/script";
**import Layout from "../../components/layout";**

export default function FirstPost() {
  return (
    <>
      **<Layout>**
        <Head>
          <title>First Post</title>
        </Head>
        <Script
          src="<https://connect.facebook.net/en_US/sdk.js>"
          strategy="lazyOnload"
          onLoad={() =>
            console.log(`script loaded correctly, window.FB has been populated`)
          }
        />
        <h1>First Post</h1>
        <h2>
          <Link href="/">
            <a>Back to home</a>
          </Link>
        </h2>
      **</Layout>**
    </>
  );
}

【応用】

「Home」ページと他ページで画像のサイズを変更したい！　　　　　　　　　　　　　＆下層ページでのみ「ホームへ戻る」リンクを載せたい！

上記Layoutコンポーネント内に最初から画像を入れておきたいとする。（全ページで画像を表示したい）

ただし、Home（トップ）ページと下層ページで画像サイズを変えたい、なんて場合に。

また下層ページでのみ「ホームへ戻る」リンクを載せたい！そんな場合に。

※必要なもの＆それに関連するもののみ記述

/**
* childrenには子コンポーネントが引き渡される
*/

import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';

export default function Layout(**{ children, home }**) {
  return (
    <div className={styles.container}>
      <header className={styles.header}>
        **{home ? (**
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt={name}
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        **) : (**
          <>
            <Link href="/">
              <a>
                <Image
                  priority
                  src="/images/profile.jpg"
                  className={utilStyles.borderCircle}
                  height={108}
                  width={108}
                  alt={name}
                />
              </a>
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/">
                <a className={utilStyles.colorInherit}>{name}</a>
              </Link>
            </h2>
          </>
        **)}**
      </header>
      <main>**{children}**</main>
      **{!home && (**
        <div className={styles.backToHome}>
          <Link href="/">
            <a>← Back to home</a>
          </Link>
        </div>
      **)}**
    </div>
  );
}

▼インポート側での書き方例　※必要なもの＆関連するもののみ記述

/**
* <Layout home>で、”home”があった場合の方のJSXがレンダリングされることになる
* <Layout></Layout>の子要素が、{children} に入る
*/

import Layout from '../components/layout';
import utilStyles from '../styles/utils.module.css';

export default function Home() {
  return (
    <Layout **home**>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
        <p>
          (This is a sample website - you’ll be building a site like this on{' '}
          <a href="<https://nextjs.org/learn>">our Next.js tutorial</a>.)
        </p>
      </section>
    </Layout>
  );
}