Next js: next auth provider + redux provider

Question

在我的 Next js 项目中，我使用了 import {Provider} from 'next-auth/client' 的 Next auth，并将 <Component /> 包装在 _app.js 中。

但是同时，我想在项目中添加redux。它会 import {Provider} from 'react-redux'，并且还需要将 <Component /> 包装在 _app.js 中。

所以在这种情况下，他们使用的是相同的 Provider，我尝试过导入破坏，但它给我带来了语法错误 Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.。那我该怎么办呢？

import { Provider } from "next-auth/client";  
function MyApp({ Component, pageProps }) {
  return (
    <>
        <Provider
          options={{     
            clientMaxAge: 0,
            keepAlive: 0,
          }}
          session={pageProps.session}
        >
          <Component {...pageProps} />
        </Provider>
    </>
  );
}

Answer 1

您可以重命名解构的导入。所以你的代码可能看起来像这样：

import { Provider } from "next-auth/client";
import { Provider as ReduxProvider } from "react-redux";

function MyApp({ Component, pageProps }) {
  return (
    <ReduxProvider {/* whatever props go here */}>
        <Provider
          options={{     
            clientMaxAge: 0,
            keepAlive: 0,
          }}
          session={pageProps.session}
        >
          <Component {...pageProps} />
        </Provider>
    </>
  );
}

Next js: next auth provider + redux provider

Next js: next auth provider + redux provider

javascript

reactjs

redux

next.js

next-auth