Move __NEXT_DATA__ into an application/json script tag (#5584)

* Move __NEXT_DATA__ into a application/json script tag

As outlined by @dav-is here https://github.com/zeit/next.js/pull/4943

* Set __NEXT_DATA__ for backwards compatability

packages/next/client/index.js

@@ -19,18 +19,19 @@ if (!window.Promise) {
   window.Promise = Promise
 }
 
+const data = JSON.parse(document.getElementById('__NEXT_DATA__').textContent)
+window.__NEXT_DATA__ = data
+
 const {
-  __NEXT_DATA__: {
-    props,
-    err,
-    page,
-    query,
-    buildId,
-    assetPrefix,
-    runtimeConfig,
-    dynamicIds
-  }
-} = window
+  props,
+  err,
+  page,
+  query,
+  buildId,
+  assetPrefix,
+  runtimeConfig,
+  dynamicIds
+} = data
 
 const prefix = assetPrefix || ''
 

packages/next/pages/_document.js

@@ -186,8 +186,7 @@ export class NextScript extends Component {
 
   static getInlineScriptSource (documentProps) {
     const { __NEXT_DATA__ } = documentProps
-    const { page } = __NEXT_DATA__
-    return `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)};`
+    return htmlescape(__NEXT_DATA__)
   }
 
   render () {
@@ -197,7 +196,7 @@ export class NextScript extends Component {
 
     return <Fragment>
       {devFiles ? devFiles.map((file) => <script key={file} src={`${assetPrefix}/_next/${file}`} nonce={this.props.nonce} />) : null}
-      {staticMarkup ? null : <script nonce={this.props.nonce} dangerouslySetInnerHTML={{
+      {staticMarkup ? null : <script id="__NEXT_DATA__" type="application/json" nonce={this.props.nonce} dangerouslySetInnerHTML={{
         __html: NextScript.getInlineScriptSource(this.context._documentProps)
       }} />}
       {page !== '/_error' && <script async id={`__NEXT_PAGE__${page}`} src={`${assetPrefix}/_next/static/${buildId}/pages${pagePathname}`} nonce={this.props.nonce} />}