NextJS - Add provider for only a few specific pages

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?

my "pages" folder

My context file [server.jsx]

import { createContext, useState } from 'react';    const ServerContext = createContext({});    export const ServerProvider = ({ children }) => {      const [ data, setData] = useState(null);            return (          <ServerContext.Provider value=>              {children}          </ServerContext.Provider>      );  };    export default ServerContext;  

And instead of passing it on to the entire app as below, I wanted to just pass it to my dashboard routes

[_app.jsx]

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 (          <ThemeProvider theme={theme}>              <Provider session={pageProps.session} >                  <ServerProvider>                      <Component {...pageProps} />                      <GlobalStyles />                  </ServerProvider>              </Provider>          </ThemeProvider>      );  }    export default MyApp;  

https://stackoverflow.com/questions/66996039/nextjs-add-provider-for-only-a-few-specific-pages April 08, 2021 at 09:07AM