4.0.7 • Published 12 months ago
@bizhours/next-seo-plugin-core v4.0.7
@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/coreQuick 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-idAdvanced 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@latestLicense
MIT