NextJSframework~30 mins

Structured data (JSON-LD) in NextJS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Structured data (JSON-LD) in Next.js

📖 Scenario: You are building a simple Next.js page for a local bakery. You want to add structured data using JSON-LD to help search engines understand your business details better.

🎯 Goal: Create a Next.js page that includes JSON-LD structured data for the bakery using a <script> tag inside the <head>. The structured data should describe the bakery's name, address, and opening hours.

📋 What You'll Learn

Create a Next.js page component named BakeryPage

Add a JSON-LD object describing the bakery with these exact details:

name: "Sweet Treats Bakery"

address: "123 Candy Lane, Sugar City, CA 90210"

openingHours: "Mo-Fr 08:00-18:00"

Insert the JSON-LD inside a <script type=\"application/ld+json\"> tag in the <head> using Next.js Head component

💡 Why This Matters

🌍 Real World

Structured data helps search engines understand your website content better, improving SEO and enabling rich search results.

💼 Career

Knowing how to add JSON-LD in Next.js is useful for frontend developers working on SEO optimization and enhancing website visibility.

Progress0 / 4 steps

Create the bakery data object

Create a constant called bakeryData with the following JSON-LD structure as a JavaScript object: @context set to "https://schema.org", @type set to "Bakery", name set to "Sweet Treats Bakery", address set to "123 Candy Lane, Sugar City, CA 90210", and openingHours set to "Mo-Fr 08:00-18:00".

NextJS

# Your code here
// Create bakeryData object with JSON-LD info

Need a hint?

Use a JavaScript object with keys exactly as shown. Use double quotes for JSON keys and string values.

Import Next.js Head component

Add an import statement at the top of the file to import Head from next/head.

NextJS

const bakeryData = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  "name": "Sweet Treats Bakery",
  "address": "123 Candy Lane, Sugar City, CA 90210",
  "openingHours": "Mo-Fr 08:00-18:00"
};

// Import Head from next/head
# Your code here

Need a hint?

Use the exact import syntax: import Head from "next/head";

Create the BakeryPage component with JSON-LD script

Create a React functional component called BakeryPage that returns a fragment containing a <Head> component. Inside <Head>, add a <script> tag with type="application/ld+json" and set its content to the stringified bakeryData object using JSON.stringify(bakeryData).

NextJS

import Head from "next/head";

const bakeryData = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  "name": "Sweet Treats Bakery",
  "address": "123 Candy Lane, Sugar City, CA 90210",
  "openingHours": "Mo-Fr 08:00-18:00"
};

// Create BakeryPage component with Head and JSON-LD script
# Your code here

Need a hint?

Use dangerouslySetInnerHTML to insert JSON-LD inside the <script> tag in React.

Add a simple page heading inside the component

Inside the BakeryPage component's fragment, below the <Head> tag, add an <h1> element with the text "Welcome to Sweet Treats Bakery".

NextJS

import Head from "next/head";

const bakeryData = {
  "@context": "https://schema.org",
  "@type": "Bakery",
  "name": "Sweet Treats Bakery",
  "address": "123 Candy Lane, Sugar City, CA 90210",
  "openingHours": "Mo-Fr 08:00-18:00"
};

export default function BakeryPage() {
  return (
    
      
        
      
      {/* Add heading below */}
      # Your code here
    
  );
}

Need a hint?

Place the <h1> inside the fragment but outside the <Head> tag.