@bizhours/next-seo-plugin

A powerful and flexible SEO management plugin for Next.js applications. Manage meta tags, redirects, and robots.txt through an intuitive admin interface - no redeployment needed.

Features

• 🎯 Dynamic Meta Tags: Configure SEO meta tags per page or globally
• 🔄 Redirect Management: Set up and manage redirects easily
• 🤖 Robots.txt Control: Manage your robots.txt content through the admin UI
• 🔒 Secure Admin Interface: Password-protected admin panel
• 🚀 Zero Config Setup: Works out of the box with sensible defaults
• 📱 Mobile-First Design: Responsive admin interface
• 🔍 TypeScript Support: Full TypeScript support with type definitions
• ⚡️ Instant Updates: Changes take effect immediately without redeployment

How It Works

1. Install and set up the plugin in your Next.js project
2. Connect it to a PostgreSQL database
3. Your marketing team can then:
   • Update meta tags for any page
   • Manage redirects
   • Control robots.txt
   • All without requiring code changes or redeployment

Installation & Quick Start

1. Install the plugin:

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

2. Initialize the plugin:

npx next-seo-plugin init

3. Set up a PostgreSQL database:

   • Local development: Use a local PostgreSQL instance
   • Production: Use any PostgreSQL provider (Railway, Supabase, etc.)

4. Configure environment variables in .env.local:

# Admin interface password
NEXT_SEO_ADMIN_PASSWORD=your-secure-password

# Database URL
NEXT_SEO_DATABASE_URL=postgres://localhost:5432/nextseo

5. Start your development server and visit /admin/seo to access the admin interface.

That's it! Your marketing team can now manage SEO settings without developer intervention.

CLI Commands

The plugin provides several CLI commands to help you manage your SEO configuration:

# Show help
npx next-seo-plugin --help

# Initialize the plugin
npx next-seo-plugin init

# Migrate data between databases
npx next-seo-plugin migrate sqlite postgres

Configuration

The plugin can be configured through next-seo.config.js:

/** @type {import('@bizhours/next-seo-plugin').PluginConfig} */
const config = {
  // Admin interface settings
  admin: {
    path: '/admin/seo',
    password: process.env.NEXT_SEO_ADMIN_PASSWORD,
  },
  // Database configuration
  database: {
    url: process.env.NEXT_SEO_DATABASE_URL,
    ssl: process.env.NODE_ENV === 'production'
  },
  // Default SEO settings
  seo: {
    titleTemplate: '%s | My Site',
    defaultTitle: 'My Site',
    description: 'Welcome to my website',
  },
};

module.exports = config;

Production Deployment

1. Set up a production PostgreSQL database
2. Configure environment variables in your hosting platform:

# Required
NEXT_SEO_ADMIN_PASSWORD=secure-production-password
NEXT_SEO_DATABASE_URL=your-production-postgres-url

# Optional
NODE_ENV=production  # Enables SSL for database connection

Vercel Deployment

1. Create a PostgreSQL database (e.g., using Railway or Supabase)
2. In your Vercel project settings, add environment variables:
   • NEXT_SEO_ADMIN_PASSWORD
   • NEXT_SEO_DATABASE_URL
3. Deploy your project
4. Access the admin interface at your-domain.com/admin/seo

API Reference

Configuration Types

interface PluginConfig {
  admin?: {
    path?: string;        // Admin UI path (default: '/admin/seo')
    password: string;     // Admin password
  };
  database: {
    url: string;         // PostgreSQL connection URL
    ssl?: boolean;       // Enable SSL (default: true in production)
  };
  seo?: {
    titleTemplate?: string;
    defaultTitle?: string;
    description?: string;
    openGraph?: {
      type?: string;
      title?: string;
      description?: string;
      images?: Array<{
        url: string;
        alt?: string;
      }>;
    };
    twitter?: {
      cardType?: 'summary' | 'summary_large_image';
      handle?: string;
    };
  };
}

Admin Interface

Access the admin interface at /next-seo-plugin (or your custom path) to:

• Configure meta tags per page
• Manage redirects
• Edit robots.txt content

Development

# Install dependencies
npm install

# Run tests
npm test

# Build the package
npm run build

# Run linting
npm run lint

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © BizHours