next-seo-checker
v1.6.0
Published
Professional live SEO optimizer and permalink management suite for Next.js.
Maintainers
coftwareReadme
Next SEO Checker 🚀
A comprehensive, live SEO optimizer and permalink management suite for Next.js App Router applications. Ensure peak SEO performance with real-time analysis and persistent metadata management.
Features
- ✅ Live SEO Analysis: Real-time feedback on title length, meta description, keyword density, and content structure.
- ✅ Server-Side Persistence: SEO overrides are saved to a local
seo-overrides.jsonfile and served via SSR for perfect search engine indexing. - ✅ Permalink Manager: Override URL slugs without changing your file-based routing structure.
- ✅ Advanced Data-Driven Scoring: Dynamic SEO score calculation based on primary and secondary focus keywords.
- ✅ Zero-Configuration UI: A sleek, non-intrusive floating panel for development mode.
Installation
npm install next-seo-checkerQuick Start
1. Set up the Persistence API
Create an API route to handle saving and loading your SEO data.
app/api/seo/save/route.ts:
import { NextResponse } from "next/server";
import fs from "fs";
import path from "path";
export async function GET() {
const filePath = path.join(process.cwd(), "seo-overrides.json");
if (!fs.existsSync(filePath)) return NextResponse.json({});
const data = JSON.parse(fs.readFileSync(filePath, "utf-8"));
return NextResponse.json(data);
}
export async function POST(req: Request) {
const { pathname, overrides } = await req.json();
const filePath = path.join(process.cwd(), "seo-overrides.json");
let allData = {};
if (fs.existsSync(filePath)) {
allData = JSON.parse(fs.readFileSync(filePath, "utf-8"));
}
allData[pathname] = overrides;
fs.writeFileSync(filePath, JSON.stringify(allData, null, 2));
return NextResponse.json({ success: true });
}2. Configure Middleware (Optional, for Permalinks)
If you want to use the Permalink Manager, add this to your middleware.ts:
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export async function middleware(request: NextRequest) {
const { pathname, origin } = request.nextUrl;
// Skip static files and API routes
if (pathname.includes('.') || pathname.startsWith('/api') || pathname.startsWith('/_next')) {
return NextResponse.next();
}
try {
const res = await fetch(`${origin}/api/seo/save`);
const allData = await res.json();
const headers = new Headers(request.headers);
// Slug Redirect Logic (Real path -> SEO Slug)
const currentOverride = allData[pathname];
if (currentOverride?.slug && pathname !== `/${currentOverride.slug}`) {
return NextResponse.redirect(new URL(`/${currentOverride.slug}`, request.url));
}
// Slug Rewrite Logic (SEO Slug -> Real path)
for (const [realPath, data] of Object.entries(allData)) {
if ((data as any).slug && pathname === `/${(data as any).slug}`) {
headers.set("x-url", realPath);
return NextResponse.rewrite(new URL(realPath, request.url), { request: { headers } });
}
}
} catch (e) {}
return NextResponse.next();
}3. Integrate with Root Layout
app/layout.tsx:
import { NextSeoChecker, getSeoMetadata } from "next-seo-checker";
import { headers } from "next/headers";
export async function generateMetadata() {
const head = await headers();
const pathname = head.get("x-url") || "/";
const defaultSeo = {
title: "My Awesome Site",
description: "Welcome to my website"
};
return getSeoMetadata(pathname, defaultSeo);
}
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<NextSeoChecker />
</body>
</html>
);
}How it Works
- Analyze: Use the floating badge in
developmentmode to check your page's SEO performance. - Edit: Set focus keywords, titles, descriptions, and custom permalinks directly in the UI.
- Save: Click "Save to Project" to write changes to
seo-overrides.json. - Index: Search engines receive the updated metadata on the very first request (SSR), while your custom permalinks handled by the middleware ensure the best URL structure.
License
MIT