Configuration

To configure the theme, edit or create the theme.config.js file in the root directory. The file looks something like this:

export default {
projectLink: 'https://gitlab.com/librewolf-community/browser',
titleSuffix: ' – Nextra',
footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
// ...
}

projectLink

The URL that the button in the top right will point to.

Type: string
Default: https://github.com/shuding/nextra

projectLinkIcon

Changes the icon that is shown in the top right.

Type: ReactNode Default: GitHub icon

Example:

import Gitlab from '@geist-ui/react-icons/gitlab'
export default {
projectLinkIcon: <Gitlab />,
}

docsRepositoryBase

The base URL of the GitHub repository the docs are located in. This will be used for the Edit this Page on GitHub button.

Type: string
Default: https://github.com/shuding/nextra

titleSuffix

Suffix that will be added to page titles in the URL bar.

Type: string
Default: – Nextra

nextLinks and prevLinks

Specifies if arrows are being shown at the bottom of a page showing the next and previous page, like the ones at the bottom of this page.

Type: boolean
Default: true

search

Specifies if a search box should be shown in the top right.

Type: boolean
Default: true

customSearch

A custom component to display instead of the search bar in the top right, for example, Algolia.

Type: ReactNode

darkMode

Specifies if the user can select a dark mode.

Type: boolean
Default: true

defaultMenuCollapsed

Specifies if the menu on the left is collapsed by default.

Type: boolean
Default: false

font

Specifies if nextra should load its own fonts. Disable this if you want to use a custom font.

Type: boolean
Default: true

footer

Specifies if the footer should be shown.

Type: boolean
Default: true

footerText

The text that is shown on the left of the footer.

Type: ReactNode

Example:

export default {
footerText: `MIT ${new Date().getFullYear()} © Nextra.`,
}

footerEditLink

The text that should be shown on the link that leads to the editable page on the repository.

Type: boolean
Default: Edit this page

Example: Edit this page on GitHub

logo

The logo in the top left.

Type: ReactNode\

Example:

export default {
logo: (
<React.Fragment>
<span className="mr-2 font-extrabold hidden md:inline">Nextra</span>
<span className="text-gray-600 font-normal hidden md:inline">
The Next Docs Builder
</span>
</React.Fragment>
),
}

head

The head that should be inserted into the html document.

Type: ReactNode

Example:

export default {
head: (
<React.Fragment>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta httpEquiv="Content-Language" content="en" />
<meta name="description" content="Nextra: the next docs builder" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@shuding_" />
<meta property="og:title" content="Nextra: the next docs builder" />
<meta property="og:description" content="Nextra: the next docs builder" />
<meta name="apple-mobile-web-app-title" content="Nextra" />
</React.Fragment>
),
}

direction

The direction of the text on the page

Type: ltr || rtl

i18n

The internationalization (i18n) config. See more here.

floatTOC

Specifies if the table of contents of a page (the headings) should be displayed floating on the right instead of being integrated in the menu on the left.

Type: boolean
Default: false

unstable_faviconGlyph

A glyph that should be used as a favicon.

Type: char

This is an unstable and experimental feature and not recommended for general use.

unstable_stork

Use Stork Search for the search bar, a library for fast full-text search powered by WebAssembly.

Type: boolean
Default: false

This is an unstable and experimental feature and not recommended for general use.