Comenzar
Inicio rápido con Vercel
Puedes comenzar creando tu propio sitio Nextra y desplegándolo en Vercel haciendo clic en el siguiente enlace:
Vercel creará el repositorio de Nextra y desplegará el sitio por ti con solo unos clics. Una vez hecho, cada cambio en el repositorio se desplegará automáticamente.
Crear manualmente
Nextra funciona como un complemento de Next.js y acepta una configuración de tema (layout) para renderizar la página. Para comenzar: 1
Instala Next.js, Nextra y React 2
npm i react react-dom next nextraInstala el tema de documentación 3
npm i nextra-theme-docsCrea la siguiente configuración de Next.js y de tema en el directorio raíz
import nextra from 'nextra'
const withNextra = nextra({
theme: 'nextra-theme-blog',
themeConfig: './theme.config.js'
})
export default withNextra()Crea un archivo theme.config.js para el tema de documentación
export default {
project: {
link: 'https://github.com/shuding/nextra' // Enlace de GitHub en la barra de navegación
},
docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // URL base para el repositorio de documentación
getNextSeoProps: () => ({ titleTemplate: '%s – Nextra' }),
navigation: true,
darkMode: true,
footer: {
text: `MIT ${new Date().getFullYear()} © Shu Ding.`
},
editLink: {
text: 'Editar esta página en GitHub'
},
logo: (
<>
<svg>...</svg>
<span>Generador de sitios estáticos Next.js</span>
</>
),
head: (
<>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Nextra: el próximo generador de documentación" />
<meta name="og:title" content="Nextra: el próximo generador de documentación" />
</>
),
primaryHue: {
dark: 204,
light: 212
}
}Más opciones de configuración para el tema de documentación se pueden encontrar aquí.
¡Listo! Ejecuta next dev para comenzar
Cualquier archivo .md o .mdx se convertirá en una página de documentación y se mostrará en la barra lateral. También puedes crear un archivo _meta.js para personalizar el orden y el título de las páginas.
Consulta el código fuente: https://github.com/shuding/nextra para más información.
También puedes usar <style jsx>
para dar estilo a los elementos dentro de theme.config.js.