@bizhours/next-seo-plugin-core

v4.0.7

Published

6 months ago

Core library for Next SEO Plugin

0High
0Medium
0Low

cdawg8830

nextjs seo middleware metadata

@next-seo-plugin/core

The core Next.js middleware for The Next SEO Plugin. Seamlessly integrate dynamic SEO management into your Next.js application.

Installation

npm install @next-seo-plugin/core
# or
yarn add @next-seo-plugin/core
# or  
pnpm add @next-seo-plugin/core

Quick Start

1. Create middleware.ts

Create a middleware.ts file in your project root:

import { withNextSEO } from '@next-seo-plugin/core';

export const middleware = withNextSEO({
  apiUrl: process.env.NEXT_PUBLIC_SEO_API_URL!,
  apiKey: process.env.NEXT_SEO_API_KEY!,
  siteId: 'your-site-id',
  cache: true,
  cacheTTL: 60, // seconds
});

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

2. Add Provider to your app

In your app/layout.tsx:

import { NextSEOProvider } from '@next-seo-plugin/core';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <NextSEOProvider
          config={{
            apiUrl: process.env.NEXT_PUBLIC_SEO_API_URL!,
            apiKey: process.env.NEXT_SEO_API_KEY!,
            siteId: 'your-site-id',
          }}
        >
          {children}
        </NextSEOProvider>
      </body>
    </html>
  );
}

3. Use in your components

'use client';

import { useNextSEO, useContent } from '@next-seo-plugin/core';

export default function HomePage() {
  const { metadata, updateMetadata, loading } = useNextSEO();
  const heroTitle = useContent('hero_title');

  return (
    <div>
      <h1>{heroTitle || 'Welcome'}</h1>
      {/* Your content */}
    </div>
  );
}

Features

🚀 Middleware-based SEO

Automatic metadata injection
Server-side redirects
Zero client-side overhead
Edge runtime compatible

💾 Smart Caching

LRU cache with configurable TTL
Automatic cache invalidation
Minimal API calls

🔄 Real-time Updates

React hooks for easy integration
Optimistic updates
Error handling built-in

🛡️ Type Safety

Full TypeScript support
Typed API responses
IntelliSense everywhere

API Reference

`withNextSEO(config)`

Creates the Next.js middleware function.

interface NextSEOConfig {
  apiUrl: string;      // Your Worker API URL
  apiKey: string;      // Admin API key
  siteId: string;      // Unique site identifier
  cache?: boolean;     // Enable caching (default: true)
  cacheTTL?: number;   // Cache TTL in seconds (default: 60)
  debug?: boolean;     // Enable debug logging
}

`useNextSEO()`

Hook to access SEO data for the current page.

const {
  metadata,        // Current page metadata
  content,         // Content blocks array
  redirect,        // Redirect info (if any)
  loading,         // Loading state
  error,           // Error state
  updateMetadata,  // Update function
  updateContent,   // Update content function
} = useNextSEO();

`useContent(key)`

Hook to get a specific content block.

const heroTitle = useContent('hero_title');

Environment Variables

# Required
NEXT_PUBLIC_SEO_API_URL=https://your-worker.workers.dev
NEXT_SEO_API_KEY=your-secret-admin-key

# Optional
NEXT_PUBLIC_SEO_SITE_ID=your-site-id

Advanced Usage

Custom Fetch Implementation

const middleware = withNextSEO({
  // ... other config
  fetch: customFetch, // Use your own fetch implementation
});

Programmatic Updates

const { updateMetadata } = useNextSEO();

await updateMetadata({
  title: 'New Page Title',
  description: 'Updated description',
  og_image: 'https://example.com/image.jpg',
});

Content Management

const { updateContent } = useNextSEO();

await updateContent('hero_title', 'Welcome to our new site!');

Troubleshooting

Middleware not running

Make sure your matcher in middleware.ts is configured correctly:

export const config = {
  matcher: [
    // Include all pages except API routes and static files
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

SEO data not updating

Check cache settings - you may need to reduce cacheTTL
Enable debug mode to see API calls
Verify your API key and permissions

TypeScript errors

Make sure to install the peer dependencies:

npm install next@latest react@latest react-dom@latest

License

MIT