🚧 This is a work-in-progress docs for Nextra 2.0, content may be incomplete or inaccurate.
Documentation
Configuration

Configuration

To configure the theme, edit or create the theme.config.jsx file in the root directory and configure it in next.config.js. An example of the configuration is shown below:

export default {
  logo: (
    <>
      <b>Nextra</b><span>– The Next Docs Builder</span>
    </>
  ),
  github: "https://github.com/vercel/swr",
  docsRepositoryBase: "https://github.com/vercel/swr-site/blob/master/pages",
  titleSuffix: ` – SWR`,
  search: true,
  toc: true,
  darkMode: true,
  defaultMenuCollapsed: true,
  nextThemes: {
    defaultTheme: 'system',
    storageKey: 'theme'
  },
  navigation: {
    next: true,
    prev: true
  },
  editLinkText: "Edit this page on GitHub",
  gitTimestamp: "Last updated on",
  feedback: {
    link: "Question? Give us feedback →",
    labels: "feedback",
  },
  serverSideError: {
    labels: 'bug',
    link: 'Submit an issue about this error →'
  },
  sidebar: {
    defaultMenuCollapsed: false,
    subtitle: null
  },
  titleSuffix: ' – Nextra',
  toc: {
    component: TOC,
    extraContent: null,
    float: true,
    title: 'On This Page'
  },
  unstable_faviconGlyph: ''
}

Detailed information for each configuration option is shown below.

projectLink

The URL of the project homepage, used by the icon in the navbar. Usually the GitHub repository.

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

projectLinkIcon

The icon of the project link button, shown in the navbar.

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 by the “Edit this Page” link.

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

titleSuffix

String that will be added to site title as the suffix.

Type: string | (() => string)
Default: – Nextra

navigation

Specifies if navigation links (previous page and next page) are being shown at the bottom of a page.

Type: boolean | { prev?: boolean; next?: boolean }
Default: true

search

(todo)

darkMode

Specifies if the user can select a dark mode.

Type: boolean
Default: true

defaultMenuCollapsed

Specifies if folders in the sidebar should be collapsed by default or not.

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: (
    <>
      <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>
    </>
  )
}

head

The head that should be inserted into the html document.

Type: ReactNode

Example:

export default {
  head: (
    <>
      <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" />
    </>
  )
}

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.
Last updated on August 21, 2022