How to combine multiple getServerSideProps wrappers?

Question

I'm using two libraries in my NextJs app: next-firebase-auth and next-redux-wrapper. Both of them require me to wrap getServerSideProps with their respective functions.

For next-firebase-auth

export const getServerSideProps = withAuthUserSSR()(async ({ AuthUser }) => {
    // Some code
})

For next-redux-wrapper

export const getServerSideProps = wrapper.getServerSideProps(
    ({store}) => {
        // Some code
    }
);

Both work individually but I was unable to get the two working simultaneously. NextJs only allows getServerSideProps to be declared once. Is it possible to somehow combine multiple wrappers?

Answer 1

You can chain the wrappers one after the other. The inner function will contain the additional props passed by both of them.

export const getServerSideProps = withAuthUserSSR()(wrapper.getServerSideProps(
    ({ AuthUser, store, res, req }) => {
        // `getServerSideProps` code here
    }
))

---

From next-redux-wrapper v7, the wrapper.getServerSideProps signature has changed.

export const getServerSideProps = withAuthUserSSR()(wrapper.getServerSideProps(
    (store) => async ({ AuthUser, res, req }) => {
        // `getServerSideProps` code here
    }
))