Generate JSON-LD structured data for a product page in Next.js.

Use the JsonLdForProduct component to generate JSON-LD structured data for a product page in Next.js, including the name, description, and image.

Props

Name
name
Type
string
Required
required
Description
The name of the product.
Name
description
Type
string
Required
required
Description
The description of the product.
Name
image
Type
string
Required
required
Description
The URL of an image representing the product.

Usage

Add the file to your project

Copy the JsonLdForProduct.tsx or JsonLdForProduct.jsx file to your project.

Import the `JsonLdForProduct` component

Import the JsonLdForProduct component into every page where you want to generate the JSON-LD structured data.

src/app/page.tsx

import { JsonLdForProduct } from "@/components/JsonLdForProduct";

export default function Page() {
  return (
    <JsonLdForProduct
      name="Nova.js"
      description="A modern collection of dependency-free React hooks."
      image="https://novajs.dev/logo.png"
    />
  );
}