Professional live SEO optimizer and permalink management suite for Next.js.
npm install next-seo-checkerA 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.
- ✅ 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.json file 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.
``bash`
npm install next-seo-checker
app/api/seo/save/route.ts:`typescript
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 });
}
`
:`typescript
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
app/layout.tsx:
`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 (
{children}
);
}
`How it Works
1. Analyze: Use the floating badge in
development mode to check your page's SEO performance.
2. Edit: Set focus keywords, titles, descriptions, and custom permalinks directly in the UI.
3. Save: Click "Save to Project" to write changes to seo-overrides.json`.