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: ReactNode
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

unstable_stork

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

Type: boolean
Default: false