Estoy tratando de crear una variable global con la que todos los componentes se representan de forma predeterminada y establecer ese valor predeterminado, pero no estoy seguro de cómo hacer la segunda parte. Esto es lo que tengo hasta ahora en mi _app.tsx :
import { AppProps } from "next/app"; import type { NextComponentType } from 'next' import Blue from "../components/blue"; type CProps = AppProps & { Component: NextComponentType & {model?: string } }; const MyApp = ({ Component, pageProps: { ...pageProps }, }: CProps) => { return ( <> {Component.model === 'blue' ? ( <Blue> <Component {...pageProps} /> </Blue> ) : ( <Component {...pageProps} /> )} </> ); }; Pero esto obviamente no me da un valor predeterminado para el model . Simplemente crea esa variable con valor nulo para todos los componentes. ¿Cómo configuro el valor?
Pregunta secundaria: ¿Es mejor hacerlo usando React Context?
Edición 1: así es como el componente establece el valor del modelo si no quiere usar el valor predeterminado:
const ComponentFoo = () => { return ( <>Test</> ); }; ComponentFoo.model = 'red' export default ComponentFoo;Esto suena como un buen candidato para los diseños de Next.js. Tendría que componer un componente de Layout , similar a Blue en su ejemplo, que acepta un accesorio de color y encapsula la lógica de reproducción de color en el archivo de diseño. Puede implementar una ruta de renderización predeterminada si no se proporciona ningún accesorio de color .
Entonces puedes usarlo así:
// pages/whatever.tsx import type { ReactElement } from 'react' import Layout from '../components/layout' export default function Page() { return { /** Your content */ } } Page.getLayout = function getLayout(page: ReactElement) { return ( <Layout color="blue"> {page} </Layout> ) }https://nextjs.org/docs/basic-features/layouts#with-typescript