Next.js: Alternative to using __NEXT_DATA__ in examples

[jhoffmcd]

Usage of __NEXT_DATA__ in examples.

Example name

https://github.com/zeit/next.js/tree/canary/examples/with-glamor
https://github.com/zeit/next.js/tree/canary/examples/with-glamorous
https://github.com/zeit/next.js/tree/canary/examples/with-emotion
https://github.com/zeit/next.js/tree/canary/examples/with-emotion-fiber
https://github.com/zeit/next.js/tree/canary/examples/with-aphrodite
https://github.com/zeit/next.js/tree/canary/examples/with-react-with-styles
https://github.com/zeit/next.js/tree/canary/examples/with-react-intl

Describe the bug

There are a number of examples that utilize __NEXT_DATA__. As I understand it, thats an internal variable that should probably not be used in the implementation of an application.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Just search GitHub : https://github.com/zeit/next.js/search?p=1&q=__NEXT_DATA__&unscoped_q=__NEXT_DATA__

Expected behavior

It seems that in each of these cases it's just used to add ids to the data object. If there is another, safer way to do this, we should show that way instead.

System information

• Version of Next.js: Canary

[istarkov]

react-intl example has a different case, to pass data from custom server into _app.js on client side. It uses internal implementation detail that result of _app getInitialProps is placed at __NEXT_DATA__.props

[jhoffmcd]

Ah yes I see. Still, if there is a better way to do this than rely on an internal "private" variable, I would like to try and find it.

[istarkov]

For react intl case it can be done using app.render on a server passing custom query param. So your data will be accessible via route query. For ids cases you can add script tag with your own serialization of ids at _document.js and then hydrate on a client.

[marbiano]

@jhoffmcd You probably don't care about this anymore, but I just sent a PR to fix it!

[jhoffmcd]

Ah I do still care @marbiano, awesome thanks for this.