75199


Next.jsチュートリアルで下記のコードが分からず困っています。

`export default function Layout({ children, home }) {` ここで
`children`と`home`という引数が指定されていています。 `index.js` で呼び出す際に `<Layout home>` と 引数に
`home` を取っていると思われるのですが、 この `home` が `index.js`
のどこにも記述されてなく一体どこから来ているのかわかりません。中身は真偽値が入ってるみたいなんですが、どこで定義されているのでしょうか？ `home`
自体がNext.jsでは特別な意味になるのでしょうか？あと `children` も同様にどこから来ているのか分からないです。

**layout.js**

[code]

    import Head from 'next/head'
    import styles from './layout.module.css'
    import utilStyles from '../styles/utils.module.css'
    import Link from 'next/link'
    
    const name = 'Your Name'
    export const siteTitle = 'Next.js Sample Website'
    
    export default function Layout({ children, home }) {
      return (
        <div className={styles.container}>
          <Head>
            <link rel="icon" href="/favicon.ico" />
            <meta
              name="description"
              content="Learn how to build a personal website using Next.js"
            />
            <meta
              property="og:image"
              content={`https://og-image.now.sh/${encodeURI(
                siteTitle
              )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
            />
            <meta name="og:title" content={siteTitle} />
            <meta name="twitter:card" content="summary_large_image" />
          </Head>
          <header className={styles.header}>
            {home ? (
              <>
                <img
                  src="/images/profile.jpg"
                  className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
                  alt={name}
                />
                <h1 className={utilStyles.heading2Xl}>{name}</h1>
              </>
            ) : (
              <>
                <Link href="/">
                  <a>
                    <img
                      src="/images/profile.jpg"
                      className={`${styles.headerImage} ${utilStyles.borderCircle}`}
                      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>
      )
    }
    
[/code]

**index.js**

[code]

    import Head from 'next/head'
    import Layout, { siteTitle } from '../components/layout'
    import utilStyles from '../styles/utils.module.css'
    
    export default function Home() {
      return (
        <Layout home>
          <Head>
            <title>{siteTitle}</title>
          </Head>
          <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>
      )
    }
    
[/code]

### 参照

[大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました -
Qiita](https://qiita.com/thesugar/items/01896c1faa8241e6b1bc)


CC BY-SA 4.0
2021-04-10T07:29:58.797
75195
2021-04-10T13:10:31.723
2021-04-10T07:54:50.150
3060
22565
question
javascript reactjs react-jsx next.js
Next.jsで<Layout home>のhomeがどこから来る変数か分からない。


> `<Layout home>` と 引数に `home` を取っていると思われるのですが、 この `home` が `index.js`
> のどこにも記述されてなく一体どこから来ているのかわかりません。

Propsの値を省略した場合のデフォルト値は `true` です。

Props Default to “True”  
<https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true>

そのため、index.jsの `<Layout>` は省略せずに書くと以下のようになり、 `home` という名前のpropに `true`
を渡していることになります。

[code]

    export default function Home() {
      return (
        <Layout home={true}>
    
[/code]

* * *

> あと `children` も同様にどこから来ているのか分からないです。

`children` はReactの `props` に元から入っている特別なプロパティです。

Children in JSX  
<https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx>

> In JSX expressions that contain both an opening tag and a closing tag, the
> content between those tags is passed as a special prop: `props.children`.

この説明の通りなのですが、index.jsで説明すると、Layoutの `children` には `<Layout>` と `</Layout>`
で囲まれた部分のコンテンツが入ってきます。


CC BY-SA 4.0
2021-04-10T12:59:16.507
75199
2021-04-10T13:10:31.723
2021-04-10T13:10:31.723
3068
3068
75195
answer