`Head`

Configure the <head> tags, primary color, background color and favicon glyph of the website.

Option	Type	Description
children	`ReactNode`	Content of `<head>`
color.hue	`number \| { dark: number; light: number }`	The hue of the primary theme color. Default: `{ dark: 204, light: 212 }`
color.saturation	`number \| { dark: number; light: number }`	The saturation of the primary theme color. Default: `100`
backgroundColor.dark	`"rgb(RRR,GGG,BBB)" \| "#RRGGBB"`	Background color for light theme. Default: `"rgb(17,17,17)"`
backgroundColor.light	`"rgb(RRR,GGG,BBB)" \| "#RRGGBB"`	Background color for dark theme. Default: `"rgb(250,250,250)"`
faviconGlyph	`string`	The glyph to use as the favicon

Static Head Tags

If you have static head tags, they should be put as children in Head. For example:

app/layout.jsx

import { Layout } from 'my-nextra-theme'
import { Head } from 'nextra/components'
 
export default function MyLayout({ children, ...props }) {
  return (
    <html lang="en">
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <body>
        <Layout>{children}</Layout>
      </body>
    </html>
  )
}

Dynamic Tags Based on Page

You can dynamically generate the head tags based on the current page’s front matter. For example:

via Markdown front matter

my-page/page.mdx

---
title: My title
description: My description
---

via exporting `metadata` object

my-page/page.mdx

export const metadata = {
  title: 'My title',
  description: 'My description'
}

in dynamic routes with Catch-all segment

app/[[...mdxPath]]/page.jsx

export async function generateMetadata({ params: { mdxPath } }) {
  const { metadata } = await loadPage(mdxPath)
  return {
    title: metadata.title || 'Nextra',
    description: metadata.description || 'The next site builder'
  }
}

You can refer to the useConfig API section for more information about the useConfig hook and the frontMatter object.

Theme Color

You can adjust the theme color of the website by setting primary hue and saturation values for light and dark themes. Try it out for this website:

Hue	Saturation	Background Color

Favicon Glyph

This isn’t supported by all browsers, but it’s a nice way to customize the favicon of the website simply by using an emoji or character.

Head