NextJS - 仅为几个特定页面添加提供程序

Posted 2023-04-14

【中文标题】NextJS - 仅为几个特定页面添加提供程序

【英文标题】：NextJS - Add provider for only a few specific pages

【发布时间】：2021-07-03 20:30:07

【问题描述】：

我是否可以只为特定路由添加提供程序，而不是在下一个 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;

【问题讨论】：

您使用路由作为pages 文件夹中的文件，对吗？我认为在那里你可以为你的页面创建一个包装器并使用上下文。

@JorgeKunrath，这对我来说看起来不错，你能解释一下吗？打扰了

【参考方案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 的目的。如果你不需要处理任何东西（获取数据等），你可以忽略它