title: how can injection dynamic html element to page with next.js?
body: <p>how can dynamic injection html element to page with next.js? that these elements Unknown type like(input, checkbox, img,...). this element specified with api that return json type like this:</p>
  
  <pre><code>[{
     "id":"rooms",
     "title":"Rooms",
     "order":1,
     "type":"string",
     "widget":"select",
     "data":[{
              "Id":18,
              "ParentId":null,
              "Title":"One",
              "Level":null,
              "Childrens":[]
             },
              {"Id":19,
              "ParentId":null,
              "Title":"Two",
              "Level":null,
              "Childrens":[]
             },
              {"Id":20,
              "ParentId":null,
              "Title":"Three",
              "Level":null,
              "Childrens":[]
             }]
  },
  {
     "id":"exchange",
     "title":"Exchange",
     "order":0,
     "type":"boolean",
     "widget":"checkbox",
     "data":[]
  }]
  </code></pre>
  
  <p>my try is:</p>
  
  <pre class="lang-js prettyprint-override"><code>Index.getInitialProps = async function({req, query}) {
  
      const res= await fetch('url api')
      var elements= await res.json() 
  
      var test = () =&gt; (
          &lt;div&gt;
              {...... convert json to html elements.......}
          &lt;/div&gt;
      )
  
      return {
          test
      }
  })
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function Index(props) {
     return(
        &lt;a&gt;
          {props.test}
        &lt;/a&gt;
     )
  }
  </code></pre>
  
  <p>result is null, mean nothing for presentation.</p>
  
  <p>the question is, Do I do the right thing? Is there a better way?</p>