Next.js: Sharing props to all pages from _document?

[vilvadot]

Hi!

I got everything working great after the answers to this issue #2635 . But now I have come to a roadblock.

So what I do is:

-Generate static HTML on a custom handler function in server.js
-Treat it to remove unnecesary stuff

and here I have two options

1. Send a request to my PDF generating service directly from the server (which works nicely)
2. Get the HTML to the frontend so I can do the request on the client.

I can attach the clean HTML to a cleanHTML key in the response object. In _document.js I have access to the "response" object, which is great.

But I can't manage to pass the "cleanHTML" prop from the _document to the page where I need to use it.

Is there any way to pass on a prop from the _document.js to any or all of the pages?

thanks!

[ericmai624]

Not sure if you have solved your problem, but have you tried Redux + Next-Redux-Wrapper? It works pretty well because all your props are in a single store and you can share it with any components or pages. Hope this helps.

[vilvadot]

Thanks for the tip. Will check it out!

[rashidul0405]

Can I do this without using Redux? @ericmai624

@albertovilva Would you like to share how did you solve this?

[timneutkens]

You can use React context by wrapping the App component in a higher order component, similar to what styled-components does: https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js#L7

If you attach something to req or res you can read it from getInitialProps.

[Vadorequest]

I am also wondering about moving all my redux/react-jss providers to the _document page, instead of repeating the redux in all pages. Is that a good idea? I'll give it a try.

[vilvadot]

@rashidul0405 Sorry for the late answer. Check https://github.com/zeit/next.js/issues/2635 to see my latest answer. Let me know if you have any doubts. I would eventually swap that for something like what @timneutkens suggests.

[rashidul0405]

@albertovilva Thanks, However, I did this utilizing window.__NEXT_DATA__ object.

[vilvadot]

@rashidul0405 Do you have an example of that? would love to check it out! 😁

[rashidul0405]

@albertovilva As below (pseudo code): [From HOC like withLayout(Page)]
@timneutkens would you please let me know is this future(at least near future) proof?

static async getInitialProps(context) {
    const isServer = !!context.req
    if (isServer) {
      categories = api.get("/categories")
    }
    else{
      categories = window.__NEXT_DATA__.props.categories
    }
}

[timneutkens]

If you're going to do caching on the client side, it's best to use your own object, not the one next uses.

[rashidul0405]

Ok, thanks for your comment