Next js: next auth provider + redux provider

Question

In my Next js project, I have used Next auth, which import {Provider} from 'next-auth/client', and wrap the <Component /> in _app.js.

However, at the same time, I want to add redux in the project. And it will import {Provider} from 'react-redux', and need to wrap the <Component /> in _app.js also.

So in this situation, they are using the same Provider, I have tried import destructing, but it got me a synatx error Syntax error: ES2015 named imports do not destructure. Use another statement for destructuring after the import.. So how can I do?

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

You can rename destructured imports. So your code may look something like this:

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>
    </>
  );
}