Next.js中无需每个页面引入Layout，如何传递webName与pageTitle props？

你可以通过两种方式实现，无需在每个页面单独引入Layout组件，直接在全局的_app.js里统一处理：

方法一：利用页面组件的静态属性 #

这种方式适合不需要异步获取数据的静态页面，直接在页面组件上定义静态元数据即可。

步骤1：修改_app.js，读取页面静态属性 #

import Layout from '@/layout/Layout'
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  // 读取页面定义的元数据，没有则用默认值兜底
  const { 
    webName = 'Feet Of Colors Foundation', 
    pageTitle = '默认页面' 
  } = Component.pageMeta || {}

  return (
    <Layout webName={webName} pageTitle={pageTitle}>
      <Component {...pageProps} />
    </Layout>
  )
}

步骤2：在各页面组件上添加静态元数据 #

比如首页pages/index.js：

export default function Home() {
  return <main>首页内容区域</main>
}

// 定义当前页面的元数据
Home.pageMeta = {
  webName: 'Feet Of Colors Foundation',
  pageTitle: '首页'
}

比如关于页pages/about.js：

export default function About() {
  return <main>关于我们页面内容</main>
}

About.pageMeta = {
  webName: 'Feet Of Colors Foundation',
  pageTitle: '关于我们'
}

方法二：通过数据获取函数传递元数据 #

如果页面需要从接口或数据库动态获取webName/pageTitle，可以用getStaticProps（静态生成）或getServerSideProps（服务端渲染）把元数据放进props里，再在_app.js中读取。

步骤1：修改_app.js，读取pageProps中的元数据 #

import Layout from '@/layout/Layout'
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  // 从pageProps中取元数据，无则用默认值
  const { 
    webName = 'Feet Of Colors Foundation', 
    pageTitle = '默认页面' 
  } = pageProps.pageMeta || {}

  return (
    <Layout webName={webName} pageTitle={pageTitle}>
      <Component {...pageProps} />
    </Layout>
  )
}

步骤2：在页面的数据获取函数中返回元数据 #

比如动态页面pages/blog/[id].js：

export async function getStaticProps(context) {
  // 模拟从接口获取文章信息和页面元数据
  const res = await fetch(`https://api.example.com/blog/${context.params.id}`)
  const post = await res.json()

  return {
    props: {
      post,
      pageMeta: {
        webName: 'Feet Of Colors Foundation',
        pageTitle: post.title // 用文章标题作为页面标题
      }
    }
  }
}

export default function BlogPost({ post }) {
  return <main>{post.content}</main>
}

最后：更新Layout组件的动态标题 #

把Layout里硬编码的标题改成动态拼接的，确保页面标题随pageTitle变化：

import Head from 'next/head' // 记得导入Head组件

const Layout = ({ children, webName, pageTitle }) => {
  return (
    <div>
      <Head>
        <meta charSet='utf-8' />
        <meta
          name='viewport'
          content='width=device-width, initial-scale=1, shrink-to-fit=no'
        />
        <meta name='description' content='' />
        <meta name='author' content='Chris Achinga -> chrisdevcode.xyz' />
        {/* 动态生成页面标题 */}
        <title>{`${pageTitle} | ${webName}`}</title>
      </Head>
      <PageHeader webName={webName} pageTitle={pageTitle} />
      <NavBar webName={webName} />
      <main>{children}</main>
      <Footer />
    </div>
  )
}

export default Layout

内容的提问来源于stack exchange，提问作者Achinga