Issue with Next.js 13 and User Context not working outside _app.tsx

Question

I'm using Next.js 13 and using user context, but it doesn't work outside _app.tsx. Why is that?

src>context>UserPositionContext.tsx

import { createContext, useContext, useState } from "react";

const UserPositionContext = createContext({});

export const useUserPosition = () => {
  return useContext(UserPositionContext);
};

export const UserPositionProvider = ({ children }) => {
  const [userPosition, setUserPosition] = useState(0);
  return <UserPositionContext.Provider value={{ userPosition, setUserPosition }}>{children}</UserPositionContext.Provider>;
};

export default UserPositionProvider;

*src>pages>_app.tsx useContext can read if i declare here

import { ThemeProvider, DefaultTheme } from "styled-components";
import UserPositionProvider from "../context/UserPositionContext";

export default function App({ Component, pageProps }: AppProps) {
return (
  <\>
    <UserPositionProvider\>
      <ThemeProvider theme={theme}\>
        <Component {...pageProps} /\>
      </ThemeProvider\>
    </UserPositionProvider\>
  </\>
);
}

*src>pages>user.tsx useContext cannot read if I declare here

import UserComponent from "@/components/organism/UserNav";
import { useRouter } from "next/router";
import UserPositionProvider from "../context/UserPositionContext";

type Props = {};

const User = ({}: Props) =\> {
if (typeof window !== "undefined") {
  const router = useRouter();
  router.push("/user/profile");
}
return (
  <UserPositionProvider\>
    <UserComponent /\>
  </UserPositionProvider\>
);
};

export default User;

I have tried to test it with console.log, and if I put the provider in user.tsx file the error message "setUserPosition" is not defined. But if I put it back in _app.tsx it is working properly.

Answer 1

Add 'use client' at the top and it will work for sure.

I was stuck in this for the past 4 hours and weirdly this is the only thing that worked.