title: in next.js, Error: Objects are not valid as a React child (found: object with keys {})
body: <p>I use next.js with ssr,I got server error :</p>
  <p>Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
  <a href="https://i.stack.imgur.com/adEyd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/adEyd.png" alt="enter image description here" /></a></p>
  <p>and in my _document.js, my code like this:</p>
  <pre><code>import Document, { Html, Head, Main, NextScript } from 'next/document'
  import { ServerStyleSheet } from 'styled-components'
  
  export default class MyDocument extends Document {
  
    static async getInitialProps(ctx) {
      const sheet = new ServerStyleSheet()
      const originalRenderPage = ctx.renderPage
  
      try {
        ctx.renderPage = () =&gt;
          originalRenderPage({
            enhanceApp: App =&gt; props =&gt; sheet.collectStyles(&lt;App {...props} /&gt;),
          })
        const props = await Document.getInitialProps(ctx)
        return {
          ...props,
          styles: (
            &lt;&gt;
              {props.styles}
              {sheet.getStyleElement()}
            &lt;/&gt;
          ),
        }
      } finally {
        sheet.seal()
      }
    }
  
    // 如果要重写render 就必须按照这个结构来写
    render() {
      return (
        &lt;Html&gt;
          &lt;Head /&gt;
          &lt;body&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
          &lt;/body&gt;
        &lt;/Html&gt;
      )
    }
  }
  </code></pre>
  <p>how can I do...?</p>