how can i use application/ld+json in nextjs

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

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

Based on the sample structured data snippet you provided. This should solve your problem.
However, if you intend to test your structured data snippet on google's rich result testing tool, you will need to use a generic script tag, put keys in double-quotes and exclude the dangerouslySetInnerHTML attribute.

<Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify({
                "@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:[email protected]",
                image: "janedoe.jpg",
                jobTitle: "Professor",
                name: "Jane Doe",
                telephone: "(425) 123-4567",
                url: "http://www.janedoe.com"
              })
           }}
      />
</Head>

Tags:

Reactjs

Next.Js

Recent Posts