Настройка и кастомизация темы Nextra

Настройка и кастомизация темы Nextra

Nextra Docs Theme кастомизируется через theme.config.tsx и переопределение компонентов. Поскольку это Next.js, можно использовать Tailwind, CSS Modules или styled-components.

Кастомный Logo и Navbar

// theme.config.tsx
import MyLogo from './components/MyLogo';

const config: DocsThemeConfig = {
  logo: <MyLogo />,
  navbar: {
    extraContent: () => (
      <div className="flex items-center gap-2">
        <a href="https://app.myproject.com" className="btn-primary">
          Dashboard →
        </a>
      </div>
    ),
  },
};

Кастомный 404

// app/not-found.tsx
export default function NotFound() {
  return (
    <div className="flex flex-col items-center py-24">
      <h1 className="text-6xl font-bold">404</h1>
      <p>Page not found</p>
      <a href="/docs">← Back to docs</a>
    </div>
  );
}

Переопределение компонентов темы

// theme.config.tsx
const config: DocsThemeConfig = {
  components: {
    h1: ({ children }) => (
      <h1 className="my-custom-h1">{children}</h1>
    ),
    code: ({ children, className }) => (
      <code className={`my-code ${className}`}>{children}</code>
    ),
  },
};

Глобальные MDX-компоненты

// app/layout.tsx или mdx-components.tsx
import type { MDXComponents } from 'mdx/types';
import { Callout, Steps, Step } from 'nextra/components';
import ApiTable from '@/components/ApiTable';

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
    ApiTable,
    // Кастомная таблица
    table: ({ children }) => (
      <div className="overflow-x-auto">
        <table className="min-w-full">{children}</table>
      </div>
    ),
  };
}

CSS кастомизация

/* styles/globals.css */
:root {
  --nextra-primary-hue: 212deg;
  --nextra-primary-saturation: 80%;
}

/* Переопределение стилей prose */
.nextra-content .prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
}

/* Sidebar */
.nextra-sidebar-container {
  background: #f8fafc;
}

i18n для мультиязычной документации

// next.config.ts
const withNextra = nextra({ /* ... */ });
export default withNextra({
  i18n: {
    locales: ['en', 'ru', 'de'],
    defaultLocale: 'en',
  },
});

// content/ru/_meta.json
{
  "index": "Введение",
  "guide": "Руководство",
  "api": "API Reference"
}

Кастомизация темы Nextra — 1–3 дня.