How can i pass a global state from layout.js/tsx file to routes on next.js 13

Question

in next.js 13, i want to pass my values to the routes from layout.js/tsx file with props. How can i do that without using useContext or useReducer? I want to make seperate back and front-end and intend to use next.js on front-end.

Leffa · Answer 1 · 2023-08-23T17:00:10.797

Create a folder theme and then create a file:

const ThemeContext = React.useContext()

export const ThemeProvider = ({children}) => {
    
// create the styles here like a
 const styles = {
     colors: {
       primaryColor: '#000'
      }
 }

    return(<ThemeContext.Provider value={styles}>{children}</ThemeContext>)
}

// this part avoid call useContext every time

export function useTheme() {
   const context = React.useContext(Theme)
   return context;
}

and in layout.tsx file (in app folder or page folder) add like this:

//imports here


export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <ThemeProvider>
         {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

and in any file you call the theme like this:

const { styles } = useTheme()

this code gives error. You don't export themeProvider but you use it. Please refactor. — Necoo33, Aug 23 '23 at 13:21

How can i pass a global state from layout.js/tsx file to routes on next.js 13

1 Answers1