Head Component
Configure the <head> tags, primary color, background color and favicon glyph
of the website.
Exported from nextra/components.
Props
| Name | Type | Default |
|---|---|---|
color.hue | number | { dark: number; light: number; }The hue of the primary theme color. | {
"dark": 204,
"light": 212
} |
color.saturation | number | { dark: number; light: number; }The saturation of the primary theme color. | 100 |
color.lightness | number | { dark: number; light: number; }The lightness of the primary theme color. | {
"dark": 55,
"light": 45
} |
faviconGlyph | stringThe glyph to use as the favicon. | |
backgroundColor.dark | stringBackground color for dark theme. | "rgb(17,17,17)" |
backgroundColor.light | stringBackground color for light theme. | "rgb(250,250,250)" |
children | React.ReactNodeContent of |
Usage
Static head tags
If you have static head tags, they should be put as children in Head. For
example:
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
---
title: My title
description: My description
---via exporting metadata object
export const metadata = {
title: 'My title',
description: 'My description'
}in dynamic routes with catch-all segment
import { importPage } from 'nextra/pages'
export async function generateMetadata(props) {
const { mdxPath } = await props.params
const { metadata } = await importPage(mdxPath)
return {
title: metadata.title || 'Nextra',
description: metadata.description || 'The next site builder'
}
}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 |
|---|---|---|---|
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.
<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.
<Head faviconGlyph="✦" />