MetadataXExamples
MetadataXExamples
Example app
Reference Next.js app for MetadataX.
The example app in apps/nextjs-example demonstrates a full setup with
MetadataX in a Next.js App Router project. It includes a shared SEO config,
page-level overrides, and the build-time lint plugin.
Run the example
cd apps/nextjs-example
npm install
npm run devWhat to look for
1) Shared SEO config
The app defines a single config and reuses it everywhere.
// apps/nextjs-example/seo.config.ts
import { defineSeoConfig } from "@avenra/metadatax";
export const seo = defineSeoConfig({
baseUrl: "https://example.com",
title: "Example App",
description: "MetadataX example setup",
canonical: "/",
titleTemplate: "%s | Example",
openGraph: {
type: "website",
images: [{ url: "/og/default.png" }],
},
});2) App Router metadata
Pages call createMetadata and override only what they need.
// apps/nextjs-example/app/(site)/about/page.tsx
import type { Metadata } from "next";
import { createMetadata } from "@avenra/metadatax";
import { seo } from "../../../seo.config";
export const metadata: Metadata = createMetadata(seo, {
title: "About",
description: "Learn more about the example app",
canonical: "/about",
});3) Build-time linting
The Next.js config is wrapped so lint errors can fail the build.
// apps/nextjs-example/next.config.mjs
import { withMetadataX } from "@avenra/metadatax/next-plugin";
const nextConfig = {
reactStrictMode: true,
};
export default withMetadataX(nextConfig, { failOn: "error" });