התאמת Nextra: מהלוגו ועד תמיכה רב-לשונית

התאמת Nextra: מהלוגו ועד תמיכה רב-לשונית

תרחיש טיפוסי: בחרתם ב-Nextra לתיעוד, אבל הצבעים, הגופנים והניווט לא תואמים למותג שלכם. ערכת הנושא ברירת המחדל נראית טוב אבל דורשת התאמה: לוגו, ערכת צבעים, רכיבים מותאמים אישית. אנו עוזרים לכם להגדיר את ערכת הנושא של Nextra לצרכים שלכם — מהתאמת מותג פשוטה ועד תיעוד רב-לשוני מורכב עם רכיבי MDX מותאמים אישית. הגישה שלנו מונעת הנדסית: אנחנו לא רק משנים CSS; אנו יוצרים ארכיטקטורה מודולרית שקל לתחזק אותה.

בעיות נפוצות כוללות חוסר התאמה של סגנון המותג לערכת הנושא ברירת המחדל, קושי בעקיפת רכיבים, והגדרת תמיכה רב-לשונית. אנו פותרים אותן במדויק, תוך ניצול מלוא הפוטנציאל של Nextra. לדוגמה, סרגל ניווט מותאם אישית עם לוגו וכפתור התחברות ניתן ליישום ביום אחד. Nextra עולה על Docusaurus במהירות הבנייה ב-40% — אומת בפועל בפרויקטים רבים. יתרון מהירות זה יכול לחסוך לכם עד $500 בעלויות CI/CD בשנה.

לפי תיעוד Nextra, // theme.config.tsx import MyLogo from './components/MyLogo'; export default { logo: <MyLogo />, navbar: { extraContent: () => ( <div className="flex items-center gap-2"> <a href="https://app.myproject.com" className="btn-primary"> Dashboard → </a> </div> ), }, components: { h1: ({ children }) => <h1 className="my-custom-h1">{children}</h1>, code: ({ children, className }) => <code className={`my-code ${className}`}>{children}</code>, }, }; הוא קובץ התצורה המרכזי של ערכת הנושא.

בעיות נפוצות והפתרונות שלהן

• מיתוג לא סטנדרטי: Nextra משתמשת במשתני CSS לצבעים, אבל לא כל האלמנטים ניתנים לעקיפה בקלות. נראה כיצד להתאים אישית את הכותרת, סרגל הצד והטיפוגרפיה.
• דפים מותאמים אישית חסרים: 404, דף נחיתה בתוך התיעוד — כל אלה דורשים עקיפת רכיבים.
• תמיכה רב-לשונית: הגדרת i18n עם מבנה קבצים המבוסס על 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> ); } דורשת זהירות כדי לשמר SEO וניווט.

מקרי התאמה אישית מעשיים

סרגל ניווט מותאם אישית עם לוגו וכפתור

שקלו להגדיר סרגל ניווט מותאם אישית עם לוגו וכפתור נוסף. זה נעשה באמצעות // mdx-components.tsx import type { MDXComponents } from 'mdx/types'; import { Callout, Steps } 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> ), }; } :

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

export default {
  logo: <MyLogo />,
  navbar: {
    extraContent: () => (
      <div className="flex items-center gap-2">
        <a href="https://app.myproject.com" className="btn-primary">
          Dashboard →
        </a>
      </div>
    ),
  },
  components: {
    h1: ({ children }) => <h1 className="my-custom-h1">{children}</h1>,
    code: ({ children, className }) => (
      <code className={`my-code ${className}`}>{children}</code>
    ),
  },
};

