CODEWITHSUNDEEP
javascriptreactjsnext.js
officialrajdeepsingh
officialrajdeepsingh

Reputation: 462

Objects are not valid as a React child Error in next js

I use the latest version next js inside my project. Recently I faced objects not valid as a react js child error.

object are not valid as a react js child

First import Head components are next js, and after I use SEO schema structure in the project, I face an error. Please guide me on how to resolve this issue. I also use {} in a script tag inside and outside, but not working for me.

 <Head>
  <title>Random color project </title>
        <meta
    name="description"
    content="Random Color tool help to genrate random color base on your click. every time when you click on button random color genrate a color  "
  />
 {/* rest code  */}

  {/* SEO Schema  structure code for search egine  */}  
  <script  type="application/ld+json">
    {

      "@context": "https://schema.org",
      "@type": "WebSite",
      image: ["https://avatars2.githubusercontent.com/u/32416397"],
      author: {
        "@type": "Person",
        name: "Rajdeep Singh"
      },
      ....
    }

  </script>

</Head>

Upvotes: 1

Views: 373

Answers (1)

Amila Senadheera
Amila Senadheera

Reputation: 13235

Try below instead of your script with the object.

<script type='application/ld+json' dangerouslySetInnerHTML={ { __html: `{

      "@context": "https://schema.org",
      "@type": "WebSite",
      image: ["https://avatars2.githubusercontent.com/u/32416397"],
      author: {
        "@type": "Person",
        name: "Rajdeep Singh"
      },
      ....
    }`}} 
/>

Upvotes: 3

Related Questions