Sign in
Skip to solution
mediumFrontend

What is JSON-LD structured data and how do you add it in Next.js?

549 views
01

Understand the problem

Embedding schema.org data for rich results.

nextjsjson-ldstructured-dataseo
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

JSON-LD is schema.org structured data that helps search engines understand your content (articles, products, FAQs) and show rich results. In Next.js you render a

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Article JSON-LD in a Server Component
export default async function Post({ params }) {
  const post = await getPost((await params).slug);
  const ld = {
    '@context': 'https://schema.org', '@type': 'Article',
    headline: post.title, datePublished: post.date, author: { '@type': 'Person', name: post.author },
  };
  return (
    <>
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <article>{post.title}</article>
    </>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 53 of 95 decoded in the Next.js track. One more won't hurt.

Back to track