Next.js Setup Guide - generate-metadata

Complete setup guide for integrating generate-metadata with your Next.js application.

Prerequisites

Next.js 13+ with App Router
generate-metadata installed (npm install generate-metadata)
DSN from generate-metadata.com
API key for authentication (required for Next.js adapter)

Environment Configuration

1. Add Environment Variables

Create or update your .env.local file:

.env.local

NEXT_PUBLIC_GENERATE_METADATA_DSN=your_dsn_here
GENERATE_METADATA_API_KEY=your_api_key_here
GENERATE_METADATA_REVALIDATE_SECRET=your_revalidate_secret_here

Use NEXT_PUBLIC_ prefix for client-side access in Next.js applications. The API key should not use this prefix as it should remain server-side only.

The apiKey parameter is required for the Next.js adapter. Without it, TypeScript will throw a compilation error.

2. Create Metadata Client

Create a shared client instance:

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
});

Basic Page Setup

App Router Pages

app/page.tsx

import { metadataClient } from "@/lib/metadata";
 
export const generateMetadata = metadataClient.getMetadata(() => ({
  path: "/",
}));
 
export default function HomePage() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <p>This page will have AI-optimized metadata!</p>
    </div>
  );
}

Dynamic Pages

app/blog/[slug]/page.tsx

import { metadataClient } from "@/lib/metadata";
 
interface PageProps {
  params: { slug: string };
}
 
export const generateMetadata = metadataClient.getMetadata(
  async (props: PageProps) => ({
    path: `/blog/${props.params.slug}`,
  }),
);
 
export default function BlogPost({ params }: PageProps) {
  return (
    <article>
      <h1>Blog Post: {params.slug}</h1>
      <p>Content goes here...</p>
    </article>
  );
}

Layout Metadata

app/layout.tsx

import { metadataClient } from "@/lib/metadata";
 
// Root metadata doesn't need a path parameter
export const generateMetadata = metadataClient.getRootMetadata();
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Cache Revalidation Setup

The revalidation handler allows you to programmatically clear the metadata cache when your content changes.

Create the revalidation API route handler:

app/api/generate-metadata/[[...path]]/route.ts

import { metadataClient } from "@/lib/metadata";
 
export const { DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT } =
  metadataClient.revalidateHandler({
    revalidateSecret: process.env.GENERATE_METADATA_REVALIDATE_SECRET!,
  });

Keep your revalidate secret secure. Never expose it in client-side code or public repositories.

Verification

Check Developer Tools

Open your browser's developer tools and inspect the <head> section to verify meta tags are being generated.

Next Steps

Quick Start Guide

Build a complete example with real metadata

Next.js Functions

Learn about all available functions and options

Edit this page on GitHub

Setup

Quick Start Guide

Next.js Functions

On this page