Theme 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