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

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

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

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
}

Hint

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

Practice

1. What is the main purpose of schema definition in a Next.js project?

easy

A. To manage server-side rendering

B. To describe the shape and rules of your data

C. To style the user interface components

D. To handle routing between pages

Solution

1. Step 1: Understand schema definition role

   Schema definition is about specifying how data should look and behave.

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

   It helps validate data to catch errors early before using it in the app.

3. Final Answer:

   To describe the shape and rules of your data -> Option B

4. Quick Check:

   Schema = Data shape and rules [OK]

Hint: Schema defines data shape and validation rules [OK]

Common Mistakes:

• Confusing schema with UI styling
• Thinking schema manages routing
• Assuming schema handles rendering

2. Which of the following is the correct way to define a simple string schema using the zod library in Next.js?

easy

A. const schema = z.string();

B. const schema = z.string;

C. const schema = z.String();

D. const schema = new z.string();

Solution

1. Step 1: Recall zod syntax for string schema

   In zod, string schema is created by calling z.string() as a function.

2. Step 2: Check each option's syntax

   const schema = z.string(); uses z.string() correctly. Others miss parentheses or use wrong casing or new keyword.

3. Final Answer:

   const schema = z.string(); -> Option A

4. Quick Check:

   z.string() is correct syntax [OK]

Hint: Use parentheses to call z.string() function [OK]

Common Mistakes:

• Omitting parentheses after z.string
• Using uppercase 'String' instead of 'string'
• Using 'new' keyword incorrectly

3. Given this schema definition using zod:

const userSchema = z.object({
  name: z.string(),
  age: z.number().min(18)
});
const result = userSchema.safeParse({ name: "Alice", age: 16 });
console.log(result.success);

What will be logged to the console?

medium

A. true

B. Throws an error

C. false

D. undefined

Solution

1. Step 1: Understand schema rules

   The schema requires 'name' as string and 'age' as number at least 18.

2. Step 2: Check input data against schema

   Input has age 16, which is less than minimum 18, so validation fails.

3. Final Answer:

   false -> Option C

4. Quick Check:

   Validation fails because age < 18 [OK]

Hint: Check min() constraints carefully in validation [OK]

Common Mistakes:

• Assuming validation passes despite age < 18
• Confusing safeParse result with direct parse
• Expecting an error instead of false success

4. Identify the error in this Next.js schema definition using zod:

const productSchema = z.object({
  id: z.number,
  title: z.string(),
  price: z.number()
});

medium

A. Missing comma after 'title' property

B. Schema object should be an array

C. Using z.string() incorrectly

D. Missing parentheses after z.number for 'id'

Solution

1. Step 1: Check each property schema syntax

   'id' uses z.number without parentheses, which is incorrect syntax.

2. Step 2: Verify other properties and object structure

   Other properties are correct; object schema is correctly defined as an object, not array.

3. Final Answer:

   Missing parentheses after z.number for 'id' -> Option D

4. Quick Check:

   z.number() needs parentheses [OK]

Hint: Always call zod types as functions with () [OK]

Common Mistakes:

• Forgetting parentheses after z.number or z.string
• Thinking schema must be an array
• Missing commas between properties

5. You want to define a schema for a user profile in Next.js using zod where the 'email' field is optional but if present must be a valid email string. Which schema definition is correct?

hard

A. const userProfileSchema = z.object({ email: z.string().email().optional() });

B. const userProfileSchema = z.object({ email: z.optional(z.string().email) });

C. const userProfileSchema = z.object({ email: z.string().optional().email() });

D. const userProfileSchema = z.object({ email: z.string().email() || undefined });

Solution

1. Step 1: Understand optional email schema in zod

   To make a field optional but validate if present, use .optional() after .email().

2. Step 2: Check each option's method chaining

   const userProfileSchema = z.object({ email: z.string().email().optional() }); correctly chains z.string().email().optional(). const userProfileSchema = z.object({ email: z.optional(z.string().email) }); uses z.optional incorrectly. const userProfileSchema = z.object({ email: z.string().optional().email() }); calls optional before email, which breaks validation. const userProfileSchema = z.object({ email: z.string().email() || undefined }); uses invalid syntax.

3. Final Answer:

   const userProfileSchema = z.object({ email: z.string().email().optional() }); -> Option A

4. Quick Check:

   Use .optional() after .email() for optional validated fields [OK]

Hint: Chain .optional() after .email() for optional email fields [OK]

Common Mistakes:

• Placing .optional() before .email()
• Using z.optional() wrapper incorrectly
• Trying to use || undefined for optional