Theme Configuration
Nextra 3 offers a powerful configuration file theme.config.tsx to customize your site’s appearance and behavior.
Basic Layout
theme.config.tsx
import React from 'react'
import { DocsThemeConfig } from 'nextra-theme-docs'
const config: DocsThemeConfig = {
logo: <span>My Nextra Site</span>,
project: {
link: 'https://github.com/my-user/my-repo',
},
// ... other options
}
export default configKey Options
Logo
You can use a component for the logo, allowing for dynamic content or images.
logo: (
<>
<svg>...</svg>
<span style={{ marginLeft: '.4em', fontWeight: 800 }}>
My Documentation
</span>
</>
),Footer
Customize the footer text or hide it.
footer: {
text: (
<span>
MIT {new Date().getFullYear()} © My Company.
</span>
)
},Navigation Repository
Link to your source code so users can view the repository.
docsRepositoryBase: 'https://github.com/my-user/my-repo/tree/main/docs',Dark Mode
Nextra 3 supports dark mode out of the box. You can customize the behavior (though it’s usually automatic).
useNextSeoProps() {
return {
titleTemplate: '%s – My Project'
}
}