Moving your context providers into _app.js prevents re-rendering of your context consuming components when navigating between pages in Next.js.

_app.js

import { ThemeProvider } from "theme-ui"
import theme from "../components/theme"
import { UserProvider } from "../components/context/UserContext"

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <UserProvider user={pageProps.user}>
        <Component {...pageProps} />
      </UserProvider>
    </ThemeProvider>
  )
}

export default MyApp