Outrank
Get traffic and outrank competitors with Backlinks & SEO-optimized content while you sleep! I've been keeping a close eye on this new tool and it seems to be gaining a lot of traction and delivering great results. Try it now!
Have you seen the new Next.js newsletter?
Next SEO
!npm
!npm version
!TypeScript
!License
Next SEO is a plugin that makes managing your SEO easier in Next.js projects. It provides components for structured data (JSON-LD) that helps search engines understand your content better.
📋 Table of Contents
_Looking for v6 documentation? View Here_
_Still using component in Pages? View docs here [/src/pages/README.md]_
🚀 Quick Start
$3
``bash
npm install next-seo
or
yarn add next-seo
or
pnpm add next-seo
or
bun add next-seo
`
$3
`tsx
import { ArticleJsonLd } from "next-seo";
export default function BlogPost() {
return (
<>
headline="Getting Started with Next SEO"
datePublished="2024-01-01T08:00:00+00:00"
author="John Doe"
image="https://example.com/article-image.jpg"
description="Learn how to improve your Next.js SEO"
/>
Getting Started with Next SEO
{/ Your content /}
);
}
`
> Note: For standard meta tags (,
<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">), use Next.js's built-in <a href="https://nextjs.org/docs/app/api-reference/functions/generate-metadata" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>generateMetadata<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a> function.</p><p class="my-3">> <strong>Pages Router Support</strong>: If you're using Next.js Pages Router, import components from </code>next-seo/pages<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. See the <a href="./src/pages/README.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Pages Router documentation</a> for details.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Support This Project</h2></p><p class="my-3"><strong>Feel like supporting this free plugin?</strong></p><p class="my-3">It takes a lot of time to maintain an open source project so any small contribution is greatly appreciated.</p><p class="my-3">Coffee fuels coding ☕️</p><p class="my-3"><a href="https://www.buymeacoffee.com/garmeeh" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Components</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>ArticleJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for articles, blog posts, and news articles to improve their appearance in search results.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { ArticleJsonLd } from "next-seo";</p><p class="my-3">export default function ArticlePage() {<br /> return (<br /> <><br /> <ArticleJsonLd<br /> headline="My Amazing Article"<br /> datePublished="2024-01-01T08:00:00+08:00"<br /> author="John Doe"<br /> image="https://example.com/article-image.jpg"<br /> description="This article explains amazing things about Next.js SEO"<br /> /><br /> <article><br /> <h1>My Amazing Article</h1><br /> {/<em> Article content </em>/}<br /> </article><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Advanced Example with Multiple Authors</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ArticleJsonLd<br /> type="NewsArticle"<br /> headline="Breaking: Next SEO v7 Released"<br /> url="https://example.com/news/next-seo-v7"<br /> datePublished="2024-01-01T08:00:00+08:00"<br /> dateModified="2024-01-02T10:00:00+08:00"<br /> author={[<br /> {<br /> "@type": "Person",<br /> name: "Jane Smith",<br /> url: "https://example.com/authors/jane",<br /> },<br /> "John Doe", // Can mix objects and strings<br /> ]}<br /> image={[<br /> "https://example.com/images/16x9.jpg",<br /> "https://example.com/images/4x3.jpg",<br /> "https://example.com/images/1x1.jpg",<br /> ]}<br /> publisher={{<br /> "@type": "Organization",<br /> name: "Example News",<br /> logo: "https://example.com/logo.png",<br /> }}<br /> isAccessibleForFree={true}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Blog Posting Example</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ArticleJsonLd<br /> type="BlogPosting"<br /> headline="10 Tips for Better SEO"<br /> url="https://example.com/blog/seo-tips"<br /> datePublished="2024-01-01T08:00:00+08:00"<br /> author={{<br /> "@type": "Organization",<br /> name: "SEO Experts Inc.",<br /> url: "https://example.com",<br /> }}<br /> image={{<br /> "@type": "ImageObject",<br /> url: "https://example.com/blog-hero.jpg",<br /> width: 1200,<br /> height: 630,<br /> caption: "SEO Tips Illustration",<br /> }}<br /> description="Learn the top 10 tips to improve your website's SEO"<br /> mainEntityOfPage={{<br /> "@type": "WebPage",<br /> "@id": "https://example.com/blog/seo-tips",<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| --------------------- | ------------------------------------------------------- | -------------------------------------------------------- |<br />| </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"Article" \| "NewsArticle" \| "BlogPosting" \| "Blog"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The type of article. Defaults to "Article" |<br />| </code>headline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> The headline of the article |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The canonical URL of the article |<br />| </code>author<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| Person \| Organization \| Author[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The author(s) of the article |<br />| </code>datePublished<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 date when the article was published |<br />| </code>dateModified<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 date when the article was last modified |<br />| </code>image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| ImageObject \| (string \| ImageObject)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Article images. Google recommends multiple aspect ratios |<br />| </code>publisher<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Organization<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The publisher of the article |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A short description of the article |<br />| </code>isAccessibleForFree<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the article is accessible for free |<br />| </code>mainEntityOfPage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| WebPage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Indicates the article is the primary content of the page |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key prop for React |</p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>Always include images</strong>: Google strongly recommends including high-resolution images with multiple aspect ratios (16x9, 4x3, 1x1)<br />2. <strong>Use ISO 8601 dates</strong>: Include timezone information for accuracy<br />3. <strong>Multiple authors</strong>: List all authors when applicable<br />4. <strong>Publisher logo</strong>: Include a logo for NewsArticle type<br />5. <strong>Update dateModified</strong>: Keep this current when updating content</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>ClaimReviewJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for fact-checking articles that review claims made by others. This enables a summarized version of your fact check to display in Google Search results.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { ClaimReviewJsonLd } from "next-seo";</p><p class="my-3">export default function FactCheckPage() {<br /> return (<br /> <><br /> <ClaimReviewJsonLd<br /> claimReviewed="The world is flat"<br /> reviewRating={{<br /> ratingValue: 1,<br /> bestRating: 5,<br /> worstRating: 1,<br /> alternateName: "False",<br /> }}<br /> url="https://example.com/fact-check/flat-earth"<br /> author="Fact Check Team"<br /> /><br /> <article><br /> <h1>Fact Check: The World is Flat</h1><br /> {/<em> Your fact check content </em>/}<br /> </article><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| --------------- | ---------------------------------- | ------------------------------------------------------------------------------------- |<br />| </code>claimReviewed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> A short summary of the claim being evaluated (keep under 75 characters) |<br />| </code>reviewRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> The assessment of the claim with rating value and textual rating |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> Link to the page hosting the full fact check article |<br />| </code>author<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| Organization \| Person<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The publisher of the fact check article |<br />| </code>itemReviewed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Claim<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Detailed information about the claim being reviewed |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key for script identification |</p><p class="my-3">#### Review Rating Properties</p><p class="my-3">| Property | Type | Description |<br />| --------------- | -------- | ------------------------------------------------------------------------------------------- |<br />| </code>alternateName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> The truthfulness rating as human-readable text (e.g., "False", "Mostly true") |<br />| </code>ratingValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> Numeric rating (closer to bestRating = more true) |<br />| </code>bestRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Best value in the rating scale (must be greater than worstRating) |<br />| </code>worstRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Worst value in the rating scale (minimum value of 1) |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Alternative to alternateName (use alternateName instead) |</p><p class="my-3">#### Advanced Example with Claim Details</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ClaimReviewJsonLd<br /> claimReviewed="Climate change is not real"<br /> reviewRating={{<br /> ratingValue: 1,<br /> bestRating: 5,<br /> worstRating: 1,<br /> alternateName: "Pants on Fire",<br /> }}<br /> url="https://example.com/fact-check/climate-denial"<br /> author={{<br /> name: "Climate Facts Organization",<br /> url: "https://example.com",<br /> logo: "https://example.com/logo.jpg",<br /> }}<br /> itemReviewed={{<br /> author: {<br /> name: "Climate Denial Institute",<br /> sameAs: "https://climatedenial.example.com",<br /> },<br /> datePublished: "2024-06-20",<br /> appearance: {<br /> url: "https://example.com/original-claim",<br /> headline: "The Great Climate Hoax",<br /> datePublished: "2024-06-22",<br /> author: "John Doe",<br /> publisher: {<br /> name: "Denial News",<br /> logo: "https://example.com/denial-logo.jpg",<br /> },<br /> },<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>Clear ratings</strong>: Use descriptive alternateName values that clearly indicate the verdict<br />2. <strong>Claim summary</strong>: Keep claimReviewed concise (under 75 characters) to prevent wrapping<br />3. <strong>Full context</strong>: Include itemReviewed when possible to provide claim origin details<br />4. <strong>Consistent scale</strong>: Use a consistent rating scale across all your fact checks<br />5. <strong>Author credibility</strong>: Clearly identify your fact-checking organization</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>CreativeWorkJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for various types of creative content, with special support for marking paywalled or subscription-based content. This enables Google to differentiate paywalled content from cloaking practices.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { CreativeWorkJsonLd } from "next-seo";</p><p class="my-3">export default function ArticlePage() {<br /> return (<br /> <><br /> <CreativeWorkJsonLd<br /> type="Article"<br /> headline="Premium Article"<br /> datePublished="2024-01-01T08:00:00+08:00"<br /> author="John Doe"<br /> description="This premium article requires a subscription"<br /> isAccessibleForFree={false}<br /> hasPart={{<br /> isAccessibleForFree: false,<br /> cssSelector: ".paywall",<br /> }}<br /> /><br /> <article><br /> <h1>Premium Article</h1><br /> <div className="non-paywall">Free preview content here...</div><br /> <div className="paywall"><br /> Premium content that requires subscription...<br /> </div><br /> </article><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| --------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |<br />| </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"CreativeWork" \| "Article" \| "NewsArticle" \| "Blog" \| "BlogPosting" \| "Comment" \| ...<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The type of creative work. Defaults to "CreativeWork" |<br />| </code>headline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The headline of the content (used for Article types) |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The name of the content (alternative to headline) |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | URL of the content |<br />| </code>author<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| Person \| Organization \| Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Author(s) of the content |<br />| </code>datePublished<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 publication date |<br />| </code>dateModified<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 modification date |<br />| </code>image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| ImageObject \| Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Image(s) associated with the content |<br />| </code>publisher<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| Organization \| Person<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Publisher of the content |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Description of the content |<br />| </code>isAccessibleForFree<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the content is free or requires payment/subscription |<br />| </code>hasPart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>WebPageElement \| WebPageElement[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Marks specific sections as paywalled |<br />| </code>mainEntityOfPage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| WebPage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The main page for this content |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key for script identification |</p><p class="my-3">#### WebPageElement Properties (for hasPart)</p><p class="my-3">| Property | Type | Description |<br />| --------------------- | --------- | --------------------------------------------------- |<br />| </code>isAccessibleForFree<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> Whether this section is free (false) |<br />| </code>cssSelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> CSS class selector (e.g., ".paywall") |</p><p class="my-3">#### Marking Paywalled Content</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><CreativeWorkJsonLd<br /> type="NewsArticle"<br /> headline="Breaking News: Premium Coverage"<br /> datePublished="2024-01-01T08:00:00+00:00"<br /> isAccessibleForFree={false}<br /> hasPart={{<br /> isAccessibleForFree: false,<br /> cssSelector: ".premium-content",<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Multiple Paywalled Sections</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><CreativeWorkJsonLd<br /> type="Article"<br /> headline="In-Depth Analysis"<br /> datePublished="2024-01-01T08:00:00+00:00"<br /> isAccessibleForFree={false}<br /> hasPart={[<br /> {<br /> isAccessibleForFree: false,<br /> cssSelector: ".section1",<br /> },<br /> {<br /> isAccessibleForFree: false,<br /> cssSelector: ".section2",<br /> },<br /> ]}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Different CreativeWork Types</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />// Blog with subscription content<br /><CreativeWorkJsonLd<br /> type="Blog"<br /> name="Premium Tech Blog"<br /> description="Technology insights for subscribers"<br /> isAccessibleForFree={false}<br />/></p><p class="my-3">// Comment<br /><CreativeWorkJsonLd<br /> type="Comment"<br /> text="Great article!"<br /> author="Jane Smith"<br /> datePublished="2024-01-01T10:00:00+00:00"<br />/></p><p class="my-3">// Course with provider<br /><CreativeWorkJsonLd<br /> type="Course"<br /> name="Advanced Programming"<br /> provider="Tech University"<br /> description="Learn advanced programming concepts"<br /> isAccessibleForFree={false}<br />/></p><p class="my-3">// Review with rating<br /><CreativeWorkJsonLd<br /> type="Review"<br /> name="Product Review"<br /> itemReviewed="Amazing Gadget"<br /> reviewRating={{<br /> ratingValue: 4.5,<br /> bestRating: 5,<br /> }}<br /> author="Tech Reviewer"<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>Use specific types</strong>: Choose the most specific CreativeWork type (Article, NewsArticle, etc.) when applicable<br />2. <strong>Mark paywalled sections</strong>: Use </code>hasPart<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with </code>cssSelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to identify paywalled content sections<br />3. <strong>Class selectors only</strong>: Only use class selectors (e.g., ".paywall") for </code>cssSelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, not IDs or other selectors<br />4. <strong>Consistent selectors</strong>: Ensure your HTML classes match the </code>cssSelector<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> values exactly<br />5. <strong>Complete metadata</strong>: Include as much metadata as possible (author, dates, images) for better search results</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>RecipeJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for recipes to improve their appearance in search results with rich snippets that can include ratings, cooking times, and images.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { RecipeJsonLd } from "next-seo";</p><p class="my-3">export default function RecipePage() {<br /> return (<br /> <><br /> <RecipeJsonLd<br /> name="Simple Chocolate Chip Cookies"<br /> image="https://example.com/cookies.jpg"<br /> description="Classic chocolate chip cookies that are crispy on the outside and chewy on the inside"<br /> author="Baker Jane"<br /> datePublished="2024-01-01T08:00:00+00:00"<br /> prepTime="PT20M"<br /> cookTime="PT12M"<br /> totalTime="PT32M"<br /> recipeYield="24 cookies"<br /> recipeCategory="dessert"<br /> recipeCuisine="American"<br /> recipeIngredient={[<br /> "2 1/4 cups all-purpose flour",<br /> "1 cup butter, softened",<br /> "3/4 cup granulated sugar",<br /> "3/4 cup packed brown sugar",<br /> "2 large eggs",<br /> "2 teaspoons vanilla extract",<br /> "1 teaspoon baking soda",<br /> "1 teaspoon salt",<br /> "2 cups chocolate chips",<br /> ]}<br /> recipeInstructions={[<br /> "Preheat oven to 375°F (190°C)",<br /> "Mix flour, baking soda, and salt in a bowl",<br /> "In another bowl, cream butter and sugars until fluffy",<br /> "Beat in eggs and vanilla",<br /> "Gradually blend in flour mixture",<br /> "Stir in chocolate chips",<br /> "Drop by rounded tablespoons onto ungreased cookie sheets",<br /> "Bake for 9 to 11 minutes or until golden brown",<br /> ]}<br /> /><br /> <article><br /> <h1>Simple Chocolate Chip Cookies</h1><br /> {/<em> Recipe content </em>/}<br /> </article><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Advanced Example with Structured Instructions and Nutrition</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><RecipeJsonLd<br /> name="Gourmet Lasagna"<br /> image={[<br /> "https://example.com/lasagna-16x9.jpg",<br /> "https://example.com/lasagna-4x3.jpg",<br /> "https://example.com/lasagna-1x1.jpg",<br /> ]}<br /> description="A rich and hearty lasagna with layers of meat sauce, cheese, and pasta"<br /> author={{<br /> "@type": "Organization",<br /> name: "The Italian Kitchen",<br /> url: "https://example.com",<br /> }}<br /> datePublished="2024-01-15T10:00:00+00:00"<br /> url="https://example.com/recipes/gourmet-lasagna"<br /> prepTime="PT45M"<br /> cookTime="PT1H"<br /> totalTime="PT1H45M"<br /> recipeYield={8}<br /> recipeCategory="main course"<br /> recipeCuisine="Italian"<br /> keywords="lasagna, italian, pasta, cheese"<br /> recipeIngredient={[<br /> "1 pound ground beef",<br /> "1 onion, chopped",<br /> "2 cloves garlic, minced",<br /> "1 can (28 oz) crushed tomatoes",<br /> "2 cans (6 oz each) tomato paste",<br /> "16 oz ricotta cheese",<br /> "1 egg",<br /> "12 lasagna noodles",<br /> "16 oz mozzarella cheese, shredded",<br /> ]}<br /> recipeInstructions={[<br /> {<br /> "@type": "HowToStep",<br /> name: "Prepare the meat sauce",<br /> text: "Brown ground beef with onion and garlic. Add tomatoes and tomato paste. Simmer for 30 minutes.",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> name: "Prepare cheese mixture",<br /> text: "Mix ricotta cheese with egg and half of the mozzarella",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> name: "Assemble lasagna",<br /> text: "Layer meat sauce, noodles, and cheese mixture in a 9x13 pan. Repeat layers.",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> name: "Bake",<br /> text: "Cover with foil and bake at 375°F for 45 minutes. Remove foil, add remaining mozzarella, and bake 15 more minutes.",<br /> },<br /> ]}<br /> nutrition={{<br /> "@type": "NutritionInformation",<br /> calories: "450 calories",<br /> proteinContent: "28g",<br /> carbohydrateContent: "35g",<br /> fatContent: "22g",<br /> saturatedFatContent: "10g",<br /> sodiumContent: "680mg",<br /> fiberContent: "3g",<br /> servingSize: "1 piece (1/8 of recipe)",<br /> }}<br /> aggregateRating={{<br /> "@type": "AggregateRating",<br /> ratingValue: 4.7,<br /> ratingCount: 234,<br /> reviewCount: 189,<br /> }}<br /> video={{<br /> "@type": "VideoObject",<br /> name: "How to Make Gourmet Lasagna",<br /> description: "Watch our chef prepare this delicious lasagna step by step",<br /> thumbnailUrl: "https://example.com/lasagna-video-thumb.jpg",<br /> contentUrl: "https://example.com/videos/lasagna-tutorial.mp4",<br /> embedUrl: "https://example.com/embed/lasagna-tutorial",<br /> uploadDate: "2024-01-10T08:00:00+00:00",<br /> duration: "PT8M30S",<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| -------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> The name of the dish |<br />| </code>image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| ImageObject \| (string \| ImageObject)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> Images of the completed dish. Google recommends multiple high-resolution images |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A short summary describing the dish |<br />| </code>author<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| Person \| Organization<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The creator of the recipe |<br />| </code>datePublished<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 date when the recipe was published |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The canonical URL of the recipe page |<br />| </code>prepTime<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 duration for preparation time (e.g., "PT30M" for 30 minutes) |<br />| </code>cookTime<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 duration for cooking time |<br />| </code>totalTime<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 duration for total time (prep + cook) |<br />| </code>recipeYield<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The quantity produced (e.g., "4 servings", "1 loaf", or just 6) |<br />| </code>recipeCategory<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The type of meal or course (e.g., "dessert", "main course") |<br />| </code>recipeCuisine<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The cuisine of the recipe (e.g., "French", "Mexican") |<br />| </code>recipeIngredient<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | List of ingredients with quantities |<br />| </code>recipeInstructions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| HowToStep \| HowToSection \| (string \| HowToStep \| HowToSection)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Step-by-step instructions |<br />| </code>nutrition<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>NutritionInformation<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Nutritional information per serving |<br />| </code>aggregateRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>AggregateRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The aggregate rating from users |<br />| </code>video<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>VideoObject<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A video showing how to make the recipe |<br />| </code>keywords<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Keywords about the recipe, separated by commas |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key prop for React |</p><p class="my-3">#### Duration Format (ISO 8601)</p><p class="my-3">Use these formats for time durations:</p><p class="my-3">- </code>PT15M<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 15 minutes<br />- </code>PT1H<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 1 hour<br />- </code>PT1H30M<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 1 hour 30 minutes<br />- </code>PT2H15M<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 2 hours 15 minutes</p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>High-quality images</strong>: Include multiple high-resolution images (16x9, 4x3, 1x1 aspect ratios)<br />2. <strong>Detailed instructions</strong>: Use HowToStep objects for better structured data<br />3. <strong>Complete nutrition info</strong>: Include nutrition data when possible for better search visibility<br />4. <strong>Accurate times</strong>: Always provide prepTime and cookTime together<br />5. <strong>Ratings</strong>: Include aggregateRating when you have user reviews<br />6. <strong>Video content</strong>: Adding a video significantly improves search appearance</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>HowToJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for how-to guides and tutorials. This can help your content appear as rich results with step-by-step instructions in search results.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { HowToJsonLd } from "next-seo";</p><p class="my-3">export default function HowToPage() {<br /> return (<br /> <><br /> <HowToJsonLd<br /> name="How to Change a Flat Tire"<br /> description="Step-by-step instructions for safely changing a flat tire"<br /> image="https://example.com/tire-change.jpg"<br /> totalTime="PT30M"<br /> estimatedCost="$20"<br /> supply={["Spare tire", "Wheel wedges"]}<br /> tool={["Lug wrench", "Jack"]}<br /> step={[<br /> "Turn on hazard lights and apply wheel wedges",<br /> "Remove the hubcap and loosen lug nuts",<br /> "Position jack and raise the vehicle",<br /> "Remove flat tire and mount spare",<br /> "Lower vehicle and tighten lug nuts",<br /> ]}<br /> /><br /> <article><br /> <h1>How to Change a Flat Tire</h1><br /> {/<em> Guide content </em>/}<br /> </article><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Advanced Example with Sections and Detailed Steps</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><HowToJsonLd<br /> name="How to Change a Flat Tire"<br /> description="Complete guide to safely changing a flat tire on the roadside"<br /> image={{<br /> url: "https://example.com/tire-change-guide.jpg",<br /> width: 1200,<br /> height: 800,<br /> }}<br /> estimatedCost={{<br /> currency: "USD",<br /> value: 20,<br /> }}<br /> prepTime="PT5M"<br /> performTime="PT25M"<br /> totalTime="PT30M"<br /> yield="1 changed tire"<br /> tool={[<br /> {<br /> name: "Spare tire",<br /> },<br /> {<br /> name: "Lug wrench",<br /> image: "https://example.com/lug-wrench.jpg",<br /> },<br /> {<br /> name: "Jack",<br /> },<br /> {<br /> name: "Wheel wedges",<br /> image: "https://example.com/wheel-wedges.jpg",<br /> },<br /> ]}<br /> supply={[<br /> {<br /> name: "Flares",<br /> image: "https://example.com/flares.jpg",<br /> },<br /> ]}<br /> step={[<br /> {<br /> "@type": "HowToSection",<br /> name: "Preparation",<br /> position: 1,<br /> itemListElement: [<br /> {<br /> "@type": "HowToStep",<br /> position: 1,<br /> itemListElement: [<br /> {<br /> "@type": "HowToDirection",<br /> position: 1,<br /> text: "Turn on your hazard lights and set the flares.",<br /> },<br /> {<br /> "@type": "HowToTip",<br /> position: 2,<br /> text: "You're going to need space and want to be visible.",<br /> },<br /> ],<br /> },<br /> {<br /> "@type": "HowToStep",<br /> position: 2,<br /> itemListElement: [<br /> {<br /> "@type": "HowToDirection",<br /> position: 1,<br /> text: "Position wheel wedges in front of front tires if rear tire is flat, or behind rear tires if front tire is flat.",<br /> },<br /> {<br /> "@type": "HowToTip",<br /> position: 2,<br /> text: "You don't want the car to move while you're working on it.",<br /> },<br /> ],<br /> },<br /> ],<br /> },<br /> {<br /> "@type": "HowToSection",<br /> name: "Raise the Car",<br /> position: 2,<br /> itemListElement: [<br /> {<br /> "@type": "HowToStep",<br /> position: 1,<br /> text: "Position the jack underneath the car, next to the flat tire.",<br /> image: "https://example.com/position-jack.jpg",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> position: 2,<br /> text: "Raise the jack until the flat tire is just barely off of the ground.",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> position: 3,<br /> text: "Remove the hubcap and loosen the lug nuts.",<br /> },<br /> ],<br /> },<br /> {<br /> "@type": "HowToSection",<br /> name: "Finishing Up",<br /> position: 3,<br /> itemListElement: [<br /> {<br /> "@type": "HowToStep",<br /> position: 1,<br /> text: "Lower the jack and tighten the lug nuts with the wrench.",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> position: 2,<br /> text: "Replace the hubcap.",<br /> },<br /> {<br /> "@type": "HowToStep",<br /> position: 3,<br /> text: "Put the equipment and the flat tire away.",<br /> },<br /> ],<br /> },<br /> ]}<br /> video={{<br /> name: "How to Change a Tire Video Tutorial",<br /> description: "Watch our mechanic demonstrate the proper technique",<br /> thumbnailUrl: "https://example.com/video-thumb.jpg",<br /> contentUrl: "https://example.com/tire-change-video.mp4",<br /> uploadDate: "2024-01-15T08:00:00+00:00",<br /> duration: "PT8M",<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| --------------- | ---------------------------------------------------- | ------------------------------------------------------------------------- |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> The title of the how-to guide |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A brief description of the guide |<br />| </code>image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| ImageObject<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | An image of the completed task or project |<br />| </code>estimatedCost<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| MonetaryAmount<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The estimated cost of supplies (e.g., "$20" or MonetaryAmount object) |<br />| </code>prepTime<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 duration for preparation time |<br />| </code>performTime<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 duration for the time to perform the instructions |<br />| </code>totalTime<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 duration for total time (prep + perform) |<br />| </code>yield<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| QuantitativeValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The result of performing the instructions (e.g., "1 birdhouse") |<br />| </code>supply<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| HowToSupply \| (string \| HowToSupply)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Supplies consumed when performing the task |<br />| </code>tool<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| HowToTool \| (string \| HowToTool)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tools used but not consumed |<br />| </code>step<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| HowToStep \| HowToSection \| (Step)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The steps to complete the task. Can be simple strings, steps, or sections |<br />| </code>video<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>VideoObject<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A video showing how to complete the task |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key prop for React |</p><p class="my-3">#### Step Types</p><p class="my-3"><strong>HowToStep</strong> - A single step in the guide:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />{<br /> "@type": "HowToStep",<br /> name: "Step Name", // Optional step title<br /> text: "Step instructions", // The instruction text<br /> url: "https://...", // Optional URL for more details<br /> image: "https://...", // Optional step image<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>HowToSection</strong> - A group of related steps:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />{<br /> "@type": "HowToSection",<br /> name: "Section Name",<br /> position: 1,<br /> itemListElement: [<br /> { "@type": "HowToStep", text: "First step" },<br /> { "@type": "HowToStep", text: "Second step" },<br /> ]<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>HowToDirection</strong> and <strong>HowToTip</strong> - For detailed step content:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />{<br /> "@type": "HowToStep",<br /> itemListElement: [<br /> {<br /> "@type": "HowToDirection",<br /> text: "Do this specific action",<br /> beforeMedia: "https://example.com/before.jpg",<br /> afterMedia: "https://example.com/after.jpg",<br /> },<br /> {<br /> "@type": "HowToTip",<br /> text: "Here's a helpful tip",<br /> }<br /> ]<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Duration Format (ISO 8601)</p><p class="my-3">Use these formats for time durations:</p><p class="my-3">- </code>PT15M<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 15 minutes<br />- </code>PT1H<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 1 hour<br />- </code>PT1H30M<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 1 hour 30 minutes<br />- </code>PT2H15M<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - 2 hours 15 minutes</p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>Clear steps</strong>: Write concise, actionable step instructions<br />2. <strong>Include images</strong>: Add images for complex steps to improve clarity<br />3. <strong>Separate sections</strong>: Use HowToSection to group related steps logically<br />4. <strong>Accurate timing</strong>: Provide realistic time estimates for each phase<br />5. <strong>List all materials</strong>: Include all supplies and tools needed upfront<br />6. <strong>Add video</strong>: Video content significantly improves search appearance</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>OrganizationJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data about your organization to improve how it appears in search results and knowledge panels.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { OrganizationJsonLd } from "next-seo";</p><p class="my-3">export default function AboutPage() {<br /> return (<br /> <><br /> <OrganizationJsonLd<br /> name="Example Corporation"<br /> url="https://www.example.com"<br /> logo="https://www.example.com/logo.png"<br /> description="The example corporation is well-known for producing high-quality widgets"<br /> sameAs={[<br /> "https://twitter.com/example",<br /> "https://facebook.com/example",<br /> "https://linkedin.com/company/example",<br /> ]}<br /> /><br /> <div><br /> <h1>About Example Corporation</h1><br /> {/<em> About page content </em>/}<br /> </div><br /> </><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Advanced Example with Address and Contact</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><OrganizationJsonLd<br /> type="Organization"<br /> name="Example Corporation"<br /> url="https://www.example.com"<br /> logo={{<br /> "@type": "ImageObject",<br /> url: "https://www.example.com/logo.png",<br /> width: 600,<br /> height: 400,<br /> }}<br /> description="Leading provider of innovative widget solutions"<br /> sameAs={[<br /> "https://example.net/profile/example1234",<br /> "https://example.org/example1234",<br /> ]}<br /> address={{<br /> "@type": "PostalAddress",<br /> streetAddress: "999 W Example St Suite 99",<br /> addressLocality: "New York",<br /> addressRegion: "NY",<br /> postalCode: "10019",<br /> addressCountry: "US",<br /> }}<br /> contactPoint={{<br /> "@type": "ContactPoint",<br /> contactType: "Customer Service",<br /> telephone: "+1-999-999-9999",<br /> email: "support@example.com",<br /> }}<br /> telephone="+1-999-999-9999"<br /> email="contact@example.com"<br /> foundingDate="2010-01-01"<br /> vatID="FR12345678901"<br /> iso6523Code="0199:724500PMK2A2M1SQQ228"<br /> numberOfEmployees={{<br /> minValue: 100,<br /> maxValue: 999,<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### OnlineStore Example with Return Policy</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><OrganizationJsonLd<br /> type="OnlineStore"<br /> name="Example Online Store"<br /> url="https://www.example.com"<br /> logo="https://www.example.com/assets/logo.png"<br /> contactPoint={{<br /> "@type": "ContactPoint",<br /> contactType: "Customer Service",<br /> email: "support@example.com",<br /> telephone: "+47-99-999-9900",<br /> }}<br /> vatID="FR12345678901"<br /> iso6523Code="0199:724500PMK2A2M1SQQ228"<br /> hasMerchantReturnPolicy={{<br /> "@type": "MerchantReturnPolicy",<br /> applicableCountry: ["FR", "CH"],<br /> returnPolicyCountry: "FR",<br /> returnPolicyCategory: "https://schema.org/MerchantReturnFiniteReturnWindow",<br /> merchantReturnDays: 60,<br /> returnMethod: "https://schema.org/ReturnByMail",<br /> returnFees: "https://schema.org/FreeReturn",<br /> refundType: "https://schema.org/FullRefund",<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| ------------------------- | -------------------------------------------------------- | ------------------------------------------------------- |<br />| </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>"Organization" \| "OnlineStore"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The type of organization. Defaults to "Organization" |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The name of your organization |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The URL of your organization's website |<br />| </code>logo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| ImageObject<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Your organization's logo (112x112px minimum) |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | A detailed description of your organization |<br />| </code>sameAs<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | URLs of your organization's profiles on other sites |<br />| </code>address<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| PostalAddress \| (string \| PostalAddress)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Physical or mailing address(es) |<br />| </code>contactPoint<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>ContactPoint \| ContactPoint[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Contact information for your organization |<br />| </code>telephone<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Primary phone number (include country code) |<br />| </code>email<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Primary email address |<br />| </code>alternateName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Alternative name your organization goes by |<br />| </code>foundingDate<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 8601 date when the organization was founded |<br />| </code>legalName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Registered legal name if different from name |<br />| </code>taxID<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Tax ID associated with your organization |<br />| </code>vatID<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | VAT code (important trust signal) |<br />| </code>duns<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Dun & Bradstreet DUNS number |<br />| </code>leiCode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Legal Entity Identifier (ISO 17442) |<br />| </code>naics<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | North American Industry Classification System code |<br />| </code>globalLocationNumber<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | GS1 Global Location Number |<br />| </code>iso6523Code<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ISO 6523 identifier (e.g., "0199:724500PMK2A2M1SQQ228") |<br />| </code>numberOfEmployees<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number \| QuantitativeValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Number of employees or range |<br />| </code>hasMerchantReturnPolicy<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>MerchantReturnPolicy \| MerchantReturnPolicy[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Return policy details (OnlineStore only) |<br />| </code>hasMemberProgram<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>MemberProgram \| MemberProgram[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Loyalty/membership program details (OnlineStore only) |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key prop for React |</p><p class="my-3">#### OnlineStore with Loyalty Program Example</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><OrganizationJsonLd<br /> type="OnlineStore"<br /> name="Example Store"<br /> url="https://www.example.com"<br /> hasMemberProgram={{<br /> name: "Rewards Plus",<br /> description:<br /> "Earn points and unlock exclusive benefits with our loyalty program",<br /> url: "https://www.example.com/rewards",<br /> hasTiers: [<br /> {<br /> name: "Bronze",<br /> hasTierBenefit: "TierBenefitLoyaltyPoints",<br /> membershipPointsEarned: 1,<br /> },<br /> {<br /> name: "Silver",<br /> hasTierBenefit: ["TierBenefitLoyaltyPoints"],<br /> hasTierRequirement: {<br /> value: 500,<br /> currency: "USD",<br /> },<br /> membershipPointsEarned: 2,<br /> },<br /> {<br /> name: "Gold",<br /> hasTierBenefit: ["TierBenefitLoyaltyPoints", "TierBenefitLoyaltyPrice"],<br /> hasTierRequirement: {<br /> name: "Example Gold Credit Card",<br /> },<br /> membershipPointsEarned: 5,<br /> url: "https://www.example.com/rewards/gold",<br /> },<br /> ],<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Multiple Loyalty Programs Example</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><OrganizationJsonLd<br /> type="OnlineStore"<br /> name="Premium Store"<br /> hasMemberProgram={[<br /> {<br /> name: "Basic Rewards",<br /> description: "Standard loyalty program for all customers",<br /> hasTiers: {<br /> name: "Member",<br /> hasTierBenefit: "TierBenefitLoyaltyPoints",<br /> membershipPointsEarned: 1,<br /> },<br /> },<br /> {<br /> name: "VIP Elite",<br /> description: "Exclusive program for premium members",<br /> hasTiers: [<br /> {<br /> name: "Silver VIP",<br /> hasTierBenefit: [<br /> "TierBenefitLoyaltyPoints",<br /> "TierBenefitLoyaltyPrice",<br /> ],<br /> hasTierRequirement: {<br /> value: 2500,<br /> currency: "USD",<br /> },<br /> membershipPointsEarned: {<br /> value: 10,<br /> unitText: "points per dollar",<br /> },<br /> },<br /> {<br /> name: "Gold VIP",<br /> hasTierBenefit: [<br /> "TierBenefitLoyaltyPoints",<br /> "TierBenefitLoyaltyPrice",<br /> ],<br /> hasTierRequirement: {<br /> price: 9.99,<br /> priceCurrency: "USD",<br /> billingDuration: 12,<br /> billingIncrement: 1,<br /> unitCode: "MON",<br /> },<br /> membershipPointsEarned: 20,<br /> },<br /> ],<br /> },<br /> ]}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### MemberProgram Properties</p><p class="my-3">| Property | Type | Description |<br />| ------------- | ------------------------------------------ | --------------------------------------------- |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong>. Name of the loyalty program |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong>. Description of program benefits |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | URL where customers can sign up |<br />| </code>hasTiers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>MemberProgramTier \| MemberProgramTier[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong>. Tier(s) of the loyalty program |</p><p class="my-3">#### MemberProgramTier Properties</p><p class="my-3">| Property | Type | Description |<br />| ------------------------ | ----------------------------- | ------------------------------------ |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong>. Name of the tier |<br />| </code>hasTierBenefit<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong>. Benefits for this tier |<br />| </code>hasTierRequirement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>various<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (see below) | Requirements to join this tier |<br />| </code>membershipPointsEarned<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number \| QuantitativeValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Points earned per unit spent |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | URL for tier-specific signup |<br />| </code>@id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Unique identifier for the tier |</p><p class="my-3">#### Tier Benefits</p><p class="my-3">Benefits can be specified using short names or full URLs:</p><p class="my-3">- </code>"TierBenefitLoyaltyPoints"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>"https://schema.org/TierBenefitLoyaltyPoints"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Earn loyalty points<br />- </code>"TierBenefitLoyaltyPrice"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>"https://schema.org/TierBenefitLoyaltyPrice"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Special member pricing</p><p class="my-3">#### Tier Requirements</p><p class="my-3">The </code>hasTierRequirement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property accepts different types based on the requirement:</p><p class="my-3"><strong>Credit Card Requirement:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />hasTierRequirement: {<br /> name: "Store Premium Credit Card";<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Minimum Spending Requirement (MonetaryAmount):</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />hasTierRequirement: {<br /> value: 1000,<br /> currency: "USD"<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Subscription Fee (UnitPriceSpecification):</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />hasTierRequirement: {<br /> price: 9.99,<br /> priceCurrency: "EUR",<br /> billingDuration: 12, // Total duration<br /> billingIncrement: 1, // Billing frequency<br /> unitCode: "MON" // Unit (MON = monthly)<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Text Description:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />hasTierRequirement: "By invitation only - must maintain $10,000+ annual spending";<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Membership Points Earned</p><p class="my-3">Points can be specified as a simple number or as a detailed QuantitativeValue:</p><p class="my-3"><strong>Simple:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />membershipPointsEarned: 5;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Detailed:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />membershipPointsEarned: {<br /> value: 10,<br /> minValue: 10,<br /> maxValue: 20,<br /> unitText: "points per dollar (double on special events)"<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>Place on homepage or about page</strong>: Add this markup to your homepage or a dedicated "about us" page<br />2. <strong>Use specific subtypes</strong>: Use "OnlineStore" for e-commerce sites rather than generic "Organization"<br />3. <strong>Include identifiers</strong>: Add VAT ID, ISO codes, and other identifiers for better trust signals<br />4. <strong>Complete address information</strong>: Provide full address details including country code<br />5. <strong>Multiple locations</strong>: Use array format for addresses if you have multiple locations<br />6. <strong>High-quality logo</strong>: Use a logo that looks good on white background, minimum 112x112px</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>LocalBusinessJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for local businesses to improve their appearance in Google Search and Maps results, including knowledge panels and local business carousels.</p><p class="my-3">#### Basic Usage</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { LocalBusinessJsonLd } from "next-seo";</p><p class="my-3"><LocalBusinessJsonLd<br /> type="Restaurant"<br /> name="Dave's Steak House"<br /> address={{<br /> "@type": "PostalAddress",<br /> streetAddress: "148 W 51st St",<br /> addressLocality: "New York",<br /> addressRegion: "NY",<br /> postalCode: "10019",<br /> addressCountry: "US",<br /> }}<br /> telephone="+12125551234"<br /> url="https://www.example.com"<br /> priceRange="$$$"<br />/>;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Restaurant Example with Full Details</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><LocalBusinessJsonLd<br /> type="Restaurant"<br /> name="Dave's Steak House"<br /> address={{<br /> "@type": "PostalAddress",<br /> streetAddress: "148 W 51st St",<br /> addressLocality: "New York",<br /> addressRegion: "NY",<br /> postalCode: "10019",<br /> addressCountry: "US",<br /> }}<br /> geo={{<br /> "@type": "GeoCoordinates",<br /> latitude: 40.761293,<br /> longitude: -73.982294,<br /> }}<br /> url="https://www.example.com/restaurant-locations/manhattan"<br /> telephone="+12122459600"<br /> image={[<br /> "https://example.com/photos/1x1/photo.jpg",<br /> "https://example.com/photos/4x3/photo.jpg",<br /> "https://example.com/photos/16x9/photo.jpg",<br /> ]}<br /> servesCuisine="American"<br /> priceRange="$$$"<br /> openingHoursSpecification={[<br /> {<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],<br /> opens: "11:30",<br /> closes: "22:00",<br /> },<br /> {<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: "Saturday",<br /> opens: "16:00",<br /> closes: "23:00",<br /> },<br /> {<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: "Sunday",<br /> opens: "16:00",<br /> closes: "22:00",<br /> },<br /> ]}<br /> menu="https://www.example.com/menu"<br /> aggregateRating={{<br /> "@type": "AggregateRating",<br /> ratingValue: 4.5,<br /> ratingCount: 250,<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Store with Departments</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><LocalBusinessJsonLd<br /> type="Store"<br /> name="Dave's Department Store"<br /> address={{<br /> "@type": "PostalAddress",<br /> streetAddress: "1600 Saratoga Ave",<br /> addressLocality: "San Jose",<br /> addressRegion: "CA",<br /> postalCode: "95129",<br /> addressCountry: "US",<br /> }}<br /> telephone="+14088717984"<br /> department={[<br /> {<br /> type: "Pharmacy",<br /> name: "Dave's Pharmacy",<br /> address: "1600 Saratoga Ave, San Jose, CA 95129",<br /> telephone: "+14088719385",<br /> openingHoursSpecification: {<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],<br /> opens: "09:00",<br /> closes: "19:00",<br /> },<br /> },<br /> ]}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| --------------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------- |<br />| </code>type<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Business type (e.g., "Restaurant", "Store", or ["Restaurant", "BarOrPub"]) |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> The name of the business |<br />| </code>address<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| PostalAddress \| (string \| PostalAddress)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required.</strong> Physical location(s) of the business |<br />| </code>url<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The fully-qualified URL of the business location page |<br />| </code>telephone<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Primary contact phone number (include country code) |<br />| </code>image<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| ImageObject \| (string \| ImageObject)[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Images of the business (multiple aspect ratios recommended) |<br />| </code>priceRange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Relative price range (e.g., "$", "$$", "$$$", or "$10-15") |<br />| </code>geo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>GeoCoordinates<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Geographic coordinates (min 5 decimal places precision) |<br />| </code>openingHoursSpecification<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>OpeningHoursSpecification \| OpeningHoursSpecification[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Business hours including special/seasonal hours |<br />| </code>review<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Review \| Review[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Customer reviews (for review sites only) |<br />| </code>aggregateRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>AggregateRating<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Average rating based on multiple reviews |<br />| </code>department<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>LocalBusinessBase \| LocalBusinessBase[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Departments within the business |<br />| </code>menu<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | URL of the menu (for food establishments) |<br />| </code>servesCuisine<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Type of cuisine served (for restaurants) |<br />| </code>sameAs<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | URLs of business profiles on other sites |<br />| </code>branchOf<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>Organization<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Parent organization if this is a branch |<br />| </code>currenciesAccepted<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Currencies accepted (e.g., "USD") |<br />| </code>paymentAccepted<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Payment methods accepted |<br />| </code>areaServed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Geographic areas served |<br />| </code>email<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Business email address |<br />| </code>faxNumber<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Business fax number |<br />| </code>slogan<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Business slogan or tagline |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Detailed description of the business |<br />| </code>publicAccess<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether the business location is accessible to the public |<br />| </code>smokingAllowed<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether smoking is allowed at the location |<br />| </code>isAccessibleForFree<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Whether access is free |<br />| </code>scriptId<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom ID for the script tag |<br />| </code>scriptKey<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Custom key prop for React |</p><p class="my-3">#### Opening Hours Examples</p><p class="my-3"><strong>Standard Business Hours:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />openingHoursSpecification={[<br /> {<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],<br /> opens: "09:00",<br /> closes: "17:00",<br /> },<br /> {<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: ["Saturday", "Sunday"],<br /> opens: "10:00",<br /> closes: "16:00",<br /> },<br />]}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>24/7 Operation:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />openingHoursSpecification={{<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],<br /> opens: "00:00",<br /> closes: "23:59",<br />}}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Closed on Specific Days:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />openingHoursSpecification={{<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: "Sunday",<br /> opens: "00:00",<br /> closes: "00:00",<br />}}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Seasonal Hours:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />openingHoursSpecification={{<br /> "@type": "OpeningHoursSpecification",<br /> dayOfWeek: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],<br /> opens: "10:00",<br /> closes: "18:00",<br /> validFrom: "2024-06-01",<br /> validThrough: "2024-09-30",<br />}}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Best Practices</p><p class="my-3">1. <strong>Use specific business types</strong>: Use the most specific LocalBusiness subtype (e.g., "Restaurant" instead of "LocalBusiness")<br />2. <strong>Multiple types</strong>: For businesses that fit multiple categories, use an array (e.g., </code>["Restaurant", "BarOrPub"]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br />3. <strong>Complete address</strong>: Provide as many address fields as possible for better local SEO<br />4. <strong>High-quality images</strong>: Include multiple images with different aspect ratios (16:9, 4:3, 1:1)<br />5. <strong>Accurate coordinates</strong>: Use at least 5 decimal places for latitude and longitude<br />6. <strong>Opening hours</strong>: Be precise with opening hours and include seasonal variations<br />7. <strong>Department naming</strong>: Include the main store name with department name (e.g., "Store Name - Pharmacy")<br />8. <strong>Price range</strong>: Keep under 100 characters; use standard symbols ($, $$, $$$) or ranges</p><p class="my-3"><a href="#-components-by-category" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">↑ Back to Components</a></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>MerchantReturnPolicyJsonLd<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component helps you add structured data for merchant return policies, enabling Google Search to display return policy information alongside your products and in knowledge panels. This component supports both detailed policy specifications and simple links to policy pages.</p><p class="my-3">#### Basic Usage - Option A (Detailed Properties)</p><p class="my-3">Use this pattern when you want to provide detailed return policy information:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { MerchantReturnPolicyJsonLd } from "next-seo";</p><p class="my-3"><MerchantReturnPolicyJsonLd<br /> applicableCountry={["US", "CA"]}<br /> returnPolicyCountry="US"<br /> returnPolicyCategory="https://schema.org/MerchantReturnFiniteReturnWindow"<br /> merchantReturnDays={30}<br /> returnMethod="https://schema.org/ReturnByMail"<br /> returnFees="https://schema.org/FreeReturn"<br /> refundType="https://schema.org/FullRefund"<br /> returnLabelSource="https://schema.org/ReturnLabelDownloadAndPrint"<br />/>;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Basic Usage - Option B (Link Only)</p><p class="my-3">Use this pattern when you prefer to link to your return policy page:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { MerchantReturnPolicyJsonLd } from "next-seo";</p><p class="my-3"><MerchantReturnPolicyJsonLd merchantReturnLink="https://www.example.com/returns" />;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Advanced Usage with All Features</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { MerchantReturnPolicyJsonLd } from "next-seo";</p><p class="my-3"><MerchantReturnPolicyJsonLd<br /> applicableCountry={["DE", "AT", "CH"]}<br /> returnPolicyCountry="IE"<br /> returnPolicyCategory="https://schema.org/MerchantReturnFiniteReturnWindow"<br /> merchantReturnDays={60}<br /> itemCondition={[<br /> "https://schema.org/NewCondition",<br /> "https://schema.org/DamagedCondition",<br /> ]}<br /> returnMethod={[<br /> "https://schema.org/ReturnByMail",<br /> "https://schema.org/ReturnInStore",<br /> ]}<br /> returnFees="https://schema.org/ReturnShippingFees"<br /> returnShippingFeesAmount={{<br /> value: 2.99,<br /> currency: "EUR",<br /> }}<br /> refundType={[<br /> "https://schema.org/FullRefund",<br /> "https://schema.org/ExchangeRefund",<br /> ]}<br /> restockingFee={{<br /> value: 10,<br /> currency: "EUR",<br /> }}<br /> returnLabelSource="https://schema.org/ReturnLabelInBox"<br /> // Customer remorse specific<br /> customerRemorseReturnFees="https://schema.org/ReturnShippingFees"<br /> customerRemorseReturnShippingFeesAmount={{<br /> value: 5.99,<br /> currency: "EUR",<br /> }}<br /> customerRemorseReturnLabelSource="https://schema.org/ReturnLabelDownloadAndPrint"<br /> // Item defect specific<br /> itemDefectReturnFees="https://schema.org/FreeReturn"<br /> itemDefectReturnLabelSource="https://schema.org/ReturnLabelInBox"<br /> // Seasonal override<br /> returnPolicySeasonalOverride={{<br /> startDate: "2025-12-01",<br /> endDate: "2025-01-05",<br /> returnPolicyCategory: "https://schema.org/MerchantReturnFiniteReturnWindow",<br /> merchantReturnDays: 30,<br /> }}<br />/>;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Product-Level Return Policy</p><p class="my-3">You can also specify return policies for individual products:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { ProductJsonLd } from "next-seo";</p><p class="my-3"><ProductJsonLd<br /> name="Premium Wireless Headphones"<br /> offers={{<br /> price: 349.99,<br /> priceCurrency: "USD",<br /> hasMerchantReturnPolicy: {<br /> applicableCountry: "US",<br /> returnPolicyCategory:<br /> "https://schema.org/MerchantReturnFiniteReturnWindow",<br /> merchantReturnDays: 45,<br /> returnFees: "https://schema.org/FreeReturn",<br /> refundType: "https://schema.org/FullRefund",<br /> },<br /> }}<br />/>;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Organization-Level Return Policy</p><p class="my-3">For online stores, specify a standard return policy at the organization level:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { OrganizationJsonLd } from "next-seo";</p><p class="my-3"><OrganizationJsonLd<br /> type="OnlineStore"<br /> name="Example Store"<br /> hasMerchantReturnPolicy={{<br /> applicableCountry: ["US", "CA"],<br /> returnPolicyCategory: "https://schema.org/MerchantReturnFiniteReturnWindow",<br /> merchantReturnDays: 60,<br /> returnFees: "https://schema.org/FreeReturn",<br /> refundType: "https://schema.org/FullRefund",<br /> }}<br />/>;<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Property | Type | Description |<br />| ----------------------------------------- | ---------------------------------------- | ---------------------------------------------------------- |<br />| <strong>Option A Properties</strong> |<br />| </code>applicableCountry<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong> (Option A). Countries where products are sold |<br />| </code>returnPolicyCategory<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | <strong>Required</strong> (Option A). Type of return policy |<br />| </code>merchantReturnDays<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Days for returns (required if finite window) |<br />| </code>returnPolicyCountry<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Countries where returns are processed |<br />| </code>returnMethod<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | How items can be returned |<br />| </code>returnFees<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Type of return fees |<br />| </code>returnShippingFeesAmount<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>MonetaryAmount<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Shipping fee for returns |<br />| </code>refundType<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Types of refunds available |<br />| </code>restockingFee<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>number \| MonetaryAmount<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Restocking fee (percentage or fixed) |<br />| </code>returnLabelSource<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | How customers get return labels |<br />| </code>itemCondition<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string \| string[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Acceptable return conditions |<br />| <strong>Customer Remorse Properties</strong> |<br />| </code>customerRemorseReturnFees<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Fees for change-of-mind returns |<br />| </code>customerRemorseReturnShippingFeesAmount<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>MonetaryAmount<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Shipping fee for remorse returns |<br />| </code>customerRemorseReturnLabelSource<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Label source for remorse returns |<br />| <strong>Item Defect Properties</strong> |<br />| </code>itemDefectReturnFees<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Fees for defective item returns |<br />| </code>itemDefectReturnShippingFeesAmount` </p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"27:[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}]\n28:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":22}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@changesets/cli\",{\"href\":\"/package/%40changesets%2Fcli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@changesets/cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.29.7\"}]]}],[\"$\",\"$L5\",\"@eslint/js\",{\"href\":\"/package/%40eslint%2Fjs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@eslint/js\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.38.0\"}]]}],[\"$\",\"$L5\",\"@playwright/test\",{\"href\":\"/package/%40playwright%2Ftest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@playwright/test\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.56.1\"}]]}],[\"$\",\"$L5\",\"@testing-library/jest-dom\",{\"href\":\"/package/%40testing-library%2Fjest-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@testing-library/jest-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.9.1\"}]]}],[\"$\",\"$L5\",\"@testing-library/react\",{\"href\":\"/package/%40testing-library%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2b\",\"$undefined\"]}],\"@testing-library/react\"]}],\"$L2c\"]}],\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\"]}]}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2c:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.3.0\"}]\n2d:[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^24.8.1\"}]]}]\n2e:[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.2.2\"}]]}]\n2f:[\"$\",\"$L5\",\"@vitejs/plugin-react\",{\"href\":\"/package/%40vitejs%2Fplugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vitejs/plugin-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.4\"}]]}]\n30:[\"$\",\"$L5\",\"@vitest/coverage-v8\",{\"href\":\"/package/%40vitest%2Fcoverage-v8\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@vitest/coverage-v8\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.4\"}]]}]\n31:[\"$\",\"$L5\",\"ajv\",{\"href\":\"/package/ajv\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\""])</script><script>self.__next_f.push([1,"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ajv\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.17.1\"}]]}]\n32:[\"$\",\"$L5\",\"eslint\",{\"href\":\"/package/eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.38.0\"}]]}]\n33:[\"$\",\"$L5\",\"eslint-plugin-react\",{\"href\":\"/package/eslint-plugin-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"eslint-plugin-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.37.5\"}]]}]\n34:[\"$\",\"$L5\",\"globals\",{\"href\":\"/package/globals\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"globals\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.4.0\"}]]}]\n35:[\"$\",\"$L5\",\"husky\",{\"href\":\"/package/husky\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"husky\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.1.7\"}]]}]\n36:[\"$\",\"$L5\",\"jsdom\",{\"href\":\"/package/jsdom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentC"])</script><script>self.__next_f.push([1,"olor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jsdom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^27.0.1\"}]]}]\n37:[\"$\",\"$L5\",\"lint-staged\",{\"href\":\"/package/lint-staged\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"lint-staged\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.2.4\"}]]}]\n38:[\"$\",\"$L5\",\"prettier\",{\"href\":\"/package/prettier\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"prettier\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.6.2\"}]]}]\n39:[\"$\",\"$L5\",\"rimraf\",{\"href\":\"/package/rimraf\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rimraf\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.0.1\"}]]}]\n3a:[\"$\",\"$L5\",\"tsup\",{\"href\":\"/package/tsup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.5.0\"}]]}]\n3b:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\""])</script><script>self.__next_f.push([1,":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.9.3\"}]]}]\n3c:[\"$\",\"$L5\",\"typescript-eslint\",{\"href\":\"/package/typescript-eslint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript-eslint\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.46.1\"}]]}]\n3d:[\"$\",\"$L5\",\"vitest\",{\"href\":\"/package/vitest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"vitest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.4\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>