Examples

// pages/index.mdx
# Welcome to My Docs
 
This is a simple documentation page.

// pages/components.mdx
import { Button } from '../components/Button'
 
# Using Components
 
<Button>Click me!</Button>

// pages/code.mdx
# Code Examples
 
```js
function hello() {
  console.log('Hello, world!')
}

// theme.config.jsx
export default {
  logo: <span>My Project</span>,
  project: {
    link: 'https://github.com/your-repo'
  },
  useNextSeoProps() {
    return {
      titleTemplate: '%s – My Project'
    }
  }
}

// pages/_meta.js
export default {
  "index": {
    "title": "Introduction",
    "display": "hidden"
  },
  "en": "English",
  "zh": "中文"
}

// pages/_meta.js
export default {
  "index": {
    "title": "Introduction",
    "display": "hidden"
  },
  "v1": "v1.x",
  "v2": "v2.x"
}

import { useState } from 'react'
 
export function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}
 
<Counter />

import { useTheme } from 'nextra-theme-docs'
 
export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme()
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  )
}
 
<ThemeSwitcher />