Next.js Functions - generate-metadata

A simple guide to using generate-metadata functions in your Next.js application.

Quick Start

First, create a metadata client:

lib/metadata.ts

import { GenerateMetadataClient } from "generate-metadata/next";
 
export const metadataClient = new GenerateMetadataClient({
  dsn: process.env.NEXT_PUBLIC_GENERATE_METADATA_DSN,
  apiKey: process.env.GENERATE_METADATA_API_KEY!, // Required for Next.js
});

getMetadata()

Generate AI-powered metadata for individual pages.

Basic Usage

app/page.tsx

import { metadataClient } from "@/lib/metadata";
 
export const generateMetadata = metadataClient.getMetadata(() => ({
  path: "/",
}));
 
export default function HomePage() {
  return <h1>Welcome to my site!</h1>;
}

Dynamic Pages

For pages with dynamic routes, include the dynamic parts in the path:

app/blog/[slug]/page.tsx

interface BlogProps {
  params: { slug: string };
}
 
export const generateMetadata = metadataClient.getMetadata(
  ({ params }: BlogProps) => ({
    path: `/blog/${params.slug}`,
  }),
);
 
export default function BlogPost({ params }: BlogProps) {
  return <h1>Blog Post: {params.slug}</h1>;
}

With Search Parameters

Include search parameters in the path for better caching:

app/search/page.tsx

interface SearchProps {
  searchParams: { q?: string };
}
 
export const generateMetadata = metadataClient.getMetadata(
  ({ searchParams }: SearchProps) => ({
    path: `/search?q=${searchParams.q || ""}`,
  }),
);

getRootMetadata()

Generate metadata for layout components.

Simple Layout

app/layout.tsx

import { metadataClient } from "@/lib/metadata";
 
// No configuration needed for basic layout
export const generateMetadata = metadataClient.getRootMetadata();
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Layout with Fallback

If you want default metadata when the API is unavailable:

app/layout.tsx

export const generateMetadata = metadataClient.getRootMetadata(() => ({
  fallback: {
    title: "My Amazing App",
    description: "The best app you'll ever use",
  },
}));

Fallback Metadata

Use fallback metadata when the API is unavailable. It's optional but recommended:

app/products/page.tsx

export const generateMetadata = metadataClient.getMetadata(() => ({
  path: "/products",
  fallback: {
    title: "Our Products",
    description: "Browse our amazing collection of products",
  },
}));

Override Metadata

Use override to force certain metadata values, regardless of what the API returns:

app/page.tsx

export const generateMetadata = metadataClient.getMetadata(() => ({
  path: "/",
  fallback: {
    title: "Home Page",
    description: "Welcome to our website",
  },
  override: {
    robots: "index,follow",
    viewport: "width=device-width, initial-scale=1",
  },
}));

Complete Example

Here's a complete example showing all features:

app/products/[id]/page.tsx

import { metadataClient } from "@/lib/metadata";
 
interface ProductProps {
  params: { id: string };
}
 
export const generateMetadata = metadataClient.getMetadata(
  ({ params }: ProductProps) => ({
    path: `/products/${params.id}`,
    fallback: {
      title: "Product Details",
      description: "View detailed information about this product",
    },
    override: {
      robots: "index,follow",
    },
  }),
);
 
export default function ProductPage({ params }: ProductProps) {
  return <h1>Product ID: {params.id}</h1>;
}

Common Patterns

E-commerce Product Pages

app/products/[id]/page.tsx

export const generateMetadata = metadataClient.getMetadata(({ params }) => ({
  path: `/products/${params.id}`,
  fallback: {
    title: "Product - My Store",
    description: "High-quality products at great prices",
  },
}));

Blog Posts

app/blog/[slug]/page.tsx

export const generateMetadata = metadataClient.getMetadata(({ params }) => ({
  path: `/blog/${params.slug}`,
  fallback: {
    title: "Blog Post - My Blog",
    description: "Read our latest thoughts and insights",
  },
}));

Category Pages

app/category/[name]/page.tsx

export const generateMetadata = metadataClient.getMetadata(({ params }) => ({
  path: `/category/${params.name}`,
  fallback: {
    title: `${params.name} Category`,
    description: `Browse all items in the ${params.name} category`,
  },
}));

That's it! Your Next.js app now has AI-powered metadata generation.

Edit this page on GitHub

Functions

On this page