Next.js如何全局设置页面组件model属性默认值？是否适用React Context？

你当前的代码没有对未手动配置model属性的页面组件做值兜底，直接读取Component.model自然会得到undefined，只需要在_app.tsx中先定义全局默认值，再通过空值合并运算符做优先级判断即可：

• 优先级规则：组件手动挂载的model属性 > 全局默认值

修改后的完整_app.tsx代码如下：

import { AppProps } from "next/app";
import type { NextComponentType  } from 'next'
import Blue from "../components/blue";
// 其他model对应的包裹组件可在此处引入，例如import Red from "../components/red";

// 配置全局默认model值
const GLOBAL_DEFAULT_MODEL = 'blue'

type CProps = AppProps & {
   Component: NextComponentType & {model?: string }
};

const MyApp = ({
   Component,
   pageProps,
}: CProps) => {
   // 优先使用组件自定义model，未配置时 fallback 到全局默认值
   const resolvedModel = Component.model ?? GLOBAL_DEFAULT_MODEL

   return (
       <>
           {resolvedModel === 'blue' ? (
               <Blue>
                   <Component {...pageProps} />
               </Blue>
           ) /* 其他model的判断分支在此补充，例如:
           : resolvedModel === 'red' ? (
               <Red>
                   <Component {...pageProps} />
               </Red>
           ) */
           : (
               <Component {...pageProps} />
           )}
       </>
   );
};

export default MyApp

该写法完全兼容你当前给组件手动配置model的使用方式，例如你示例中ComponentFoo.model = 'red'的配置会被优先识别，不会被默认值覆盖。

两种方案的适用场景不同，按需选择即可：

• 如果你的model配置仅用于_app层判断外层包裹组件，不需要在页面、嵌套业务组件内部读取model值做逻辑处理，当前静态属性+默认值兜底的写法已经足够，实现简单无额外开销。
• 如果后续需要在任意层级的子组件中读取当前页面的model值（比如做主题适配、条件渲染、逻辑分支判断），更推荐结合React Context实现：在_app层将计算得到的resolvedModel注入Context，所有子组件可通过自定义Hook直接读取该值，无需逐层传递props。

Context实现的核心代码示例：

import { createContext, useContext } from 'react'

// 定义Context类型与默认值
const ModelContext = createContext({
  currentModel: GLOBAL_DEFAULT_MODEL
})
// 导出可在子组件中调用的Hook
export const useCurrentModel = () => useContext(ModelContext)

// 在MyApp中用Provider包裹原有内容
const MyApp = ({ Component, pageProps }: CProps) => {
  const resolvedModel = Component.model ?? GLOBAL_DEFAULT_MODEL
  return (
    <ModelContext.Provider value={{ currentModel: resolvedModel }}>
      {/* 原有的包裹渲染逻辑保持不变 */}
      {resolvedModel === 'blue' ? (
        <Blue>
          <Component {...pageProps} />
        </Blue>
      ) : (
        <Component {...pageProps} />
      )}
    </ModelContext.Provider>
  )
}

配置完成后，任意业务组件中只需要调用const { currentModel } = useCurrentModel()即可获取当前页面生效的model值。

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