24 replies

How to recreate 'global' props in app router?

One pattern that I use a lot that I'm not sure how to do in app router is accessing global props that were returned from getStaticProps in the root of the app.

An example of this is:

const MyApp: AppType<{
    session: Session | null;
    tenant: ServerPublic | undefined;
}> = ({ Component, pageProps: { session, ...pageProps } }) => {
        return (
        <TenantContextProvider value={pageProps.tenant}>...

const MyApp: AppType<{
    session: Session | null;
    tenant: ServerPublic | undefined;
}> = ({ Component, pageProps: { session, ...pageProps } }) => {
        return (
        <TenantContextProvider value={pageProps.tenant}>...

const MyApp: AppType<{
    session: Session | null;
    tenant: ServerPublic | undefined;
}> = ({ Component, pageProps: { session, ...pageProps } }) => {
        return (
        <TenantContextProvider value={pageProps.tenant}>...

const MyApp: AppType<{
    session: Session | null;
    tenant: ServerPublic | undefined;
}> = ({ Component, pageProps: { session, ...pageProps } }) => {
        return (
        <TenantContextProvider value={pageProps.tenant}>...

src: https://github.com/AnswerOverflow/AnswerOverflow/blob/main/apps/main-site/src/pages/_app.tsx

Then in child components, I have a hook like useIsOnTenantSite to apply custom styling depending on if it's on a custom domain - how do I recreate this in app router?

One idea I have is setting a global variable and using that global variable if we're on the server, otherwise using context if we're on the client. That feels hacky however.

How to recreate 'global' props in app router?

Similar Threads

Similar Threads

Similar Threads