Challenge - 5 Problems

🎖️

JSON-LD Mastery in Next.js

Get all challenges correct to earn this badge!

Test your skills under time pressure!

❓ component_behavior

intermediate

2:00remaining

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>

Attempts:

2 left

📝 Syntax

intermediate

2:00remaining

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?

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

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

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

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

Attempts:

2 left

🔧 Debug

advanced

2:00remaining

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>
  );
}

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

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

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

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

Attempts:

2 left

🧠 Conceptual

advanced

1:30remaining

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?

ATo add interactive JavaScript features to the page.

BTo improve SEO by helping search engines understand page content better.

CTo style the page using CSS variables.

DTo load external scripts asynchronously.

Attempts:

2 left

❓ state_output

expert

2:30remaining

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>
    </>
  );
}

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

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

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

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

Attempts:

2 left