NextJS - Add provider for only a few specific pages

Question

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={{ data, setData }}>
            {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;

Answer 1

You can use the files in pages folder to wrap your route.

This file would be something like pages/server/index.js, if is a static one.

Example:

import { ServerProvider } from "..."
import { ServerPageOrSomething } from "..."

export default function MyRoute({ ...props }) {
  return (
    <ServerProvider>
      // my components, like:
      <ServerPageOrSomething {...props} />
    </ServerProvider>
  )
}

//your Next stuff here
export async function getServerSideProps(props) {
// ...
  return {
    props: {
    //...
    },
  };
}

The Next stuff and the ...props depends in what you're using Next for. You can just ignore then if you don't need to process anything (get data, etc)