Add JSON LD schema with NextJS in these 2 steps.

We recently upgraded the NextJS version for our CMS portal at Storeplum and decided to add structured data for each page.

Found a npm library but it was kind of outdated. After a lot of searching, I found that the solution was fairly straightforward.

All I did was added the schema definition into a script tag as below-

1. Get your schema definition -

let schema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "example.com/articleURL"
  },
  "headline": "Article title",
  "image": [
    spContent.metaData.twitterCard
   ],
  "datePublished": spContent.created_at,
  "dateModified": spContent.metaData.articleModifiedTime,
  "author": [{
      "@type": "Person",
      "name": "Json Bourne",
      "url": "example.com/jbourne"
    }],
  "publisher": {
      "@type": "Organization",
      "name": "abc",
      "logo": {
        "@type": "ImageObject",
        "url": "example.com/image"
      }
    },
  "description": "some description"

};

1. Put your data string inside a script tag as below

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

That's all! You can verify your changes once you deploy using this tool by Google.