Налаштування та кастомізація теми Nextra

Налаштування та кастомізація теми Nextra

Тема Nextra Docs налаштовується через theme.config.tsx та перевизначення компонентів. Оскільки вона побудована на Next.js, ви можете використовувати Tailwind, CSS Modules або styled-components.

Користувацький логотип і панель навігації

// 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;
}

/* Бічна панель */
.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": "Introduction",
  "guide": "Guide",
  "api": "API Reference"
}

Кастомізація теми Nextra займає 1–3 дні.