Global state in nextJS 14

Hey yall, I see that with the way Next.js and server components are heading, we're moving away from the days of wrapping your entire app in context providers and whatnot.

My question is, how do i get access to global state in Next.js without making my entire app client-side rendered?
I saw solutions like nextauth that also wrap your entire app in a provider - doesn't that make your app client-side rendered?
Am i missing something here? is there a way to have global state in my next app while also keeping the benefits of SSR?

Solution

You can pass server components as props to client components. So with a structure like this:

function Layout() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

function Layout() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

function Layout() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

function Layout() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

you can wrap you whole app in client component (provider) without losing the benefits of it's children server components.

Jump to solution

Global state in nextJS 14

Similar Threads

Similar Threads

Similar Threads