Structured data (JSON-LD) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Next.js component render in the HTML head?

Consider this Next.js component that adds JSON-LD structured data to the page.

import Head from 'next/head';

export default function ProductSchema() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Coffee Mug",
    "image": "https://example.com/mug.jpg",
    "description": "A nice coffee mug",
    "sku": "12345"
  };

  return (
    <Head>
      <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
    </Head>
  );
}

What will be the rendered output inside the <head> tag in the browser?

NextJS

import Head from 'next/head';

export default function ProductSchema() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Coffee Mug",
    "image": "https://example.com/mug.jpg",
    "description": "A nice coffee mug",
    "sku": "12345"
  };

  return (
    <Head>
      <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
    </Head>
  );
}

A <script type="application/ld+json">{"@context":"https://schema.org","@type":"Product","name":"Coffee Mug","image":"https://example.com/mug.jpg","description":"A nice coffee mug","sku":"12345"}</script>

B <script type="application/ld+json">[object Object]</script>

C <script type="application/ld+json">{name: "Coffee Mug", sku: "12345"}</script>

D <script>JSON.stringify({"@context":"https://schema.org"})</script>

💡 Hint

Remember that JSON.stringify converts an object to a JSON string.

The component uses JSON.stringify to convert the JavaScript object into a JSON string. This string is then placed inside the <script> tag with type "application/ld+json". This is the correct way to embed JSON-LD structured data in the HTML head.

📝 Syntax

intermediate

Which option correctly embeds JSON-LD in a Next.js component?

Which of the following Next.js component snippets correctly embeds JSON-LD structured data?

A return (<Head><script type="application/ld+json">{JSON.stringify({"@context": "https://schema.org"})}</script></Head>);

B return (<Head><script type="application/ld+json">JSON.stringify({"@context": "https://schema.org"})</script></Head>);

C return (<Head><script type="application/ld+json">{"@context":"https://schema.org"}</script></Head>);

D return (<Head><script type="application/ld+json">{'@context': 'https://schema.org'}</script></Head>);

💡 Hint

Check how JavaScript objects are converted to strings inside JSX.

Option A uses JSON.stringify to convert the object to a JSON string inside JSX curly braces, which is the correct way. Option A tries to put an object literal directly, which is invalid JSX. Option A puts the function call as a string, not evaluated. Option A uses single quotes and object literal syntax inside JSX, which is invalid.

🔧 Debug

advanced

Why does this JSON-LD script cause a runtime error in Next.js?

Given this Next.js component:

import Head from 'next/head';

export default function Schema() {
  const data = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Alice",
    "birthDate": new Date("1990-01-01")
  };

  return (
    <Head>
      <script type="application/ld+json">{JSON.stringify(data)}</script>
    </Head>
  );
}

Why might this cause a problem when the page renders?

NextJS

import Head from 'next/head';

export default function Schema() {
  const data = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Alice",
    "birthDate": new Date("1990-01-01")
  };

  return (
    <Head>
      <script type="application/ld+json">{JSON.stringify(data)}</script>
    </Head>
  );
}

A JSON.stringify throws a TypeError because Date objects cannot be serialized directly.

B Next.js does not allow script tags inside Head component, causing a runtime error.

C The birthDate property is serialized as an ISO string, so no error occurs.

D The JSON-LD script is ignored by browsers, so no error occurs.

💡 Hint

Check how JSON.stringify handles Date objects.

JSON.stringify converts Date objects to ISO string format automatically. So the birthDate will be serialized as a string like "1990-01-01T00:00:00.000Z". This does not cause an error.

🧠 Conceptual

advanced

What is the main purpose of embedding JSON-LD in a Next.js page?

Why do developers add JSON-LD structured data inside the <Head> of Next.js pages?

A To add interactive JavaScript features to the page.

B To improve SEO by helping search engines understand page content better.

C To style the page using CSS variables.

D To load external scripts asynchronously.

💡 Hint

Think about what structured data is used for in web pages.

JSON-LD provides structured data that search engines use to better understand the content, improving SEO and enabling rich search results. It does not add interactivity, styling, or script loading.

❓ state_output

expert

What is the output of this Next.js component with dynamic JSON-LD?

Given this Next.js component that updates JSON-LD based on state:

import { useState, useEffect } from 'react';
import Head from 'next/head';

export default function DynamicSchema() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": `Event number ${count}`
  };

  return (
    <>
      <Head>
        <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
      </Head>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Current count: {count}</p>
    </>
  );
}

What will happen to the JSON-LD script tag content as the count changes?

NextJS

import { useState, useEffect } from 'react';
import Head from 'next/head';

export default function DynamicSchema() {
  const [count, setCount] = useState(1);

  useEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": `Event number ${count}`
  };

  return (
    <>
      <Head>
        <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
      </Head>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Current count: {count}</p>
    </>
  );
}

A The JSON-LD script tag is removed after the first update and not replaced.

B The JSON-LD script tag is static and never updates after the first render.

C Next.js throws an error because Head cannot contain dynamic script content.

D The JSON-LD script tag updates every second and on button clicks to reflect the current count in the event name.

💡 Hint

Consider how React state and effects update component output.

The component uses state and effects to update the count every second and on button clicks. The JSON-LD script content is generated from the current count, so it updates dynamically in the head tag accordingly.

Practice

