[SOLVED] how can i use application/ld+json in nextjs

how can i use application/ld+json in nextjs

I have a Layout in next js and I use Head component . I want to use schema json but I have an error.

This is my code:

<Head>
        <script type="application/ld+json">
          {{
            "@context": "http://schema.org",
            "@type": "Person",
            address: {
              "@type": "PostalAddress",
              addressLocality: "Seattle",
              addressRegion: "WA",
              postalCode: "98052",
              streetAddress: "20341 Whitworth Institute 405 N. Whitworth"
            },
            colleague: [
              "http://www.xyz.edu/students/alicejones.html",
              "http://www.xyz.edu/students/bobsmith.html"
            ],
            email: "mailto:jane-doe@xyz.edu",
            image: "janedoe.jpg",
            jobTitle: "Professor",
            name: "Jane Doe",
            telephone: "(425) 123-4567",
            url: "http://www.janedoe.com"
          }}
        </script>
</Head>

and this is my error:

Objects are not valid as a React child (found: object with keys {@context, @type, address, colleague, email, image, jobTitle, name, telephone, url}). 

If you meant to render a collection of children, use an array instead. in script (at Layout.js:130) in head in Head (at _document.js:43) in html in Html (at _document.js:42) in MyDocument in Context.Provider in Context.Provider

Please help!

Solution

You need to use dangerouslySetInnerHTML in order to put your schema data.

<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
  />
</Head>