How to use context provider when using layout in next js

context with nextjs

// src/pages/_app.js
+ import { AppWrapper } from '../context/AppContext'; // import based on where you put it

export default function Application({ Component, pageProps }) {
  return (
+    <AppWrapper>
      <Component {...pageProps} />
+    </AppWrapper>
  )
}

export default Application