Avenra
MetadataXGuides and Concepts
MetadataXGuides and Concepts

App Router

Use MetadataX in the Next.js App Router.

Create your SEO config

// seo.config.ts
import { defineSeoConfig } from "@avenra/metadatax";

export const seo = defineSeoConfig({
    baseUrl: "https://example.com",
    title: "Example Site",
    description: "Production-ready metadata defaults.",
    canonical: "/",
    titleTemplate: "%s | Example",
    openGraph: {
        type: "website",
        images: [{ url: "/og/default.png" }],
    },
});

Wire into metadata

// app/layout.tsx
import type { Metadata } from "next";
import { createMetadata } from "@avenra/metadatax";
import { seo } from "../seo.config";

export const metadata: Metadata = createMetadata(seo, {});

Add JSON-LD

// app/blog/[slug]/page.tsx
import { JsonLd, articleJsonLd } from "@avenra/metadatax";

export default function BlogPage() {
    return (
        <JsonLd
            data={articleJsonLd({
                headline: "My First Post",
                author: "Avenra Team",
                datePublished: "2026-04-14",
            })}
        />
    );
}

On this page