title: NextJS - Add provider for only a few specific pages
body: <p>Is it possible for me to add a provider only for a specific route instead of going to my entire app in the next js?</p>
  <p><a href="https://i.stack.imgur.com/rdhUD.png" rel="nofollow noreferrer">my &quot;pages&quot; folder</a></p>
  <p>My context file [server.jsx]</p>
  <pre class="lang-js prettyprint-override"><code>import { createContext, useState } from 'react';
  
  const ServerContext = createContext({});
  
  export const ServerProvider = ({ children }) =&gt; {
      const [ data, setData] = useState(null);
      
      return (
          &lt;ServerContext.Provider value={{ data, setData }}&gt;
              {children}
          &lt;/ServerContext.Provider&gt;
      );
  };
  
  export default ServerContext;
  </code></pre>
  <p>And instead of passing it on to the entire app as below, I wanted to just pass it to my dashboard routes</p>
  <p>[_app.jsx]</p>
  <pre class="lang-js prettyprint-override"><code>import { Provider } from 'next-auth/client';
  import { ThemeProvider } from 'styled-components';
  
  import GlobalStyles from '@/styles/global';
  import theme from '@/styles/theme';
  
  import { ServerProvider } from '@/contexts/server';
  
  function MyApp({ Component, pageProps }) 
  {
      return (
          &lt;ThemeProvider theme={theme}&gt;
              &lt;Provider session={pageProps.session} &gt;
                  &lt;ServerProvider&gt;
                      &lt;Component {...pageProps} /&gt;
                      &lt;GlobalStyles /&gt;
                  &lt;/ServerProvider&gt;
              &lt;/Provider&gt;
          &lt;/ThemeProvider&gt;
      );
  }
  
  export default MyApp;
  </code></pre>