@masters-ws/react-seo

Professional high-performance SEO package for React and Next.js. Zero-dependency core for Next.js App Router + optional Helmet components for universal React support.

Key Features

✅ Zero-Dependency Core - Pure functions for Next.js (no react-helmet-async needed!)
✅ Hybrid Architecture - Use functions OR components based on your needs
✅ Full Metadata Support - Title, Description, Keywords, Robots, Canonical
✅ Intelligent Pagination - Automatic rel="prev" and rel="next" handling
✅ 25+ Schema Types - Article, Product, FAQ, Event, LocalBusiness, Video, Recipe, etc.
✅ Multilingual Support - Easy hreflang management
✅ Performance Optimized - DNS Prefetch, Preconnect, Preload support

Installation

For Next.js App Router (Zero Dependencies):

npm install @masters-ws/react-seo

For React / Next.js Pages Router (With Components):

npm install @masters-ws/react-seo react-helmet-async

Usage: Next.js App Router (Recommended)

Use the core functions directly in your Server Components. No Helmet needed!

// app/news/[slug]/page.tsx
import { toNextMetadata, generateArticleSchema } from '@masters-ws/react-seo';

const siteConfig = {
  name: "My News Site",
  url: "https://mysite.com"
};

// This runs on the server - instant SEO!
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  
  return toNextMetadata({
    title: post.title,
    description: post.excerpt,
    image: post.cover,
    type: 'article',
    publishedTime: post.date
  }, siteConfig);
}

export default function ArticlePage({ params }) {
  const post = await getPost(params.slug);
  
  // Add JSON-LD Schema using core function
  const articleSchema = generateArticleSchema({
    title: post.title,
    description: post.excerpt,
    publishedTime: post.date,
    author: { name: post.author }
  }, siteConfig);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleSchema) }}
      />
      <article>...</article>
    </>
  );
}

Usage: React / Pages Router (With Components)

If you prefer the component approach or are using React without Next.js:

// _app.tsx
import { SEOProvider } from '@masters-ws/react-seo';

const config = { name: "My Site", url: "https://mysite.com" };

export default function App({ Component, pageProps }) {
  return (
    <SEOProvider config={config}>
      <Component {...pageProps} />
    </SEOProvider>
  );
}

// pages/article.tsx
import { SeoArticle } from '@masters-ws/react-seo';

export default function ArticlePage({ post }) {
  return (
    <>
      <SeoArticle article={{
        title: post.title,
        description: post.excerpt,
        image: post.cover,
        publishedAt: post.date
      }} />
      <article>...</article>
    </>
  );
}

Core Functions Reference

All functions are pure (no side effects) and work in any environment:

Function	Description
`toNextMetadata(data, config)`	Converts SEO data to Next.js Metadata object
`generateArticleSchema(data, config)`	Creates NewsArticle JSON-LD
`generateProductSchema(data)`	Creates Product JSON-LD with offers
`generateFAQSchema(questions)`	Creates FAQPage JSON-LD
`generateBreadcrumbSchema(items)`	Creates BreadcrumbList JSON-LD
`generateVideoSchema(data)`	Creates VideoObject JSON-LD
`generateEventSchema(data)`	Creates Event JSON-LD
`generateLocalBusinessSchema(data)`	Creates LocalBusiness JSON-LD
`generatePaginationLinks(url, page, total)`	Returns prev/next/canonical URLs
`generateOrganizationSchema(config)`	Creates Organization JSON-LD
`generateWebSiteSchema(config)`	Creates WebSite JSON-LD with SearchAction

Components Reference (Requires react-helmet-async)

Component	Description
`<SEO />`	Main component for meta tags and schemas
`<SeoArticle />`	For news articles and blog posts
`<SeoProduct />`	For e-commerce products
`<SeoFAQ />`	For FAQ pages
`<SeoVideo />`	For video content
`<SeoEvent />`	For events and conferences
`<SeoLocalBusiness />`	For physical business locations
`<SeoCategory />`	For category pages with pagination
`<SeoTag />`	For tag pages with pagination
`<SeoAuthor />`	For author profile pages
`<Breadcrumb />`	For breadcrumb navigation with schema

Configuration Options

SiteConfig

{
  name: string;           // Site name
  url: string;            // Base URL
  logo?: string;          // Logo URL
  language?: string;      // Default: 'ar'
  twitterHandle?: string; // @username
  themeColor?: string;    // Mobile theme color
}

SEOData

{
  title?: string;
  description?: string;
  image?: string;
  canonical?: string;
  noindex?: boolean;      // Sets robots to noindex
  type?: 'website' | 'article' | 'product';
  alternates?: Array<{ hreflang: string; href: string }>;
  // ... and more
}

License

MIT