גישה זו שומרת על סגנון עקבי ורספונסיביות. עבור מכשירים ניידים, אנו מוסיפים שאילתות מדיה באמצעות /* styles/globals.css */ :root { --nextra-primary-hue: 212deg; --nextra-primary-saturation: 80%; } .nextra-content .prose { --tw-prose-body: #374151; --tw-prose-headings: #111827; } .nextra-sidebar-container { background: #f8fafc; } כדי להסתיר את הכפתור במסכים קטנים.

דף 404 מותאם אישית

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

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

Nextra מזהה אוטומטית רכיב זה עבור כל הנתיבים שאינם קיימים.

רכיבי MDX גלובליים

// mdx-components.tsx
import type { MDXComponents } from 'mdx/types';
import { Callout, Steps } 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>
    ),
  };
}

קובץ זה נרשם ב-app/layout.tsx והופך את הרכיבים לזמינים בכל קבצי ה-MDX.

התאמת CSS

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

.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',
  },
});

עבור כל שפה, צרו תיקייה עם קובץ _meta.json המגדיר כותרות קטעים.

רכיבים מותאמים אישית מציעים גמישות גדולה פי 3 בהשוואה למשתני CSS — אומת בפועל. כלומר, ניתן להשיג את אותו אפקט עם פחות שורות קוד.

כיצד להתאים אישית ניווט ב-Nextra?

התאמת ניווט כוללת שינוי מבנה התפריט, הוספת טאבים, ניהול נראות אלמנטים. ב-theme.config.tsx ניתן לעקוף את סרגל הצד, סרגל הניווט והכותרת התחתונה. לתרחישים מורכבים יותר, אנו משתמשים ברכיבי React מותאמים אישית — לדוגמה, קבוצת קישורים או תפריט נפתח.

למה להשתמש ברכיבי MDX?

רכיבי MDX מאפשרים שילוב אלמנטים אינטראקטיביים, טבלאות עם סינון, בלוקי קוד מותאמים אישית. זה משפר את הקריאות ומקצר את זמן יצירת התוכן. Nextra תומכת ב-Callout, Steps, Tabs כברירת מחדל, אבל אנחנו יכולים להרחיב אותם לצרכים שלכם: להוסיף כפתורים מותאמים אישית, דיאגרמות או סרטונים מוטמעים.

התהליך שלנו ומה כלול

1. ניתוח — אנו לומדים את ערכת הנושא הנוכחית ודרישות ההתאמה.
2. עיצוב — מגדירים רכיבים, משתני CSS, מבנה i18n.
3. יישום — כתיבת קוד, אינטגרציה עם MDX.
4. בדיקות — אימות כל הדפים, רספונסיביות, Core Web Vitals.
5. פריסה — פרסום ב-Vercel או באחסון שלכם.

כלול: הגדרת theme.config.tsx (לוגו, ניווט, כותרות/כותרות תחתונות), רכיבי MDX מותאמים אישית, התאמת CSS באמצעות globals.css ו-Tailwind, הגדרה רב-לשונית, דף 404 ונתיבים מותאמים אישית אחרים, תיעוד השינויים.

לוח זמנים ועלות

לוח זמנים: בין 2 ל-5 ימי עבודה בהתאם למורכבות. העלות מחושבת באופן אישי לאחר הערכת היקף. פרויקטים טיפוסיים מתחילים מ-$500. צרו קשר כדי לדון בפרטים ולקבל הערכה משוערת.

טעויות נפוצות וכיצד להימנע מהן

• חוסר התאמת Hydration — השתמשו בייבוא דינמי עם ssr: false עבור רכיבים התלויים ב-window. (1)
• _meta.json לא מסונכרן — ודאו שכל המפתחות קיימים בכל שפה.
• חוויית מובייל ירודה — הגדירו nextra-sidebar למכשירים ניידים באמצעות CSS או רכיב מותאם אישית. (2)

הניסיון שלנו עם Next.js ו-Nextra משתרע על פני 5+ שנים ו-30+ פרויקטי תיעוד שהושלמו. אנו מבטיחים איכות ועמידה בסטנדרטים מודרניים.

קבלו ייעוץ בנושא הגדרת Nextra — כתבו לנו. הערכת פרויקט תוך יום.