Schema definition in NextJS - Mini Project: Build & Apply

Define a JSON-LD Schema in Next.js

📖 Scenario: You are building a simple Next.js website for a local bakery. You want to help search engines understand your site better by adding structured data using JSON-LD schema.

🎯 Goal: Create a JSON-LD schema object describing the bakery and add it to the Next.js page using a <script> tag with the correct type.

📋 What You'll Learn

Create a JavaScript object with bakery details following schema.org's Bakery type

Add a variable for bakery name, address, and opening hours

Convert the object to a JSON string

Insert the JSON-LD inside a <script type="application/ld+json"> tag in the Next.js page

💡 Why This Matters

🌍 Real World

Adding JSON-LD schema helps search engines understand your website content better, improving SEO and rich search results.

💼 Career

Web developers often add structured data to websites to improve visibility and accessibility in search engines.

1

Create the bakery data object

Create a constant called bakerySchema that is an object with these exact properties: @context set to "https://schema.org", @type set to "Bakery", name set to "Sweet Treats Bakery", and address set to an object with streetAddress as "123 Cookie Lane", addressLocality as "Caketown", and postalCode as "12345".

NextJS

# Your code here

Need a hint?

Use an object literal with nested objects for the address.

2

Add opening hours to the bakery schema

Add a property called openingHours to the bakerySchema object. Set it to an array with these exact strings: "Mo-Fr 08:00-18:00" and "Sa 09:00-14:00".

NextJS

const bakerySchema = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  name: "Sweet Treats Bakery",
  address: {
    streetAddress: "123 Cookie Lane",
    addressLocality: "Caketown",
    postalCode: "12345"
  },
  // Add openingHours property here
};

Need a hint?

Use an array of strings for the openingHours property.

3

Convert the bakery schema object to a JSON string

Create a constant called jsonLd and set it to the JSON string version of bakerySchema using JSON.stringify().

NextJS

const bakerySchema = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  name: "Sweet Treats Bakery",
  address: {
    streetAddress: "123 Cookie Lane",
    addressLocality: "Caketown",
    postalCode: "12345"
  },
  openingHours: ["Mo-Fr 08:00-18:00", "Sa 09:00-14:00"]
};

// Convert bakerySchema to JSON string

Need a hint?

Use JSON.stringify() to convert the object to a string.

4

Add the JSON-LD script tag to the Next.js page

In the default exported React component, return a fragment containing a <script> tag with type="application/ld+json" and the JSON-LD string inside using dangerouslySetInnerHTML with the key __html set to jsonLd.

NextJS

const bakerySchema = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  name: "Sweet Treats Bakery",
  address: {
    streetAddress: "123 Cookie Lane",
    addressLocality: "Caketown",
    postalCode: "12345"
  },
  openingHours: ["Mo-Fr 08:00-18:00", "Sa 09:00-14:00"]
};

const jsonLd = JSON.stringify(bakerySchema);

export default function Home() {
  // Return JSX with script tag here
}

Need a hint?

Use a React fragment and the dangerouslySetInnerHTML prop to insert the JSON-LD string.