Imported from mohitjoer/NextJs-SEO (skills/nextjs-seo/SKILL.md). Install upstream with npx skills add mohitjoer/NextJs-SEO --skill nextjs-seo. Copyright stays with the author.

Next.js SEO

Implement comprehensive SEO in Next.js App Router applications using native features and the @mohitjoer/nextjs-seo helper library. No external SEO packages like next-seo are needed — everything builds on Next.js's built-in Metadata API.

Prerequisites

• Next.js 13.0.0+ with App Router
• Install: npm install @mohitjoer/nextjs-seo

Implementation Workflow

Follow these steps in order for a complete SEO setup. Each step builds on the previous one.

Step 1: Create SEO Config

Create seo.config.ts (or seo.config.js) in your project root. This central config drives metadata, sitemaps, robots.txt, and llms.txt generation.

// seo.config.ts
import { defineSeoConfig } from "@mohitjoer/nextjs-seo";

export const seoConfig = defineSeoConfig({
  baseUrl: "https://example.com",
  siteName: "My App",
  defaultOgImg: "/og-default.png",
  manualRoutes: [],  // Add dynamic routes here (e.g., "/users/1", "/blog/my-post")
});

Read defineSeoConfig reference for all config options.

Step 2: Add Page Metadata

For every page, export metadata using genPageMetadata:

// app/page.tsx
import { genPageMetadata } from "@mohitjoer/nextjs-seo";

export const metadata = genPageMetadata({
  title: "Home - My App",
  description: "Welcome to My App — your trusted source for...",
  pageRoute: "/",
  ogImg: "/og-home.png",  // optional, falls back to defaultOgImg
});

For dynamic pages with data fetching, use an async generateMetadata function:

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
import { genPageMetadata } from "@mohitjoer/nextjs-seo";

export async function generateMetadata({ params }): Promise<Metadata> {
  const { slug } = await params;
  const article = await getArticle(slug);

  return genPageMetadata({
    title: `${article.title} - My Blog`,
    description: article.description,
    pageRoute: `/blog/${slug}`,
    ogImg: article.coverImage,
  });
}

Read genPageMetadata reference for all parameters. Read full metadata guide for advanced patterns with TypeScript and JavaScript.

Step 3: Generate sitemap.xml

Create app/sitemap.ts:

// app/sitemap.ts
import type { MetadataRoute } from "next";
import { sitemapXml } from "@mohitjoer/nextjs-seo";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  return sitemapXml();
}

Routes are auto-detected from your file system. For custom priority/frequency per route:

return sitemapXml([
  { route: "/", lastModified: new Date(), changeFrequency: "daily", priority: 1 },
  { route: "/about", changeFrequency: "monthly", priority: 0.8 },
]);

Read sitemap guide for manual routes, large sites (50k+ URLs), and advanced config. Read sitemapXml reference for all parameters.

Step 4: Generate robots.txt

Create app/robots.ts:

// app/robots.ts
import type { MetadataRoute } from "next";
import { robotsTxt } from "@mohitjoer/nextjs-seo";

export default function robots(): MetadataRoute.Robots {
  return robotsTxt();
}

For custom crawler rules:

return robotsTxt({
  rules: [
    { userAgent: "*", allow: "/", disallow: ["/admin", "/private"] },
    { userAgent: "Googlebot", allow: "/", crawlDelay: 10 },
  ],
});

Read robots.txt guide for advanced config and caching behavior. Read robotsTxt reference for all parameters.

Step 5: Generate llms.txt

Wire it into your build script in package.json:

{
  "scripts": {
    "build": "node --input-type=module -e \"import('@mohitjoer/nextjs-seo/scripts').then(m => m.generateLlmsTxt())\" && next build"
  }
}

Read llms.txt guide for manual generation and route configuration.

Step 6: Add JSON-LD Structured Data

Add structured data to pages that have rich content. Use the library's specialized components for type safety, or the generic JsonLdScript for any schema.org type.

Generic approach (any schema.org type):

import { JsonLdScript } from "@mohitjoer/nextjs-seo";

export default function Page() {
  return (
    <>
      <JsonLdScript jsonLd={{
        "@context": "https://schema.org",
        "@type": "WebPage",
        name: "My Page",
        description: "Page description",
      }} />
      <main><h1>My Page</h1></main>
    </>
  );
}

Specialized components (type-safe with full prop validation):

Read JSON-LD structured data guide for complete examples of every type.

Step 7: Run SEO Audit

Add the check script to package.json:

{
  "scripts": {
    "check-seo": "node --input-type=module -e \"import('@mohitjoer/nextjs-seo/scripts').then(m => m.checkSeo())\""
  }
}

Run npm run check-seo to audit metadata coverage, sitemap/robots config, JSON-LD presence, heading hierarchy, and semantic landmarks.

Read SEO check tool docs for details on what it checks and how to interpret results.

Quick Decision Guide

"What metadata do I need?" Every page needs Step 2 (genPageMetadata). Start there.

"What JSON-LD should I add?" Depends on your content:

• Blog / news site → JsonLdForArticle on each post + JsonLdForBreadcrumb for navigation
• E-commerce → JsonLdForProduct on product pages + JsonLdForBreadcrumb
• SaaS landing page → JsonLdForSoftwareApp + JsonLdForOrganization
• Help center / docs → JsonLdForFaq on FAQ pages + JsonLdForHowTo on tutorials
• Events site → JsonLdForEvent on each event page
• Video content → JsonLdForVideo on each video page

"My routes are dynamic" Add them to manualRoutes in seo.config.ts. This affects both sitemap and llms.txt generation.

Reference Files

Guides

• Generate metadata — Static and dynamic page metadata with full TS/JS examples
• Generate sitemap.xml — Auto-detection, manual routes, large sites
• Generate robots.txt — Crawler rules and caching
• Generate llms.txt — AI crawler documentation
• Add JSON-LD structured data — All 9 JSON-LD types with working examples
• SEO check tool — Audit your implementation

API References

• defineSeoConfig | genPageMetadata | sitemapXml | robotsTxt
• JsonLdScript | JsonLdForArticle | JsonLdForBreadcrumb | JsonLdForFaq
• JsonLdForSoftwareApp | JsonLdForOrganization | JsonLdForProduct
• JsonLdForHowTo | JsonLdForEvent | JsonLdForVideo