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.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.

Installation

``bash
npm install next-seo-checker
`

Quick Start

$3

Create an API route to handle saving and loading your SEO data.

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 });
}
`

$3


If you want to use the Permalink Manager, add this to your middleware.ts:

`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`.
4. 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