In Next.js, how to use createContext/useContext properly?

[hydroperx]

Summary

In my library there are a few instances of createContext(), but since Next.js does SSR, it doesn't allow that React function to be called.

I've thus provided my own provider like this:

export const ThemeContext = typeof window !== "undefined" ? createContext<Theme>(light) : null;

export function ThemeProvider({
    theme,
    children,
} : {
    theme: Theme,
    children?: React.ReactNode,
}) {
    if (!ThemeContext) {
        return <>{children}</>;
    }

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

But when it comes to useContext(), I do useContext(ThemeContext!), which is, according to ChatGPT, wrong, since in SSR it's equivalent to useContext(null).

Also according to ChatGPT I can't do const theme = typeof window !== "undefined" ? useContext(ThemeContext) : default_value;. Any ideas for what I can do?

Basically I'm trying to make layout.tsx work without using the "use client" directive.

Additional information

No response

Example

No response

[oneminch]

According to the documentation page on the topic, you will need to mark providers as client components using use client. You don't need to use use client in your layout. Just import your theme provider and use it. I hope that answers your question.

Important

Wrapping a server component inside a client component doesn't automatically convert it into a client component.

// <ServerComponent /> is still a server component.
<ThemeProvider>
  <ServerComponent />
</ThemeProvider>

A server component is automatically converted to a client component when it is directly imported into a client component file.

"use client"
import ServerComponent from "./ServerComponent"
// ...

<ServerComponent /> // now a client component