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",
})}
/>
);
}