将页面变量传递给 NextJS 中的布局

Question

我正在将我的博客从 Jekyll 迁移到 NextJS，并希望通过网站布局实现相同的功能。

我们的想法是在单个布局文件中定义元标记，并使用在页面级别定义的变量填充值。

我看到了几种解决方案，其中之一是在 _app.js 中定义元标记，如下所述：

但是根据我作为 React/NextJS 新手的理解，最好使用 pageProps，但我不知道如何编码。到目前为止我有

_app.js

import 'bootstrap/dist/css/bootstrap.css'
import Layout from '../components/layout/layout';

export default function Blog({ Component, pageProps }) {
  return (    
    <Layout>
      <Component {...pageProps} />
    </Layout>    
  );
}

layout.js

import { Fragment } from 'react';
import Image from 'next/image';
import Head from 'next/head';

import MainNavigation from './main-navigation';

export default function Layout({ children }) {
  return (
    <Fragment>
      <Head>
        <meta name='viewport' content='width=device-width, initial-scale=1' />
        <title>{children.title}</title>
      </Head>
      <MainNavigation />
      <main>
        {children}
      </main>
    </Fragment>
  );
}

HomePage.js

export default function HomePage() {   
   return <div>HomePage</div>
}

Answer 1

你可以在pageProps中获取你想要的道具，并将它们传递给布局组件：

<Layout metas={pageProps.metas} ...>

并在 <Layout />:

中使用它们

export default function Layout({ metas, children }) {
  return (
    <Fragment>
      <Head>
        <title>{metas.title}</title>
      </Head>
      ...
    </Fragment>
  );
}

Answer 2

我想坚持使用官方文档中的原始代码示例，所以按照问题所述保留布局，只是

<Layout>

没有

<Layout metas={pageProps.metas} ...>

所以我只需要使用 getStaticProps 来定义道具：

export async function getStaticProps() {
  return { props: { title: 'HomePage' } }
}

export default function HomePage() {
  return <div>HomePage</div>
}

然后在布局中调用它为

{children.props.title}

没有

{children.title}

如果我只是按照我引用的另一个 SO 线程中的描述在 HomePAge.js 中定义一个常规的 js 变量，则后者会起作用。但我不确定这种方法是否会以某种方式影响静态网站生成，所以我决定使用 NextJS built-in 特性 getStaticProps。

将页面变量传递给 NextJS 中的布局

Pass page variables to layout in NextJS

reactjs

next.js