ClayCMS — Premium SEO & AEO Optimized CMS for Next.js

ClayCMS is a high-performance, plug-and-play CMS for the Next.js App Router. It is designed for maximum speed, SEO optimization, and Answer Engine Optimization (AEO).

Features

• 🚀 Plug & Play: Integrates with your existing Prisma client in minutes.
• ✍️ Medium-Style Editor: Premium block-based writing experience using Novel & Tiptap.
• 🔍 SEO & AEO Controls: Built-in fields for TL;DR, FAQs, and smart metadata.
• 🛠️ Full Taxonomies: Robust management for Tags, Categories, and Authors.
• 📝 Advanced Metadata: Support for Meta Titles, Descriptions, Canonical URLs, and No-Index flags.
• 🔄 Revision History: Track every change with a full editing history and one-click restore.
• 🏗️ Smart Redirections: Automatic redirection rules when deleting posts to prevent negative SEO/404s.
• ⚡ Maximum Performance: 100/100 Lighthouse score potential with lightweight frontend components.
• 🎨 Glassmorphism Design: Modern, premium UI for both admin and frontend.

Installation

npm install @clayblog/next

Setup

1. Prisma Schema

Add the following models to your schema.prisma:

// Example Schema snippet (Full schema in /docs)
model Post {
  id              String    @id @default(cuid())
  title           String
  slug            String    @unique
  content         Json
  meta            Json?     // Used for FAQs, virtual fields
  tldr            String?
  seoTitle        String?
  seoDescription  String?
  canonicalUrl    String?
  noIndex         Boolean   @default(false)
  status          String    @default("draft")
  // ... see docs for full relational models
}

2. API Route

Create app/api/claycms/[[...claycms]]/route.ts:

import { createClayCmsApiHandler, createPrismaAdapter } from "@clayblog/next";
import { prisma } from "@/lib/prisma";

const adapter = createPrismaAdapter(prisma);
const handler = createClayCmsApiHandler(adapter);

export { handler as GET, handler as POST };

3. Admin Dashboard

Create app/admin/[[...slug]]/page.tsx:

import { AdminDashboard } from "@clayblog/next";
import "@clayblog/next/dist/admin.css";

export default function AdminPage() {
  return <AdminDashboard basePath="/admin" />;
}

4. Frontend Blog

Render posts using the NextAeoCMS router or build your own with the provided hooks and components.

License

MIT © Mithu