الواجهات والتصميم

next-intl Internationalization

ضيف تعدد اللغات لتطبيقات Next.js App Router مع next-intl، بدعم الترجمات والتنسيق وتوجيه اللغات.

Claude Code Cursor Copilot Windsurf

نظرة عامة

next-intl هي مكتبة التعدد اللغوي الرائدة لـ Next.js App Router، توفر ترجمات آمنة الأنواع وتنسيق رسائل ICU وتوجيه مبني على اللغة ودعم مكونات الخادم. يمكن لعملاء الذكاء الاصطناعي إعداد البنية التحتية الكاملة لتعدد اللغات، وإنشاء ملفات الترجمة، وتنفيذ التوجيه المدرك للغة مع البرمجيات الوسيطة.

تدعم المكتبة مكونات الخادم والعميل معًا، مما يجعلها متوافقة تمامًا مع بنية App Router. يمكن لعميل الذكاء الاصطناعي تكوين البرمجيات الوسيطة لاكتشاف اللغة وإعادة كتابة URL، وإعداد ملفات الرسائل لكل لغة، وتنفيذ خطاف useTranslations لمكونات العميل، واستخدام getTranslations لمكونات الخادم.

تتعامل next-intl مع سيناريوهات تنسيق معقدة بما في ذلك التواريخ والأوقات والأرقام والجمع والنص الغني مع مكونات مضمنة. يمكن لعملاء الذكاء الاصطناعي إنشاء ملفات ترجمة JSON، وتنفيذ مبدلات اللغة، وإعداد اللغات الافتراضية، وتكوين وسوم hreflang الملائمة لـ SEO للمواقع متعددة اللغات.

لمن هذه الأداة؟

فرق Next.js بتضيف دعم متعدد اللغات لتطبيقاتها
مطورين بينفذوا توجيه مبني على اللغة مع بادئات URL
فرق بتدير ملفات ترجمة عبر لغات متعددة
مهندسين بيبنوا مواقع متعددة اللغات محسّنة لـ SEO

التثبيت

إعداد Claude Code

npm install next-intl

الإعدادات

// i18n/request.ts
import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`../messages/${locale}.json`)).default,
}));

// middleware.ts
import createMiddleware from "next-intl/middleware";
export default createMiddleware({
  locales: ["en", "ar", "es"],
  defaultLocale: "en",
});

زيارة المصدر (المستندات الرسمية)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor