Skip to Content
Nextra 4.0 is released. Read more
DocumentationBuilt-In ComponentsHead

<Head> Component

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

OptionTypeDescription
childrenReactNodeContent of <head>
color.huenumber | { dark: number; light: number }The hue of the primary theme color.
Default: { dark: 204, light: 212 } (0 - 360)
color.saturationnumber | { dark: number; light: number }The saturation of the primary theme color.
Default: 100 (0 - 100)
color.lightnessnumber | { dark: number; light: number }The lightness of the primary theme color (0 - 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)"
faviconGlyphstringThe 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(props) {
  const { mdxPath } = await props.params
  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, Saturation and Lightness (HSL) values for light and dark themes. Try it out for this website:

Hue (H)Saturation (S)Lightness (L)Background Color
💡
Tip

You can adjust the lightness independently for dark or light mode to increase legibility. E.g. to have a neutral primary color you can set the primary color to be white HSL(0, 0%, 100%) on dark theme and gray HSL(0, 0%, 50%) for light theme.

app/layout.jsx
<Head
  color={{
    hue: 0,
    saturation: 0,
    lightness: {
      light: 50,
      dark: 100
    }
  }}
/>

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.

app/layout.jsx
<Head faviconGlyph="✦" />
Last updated on
BannerSearch