garmeeh/next-seo

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Summary

next-seo is a TypeScript plugin for Next.js that provides React components which render JSON-LD structured data into pages. Its scope is narrow: it covers structured data only, and the README explicitly recommends using Next.js's built-in generateMetadata function for standard <meta> and <title> tags. It is MIT licensed and supports both the App Router and Pages Router (the latter via a different import path).

What it is useful for

The library covers the content types most Next.js sites publish: articles, news articles, blog posts, recipes, fact-check pages, and other creative works. Each component renders an inline <script type="application/ld+json"> tag and accepts documented props such as headline, datePublished, author, image arrays, and publisher.

It also handles two cases that are easy to get wrong by hand:

• Paywalled content: CreativeWorkJsonLd accepts a hasPart prop with cssSelector values to flag premium sections without cloaking, and supports multiple paywalled sections as an array.
• Fact-check markup: ClaimReviewJsonLd produces the structured data that powers Google's fact-check snippets, with claimReviewed and a reviewRating object that includes ratingValue, bestRating, worstRating, and alternateName.

A documented limitation: the inline JSON-LD script is blocked by strict CSP headers such as script-src 'nonce-{RANDOM}' unless the page supplies a matching nonce. Every component accepts a nonce prop for this case, and omitting it renders no attribute at all.

How engineers can use it

Setup is one install command. The README shows npm install next-seo (with yarn, pnpm, and bun equivalents) and an import like:

import { ArticleJsonLd } from "next-seo";

export default function BlogPost() {
  return (
    <>
      <ArticleJsonLd
        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"
      />
      <article>{/* content */}</article>
    </>
  );
}

For Pages Router projects, the README directs engineers to import from next-seo/pages. For CSP-protected sites, the README's example reads the nonce from headers() in a server component and passes it through the nonce prop.

If you need schema types outside the components documented here (Breadcrumb, Product, FAQ, LocalBusiness, and so on), the README does not cover them, so check the linked Pages Router README or the repository before assuming support.