如何在 Next.js App Router 中使用全局提供程序

Question

如何在 Next.js App Router 中使用全局提供程序

F_M*_*ekk 6 javascript reactjs next.js

在 Next 的经典 Pages Router 中，您可以在_app.js文件中添加全局提供程序并将其包裹在整个组件树中。这将确保提供程序可供所有组件使用。

如果您使用 App Router 执行此操作，您会收到一条错误消息

您正在导入需要 useState 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

有没有一种方法可以在不放弃服务器组件的情况下实现类似的目标？

Answer 1

Jun*_*ark 5

将提供者包装在客户端组件中。

'use client';
 
import { SomeProvider } from 'some-library';
 
export function Providers({ children }) {
  return (
    <SomeProvider>
      {children}
    </SomeProvider>
  );
}

Run Code Online (Sandbox Code Playgroud)

并在根布局中使用这个包装的提供程序。

import { Providers } from './providers';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Run Code Online (Sandbox Code Playgroud)

值得注意的是，这是文档中的[推荐方法](https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components) (3认同)

Answer 2

小智 -2

// 在 _app.js 中使用上下文

// 用户.js

import { createContext, useState, useContext } from "react";

const Context = createContext();

const Provider = ({ children }) => {
  const [user, setUser] = useState(true);

  const exposed = {
    user,
  };

  return <Context.Provider value={exposed}>{children}</Context.Provider>;
};

export const useUser = () => useContext(Context);

export default Provider;

Run Code Online (Sandbox Code Playgroud)

// _app.js

import UserProvider from "../context/user";

function MyApp({ Component, pageProps }) {
    return (
        <UserProvider>
            <Component {...pageProps} />
        </UserProvider>
    );
}
export default MyApp;

Run Code Online (Sandbox Code Playgroud)

// 在任何像这样的组件中使用用户状态

import { useUser } from "../context/user";

export default function Home({ lessons }) {
  const { user } = useUser();
  console.log({ user });
  return (
    <div>
      
    </div>
  );
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	2 年，7 月前
查看次数：	7161 次
最近记录：	2 年，7 月前