Getting started
Install next-meta and choose the rendering API for your application.
Install
npm install next-metaUsing another package manager? Run pnpm add next-meta, yarn add next-meta, or bun add next-meta instead. Your application provides React, React DOM, and Next.js.
The focused /app, /core, and /pages entry points and explicit array policies require v0.5.0 or newer. For v0.4.x, use the root Pages Router API. See the migration guide when upgrading.
App Router
Use the server-safe adapter with Next.js 14 or newer. Export metadata from a server layout or page; do not place PageMeta in an App Router client component.
// app/page.tsx
import { toMetadata } from 'next-meta/app'
export const metadata = toMetadata({
title: 'Hello, open web.',
description: 'Make every page worth sharing.',
baseUrl: 'https://example.com',
canonical: '/',
url: '/',
images: [{ url: '/social/home.png', alt: 'Hello, open web.' }],
twitter: { card: 'summary_large_image' },
})Continue with the App Router guide for site defaults, title templates, and dynamic routes.
Pages Router
Use MetaProvider for site defaults and PageMeta for each page. The root entry point remains supported.
// pages/_app.tsx
import type { AppProps } from 'next/app'
import { MetaProvider } from 'next-meta/pages'
export default function App({ Component, pageProps }: AppProps) {
return (
<MetaProvider
baseUrl="https://example.com"
siteName="Example"
description="Example documentation"
images={['/social/default.png']}
skipRepeatableDefaultsRender
>
<Component {...pageProps} />
</MetaProvider>
)
}// pages/index.tsx
import { PageMeta } from 'next-meta/pages'
export default function Home() {
return (
<>
<PageMeta title="Home" canonical="/" url="/" />
<main>Welcome to Example.</main>
</>
)
}Continue with the Pages Router guide, including how to keep repeated tags correct during navigation.
