NextJS - 只为几个特定页面添加提供者

Question

是否可以只为特定路由添加提供程序，而不是在下一个 js 中转到我的整个应用程序？

my "pages" folder

我的上下文文件 [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;

我不想像下面那样将它传递到整个应用程序，而是想将它传递到我的仪表板路线

[_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

您可以使用 pages 文件夹中的文件来包装您的路线。

如果是静态文件，此文件将类似于 pages/server/index.js。

示例：

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: {
    //...
    },
  };
}

Next 和 ...props 取决于您使用 Next 的目的。如果你不需要处理任何东西（获取数据等），你可以忽略然后

NextJS - 只为几个特定页面添加提供者

NextJS - Add provider for only a few specific pages

reactjs

next.js

react-context