How to wrap _app.js within multiple providers?

All we need is an easy explanation of the problem, so here it is.

I was wondering if it’s possible and how to wrap my top level page _app.js within Redux provider considered I already wrapped it with Next-auth provider like:

import React from "react"
import { Provider } from 'next-auth/client'
import '../public/global.scss'

export default function App ({ Component, pageProps }) {
  return (
      <Provider
        options={{
          clientMaxAge: 0,
          keepAlive: 5 * 60
        }}
        session={pageProps.session} >
        <Component {...pageProps} />
      </Provider>
  )
}

The issue is that when I try to add also Redux <Provider .. it says Provider is already defined.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can rename the redux provider named import using as.

import React from "react"
import { Provider as NextAuthProvider } from 'next-auth/client'
import { Provider as ReduxProvider } from 'react-redux'
import '../public/global.scss'

export default function App ({ Component, pageProps }) {
    return (
        <ReduxProvider>
            <NextAuthProvider
                options={{
                    clientMaxAge: 0,
                    keepAlive: 5 * 60
                }}
                session={pageProps.session} >
                <Component {...pageProps} />
            </NextAuthProvider>
        </ReduxProvider>
    )
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply