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.

Requirements

Before using the file, make sure your project meets the following requirements:

• Next.js 13.0.0 or higher
• Next.js App Router

Props

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.

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" },
      ]}
    />
  );
}