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

Use the JsonLdForBreadcrumb component to generate JSON-LD structured data for a breadcrumb page in Next.js.

Props

Name
itemList
Type
Array<Object>
Required
required
Description
The list of breadcrumb items.
Name
itemList[].name
Type
string
Required
required
Description
The name of the breadcrumb item.
Name
itemList[].item
Type
string
Required
required
Description
The URL of the breadcrumb item.

Usage

Add the file to your project

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

Import the `JsonLdForBreadcrumb` component

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

src/app/page.tsx

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

export default function Page() {
  return (
    <JsonLdForBreadcrumb
      itemList={[
        { name: "useArray", item: "https://novajs.dev/react-hook-array" },
        { name: "useAsync", item: "https://novajs.dev/react-hook-async" },
      ]}
    />
  );
}