Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    nextjs optimisation skill

    1

    Audit and optimize Next.js performance, technical SEO, and serverless compute efficiency.

    Free

    Security scanned
    nextjs optimisation skill

    nextjs optimisation skill

    Example session with this skill installed

    Audit the /products/[id] route. It is slow to load and the SEO tags don't seem to match the JSON-LD schema. Check the client boundaries and metadata.

    • Read your context and instructions
    • Compiled the nextjs optimisation

    I have audited the /products/[id] route. The primary issues were a broad "use client" directive at the layout level and a mismatch between the Product schema @id and the canonical URL.

    Route Audit: /products/[id]

    Component / FeatureStatusObservationRecommended Action
    RenderingDynamicRoute is Opted into dynamic rendering due to headers().Move headers() usage to a specific Client Component.
    Client BoundaryLeakyProductGallery wraps the entire page content.Restrict "use client" to the image carousel only.
    MetadataMismatchMeta description uses excerpt, JSON-LD uses description.Align both fields to use the product.longDescription.
    JSON-LDInvalidMissing @id for the Offer node.Add absolute @id using the canonical URL hash.
    LCP ImageUnoptimizedProduct hero image lacks priority and sizes.Add priority and sizes="(max-width: 768px) 100vw, 50vw".

    Optimized Metadata Implementation

    // app/products/[id]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.id);
  const canonical = `https://example.com/products/${product.slug}`;

  return {
    title: product.name,
    description: product.longDescription,
    alternates: { canonical },
    openGraph: {
      images: [product.mainImage],
    },
  };
}

    Next steps

    1. Apply the narrow client boundary to the ProductGallery component to reduce JS payload by ~45kb.
    2. Deploy the metadata fix and verify the @id alignment in the Schema Markup Validator.
    3. Add the priority property to the hero image to improve LCP.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Technical SEO and performance regressions in Next.js projects often stem from bloated client boundaries, inefficient rendering choices, and fragmented discovery signals. This skill audits and optimizes Next.js applications by aligning architecture, metadata, and core web vitals into a single cohesive system.

    What it does

    • Architecture audit identifies opportunities to move Client Components to Server Components to reduce browser bundles.
    • Discovery alignment synchronizes H1 tags, metadata, canonicals, and JSON-LD schema for search engines and AI crawlers.
    • Performance tuning optimizes LCP media through responsive sizes, preloading, and selective lazy-loading strategies.
    • Compute reduction analyzes route cardinality and middleware to lower serverless execution costs and build times.
    • Structured data implements valid JSON-LD using stable absolute IDs and verifiable entity relationships.

    How it works

    1. Version detection reads package.json and internal Next.js docs to ensure API compatibility for App or Pages router.
    2. Intent classification categorizes the task into discovery, rendering, performance, media, or deployment efficiency.
    3. Strategic implementation applies the least dynamic architecture possible, preferring static generation and prerendered HTML.
    4. Validation layers runs type checking, production build simulations, and rendered-output schema verification.

    Frameworks & tools

    Specifically designed for Next.js (App and Pages Router), React, and TypeScript projects. It targets Core Web Vitals, Schema.org JSON-LD, IndexNow, and common deployment platforms like Vercel or AWS.

    Why this beats prompting it yourself

    Generic prompts often suggest "global" fixes that break site-wide performance or create dynamic rendering bottlenecks. This skill enforces a "least dynamic" rule, ensuring you don't trade build speed for runtime latency or accidentally de-index routes with conflicting robots directives.

    Use cases

    • Auditing an existing route for SEO defects and schema errors.
    • Reducing JavaScript bundles by isolating client-side state.
    • Preparing a site for AI-search visibility through structured entity tagging.
    • Optimizing serverless function execution and image transformation costs.

    Known limitations

    Does not support non-React frameworks. Requires access to package.json for versioning. Lab data is required for performance claims as it cannot access live RUM metrics without external integration.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 3 days ago

    • Free to download with an account

    Requires

    Git

    Listed3 days ago

    What's inside

    Frequently Asked Questions