1. What is the main purpose of adding JSON-LD structured data in a Next.js page?

easy

A. To improve server response time

B. To help search engines understand the page content better

C. To add interactive animations to the page

D. To style the page with custom CSS

Solution

1. Step 1: Understand JSON-LD role

   JSON-LD is a format for structured data that helps search engines understand the content of a webpage.

2. Step 2: Identify its use in Next.js

   In Next.js, JSON-LD is used to improve SEO by providing clear data to search engines, not for styling or animations.

3. Final Answer:

   To help search engines understand the page content better -> Option B

4. Quick Check:

   JSON-LD purpose = SEO improvement [OK]

Hint: JSON-LD is for SEO, not styling or animations [OK]

Common Mistakes:

• Confusing JSON-LD with CSS or JavaScript animations
• Thinking JSON-LD speeds up server response
• Assuming JSON-LD changes page appearance

2. Which is the correct way to include JSON-LD structured data in a Next.js component?

easy

A.

B.

C.

D.

Solution

1. Step 1: Use Next.js Script component

   Next.js provides the Script component from next/script to safely add scripts including JSON-LD.

2. Step 2: Use dangerouslySetInnerHTML correctly

   JSON-LD must be added as a string inside dangerouslySetInnerHTML to avoid React escaping it.

3. Final Answer:

   <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} /> -> Option C

4. Quick Check:

   Use Next.js Script + dangerouslySetInnerHTML [OK]

Hint: Use Next.js Script with dangerouslySetInnerHTML for JSON-LD [OK]

Common Mistakes:

• Using lowercase <script> tag directly in JSX
• Not using dangerouslySetInnerHTML for JSON-LD
• Forgetting to import Script from next/script

3. Given this Next.js code snippet, what will be the rendered output in the HTML?

import Script from 'next/script';

const data = {"@context": "https://schema.org", "@type": "Person", "name": "Alice"};

export default function Page() {
  return (
    <>
      <h1>Profile</h1>
      <Script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />
    </>
  );
}

medium

A. Profile

B. Profile

C. Profile

D. Profile

Solution

1. Step 1: Understand Script output

   The Next.js Script component renders a <script> tag with the specified type and inner HTML.

2. Step 2: Check JSON-LD content

   The JSON-LD data is stringified and inserted as raw JSON inside the script tag with type application/ld+json.

3. Final Answer:

   <h1>Profile</h1><script type="application/ld+json">{"@context":"https://schema.org","@type":"Person","name":"Alice"}</script> -> Option D

4. Quick Check:

   JSON-LD script tag with stringified data [OK]

Hint: JSON-LD renders as script with type and stringified JSON [OK]

Common Mistakes:

• Using wrong script type attribute
• Rendering JSON object instead of string
• Placing JSON inside curly braces in HTML output

4. What is wrong with this Next.js code for adding JSON-LD?

import Script from 'next/script';

const data = {"@context": "https://schema.org", "@type": "Organization", "name": "My Company"};

export default function Home() {
  return (
    <Script type="application/ld+json">{JSON.stringify(data)}</Script>
  );
}

medium

A. Using <Script> without dangerouslySetInnerHTML causes JSON to render as text, not script content

B. Missing import of React causes error

C. JSON.stringify should not be used inside Script

D. Script component must be self-closing

Solution

1. Step 1: Check Script usage

   The Script component requires dangerouslySetInnerHTML to insert raw JSON-LD content inside the script tag.

2. Step 2: Identify the error

   Passing JSON string as children renders it as text inside the script tag, which is invalid for JSON-LD.

3. Final Answer:

   Using <Script> without dangerouslySetInnerHTML causes JSON to render as text, not script content -> Option A

4. Quick Check:

   Use dangerouslySetInnerHTML for JSON-LD scripts [OK]

Hint: Always use dangerouslySetInnerHTML for JSON-LD in Script [OK]

Common Mistakes:

• Passing JSON as children instead of dangerouslySetInnerHTML
• Forgetting to stringify JSON data
• Assuming Script auto-inserts raw JSON

5. You want to add multiple JSON-LD scripts for different entities on a Next.js page. Which approach correctly adds two JSON-LD scripts safely?

hard

A. Use two <Script> components each with type="application/ld+json" and dangerouslySetInnerHTML containing separate JSON objects

B. Combine both JSON objects into one and add a single <Script> with dangerouslySetInnerHTML

C. Add one <Script> with an array of JSON objects inside dangerouslySetInnerHTML

D. Add JSON-LD as inline JavaScript variables inside a single <Script> tag

Solution

1. Step 1: Understand JSON-LD script requirements

   Each JSON-LD script tag should contain a single JSON object describing one entity for clarity and correctness.

2. Step 2: Use multiple Script components

   In Next.js, you can safely add multiple Script components each with their own JSON-LD data using dangerouslySetInnerHTML.

3. Final Answer:

   Use two <Script> components each with type="application/ld+json" and dangerouslySetInnerHTML containing separate JSON objects -> Option A

4. Quick Check:

   Multiple Script tags with separate JSON-LD objects [OK]

Hint: Use separate Script tags for each JSON-LD object [OK]

Common Mistakes:

• Putting multiple JSON objects in one script tag without array
• Using arrays inside JSON-LD script which is invalid
• Embedding JSON-LD as JS variables instead of script content