تعدد اللغات في Next.js الميزات

كل ما تحتاجه لبناء تطبيقات Next.js متعددة اللغات. ترجمات مدعومة بـ CDN وعرض من جانب الخادم وتبديل فوري للغة.

توصيل مدعوم بـ CDN

تُقدَّم الترجمات من مواقع edge عالمية عبر Cloudflare CDN. أوقات تحميل أقل من 50ms مع إبطال التخزين المؤقت التلقائي عند النشر.

تعلم عن توصيل CDN

العرض من جانب الخادم

تُحَّمَل الرسائل من جانب الخادم في تخطيطك عبر getMessages(). لا وميض محتوى غير مترجم، متوافق تماماً مع تحسين محركات البحث مع ترجمات مُسبقة العرض.

عرض مرجع API

تبديل اللغة فورياً

بدّل اللغات من جانب العميل باستخدام useSetLocale() دون إعادة تحميل كاملة. يجلب BetterI18nProvider ترجمات جديدة من CDN ويُعيد العرض فوراً.

وثائق جانب العميل

اكتشاف اللغة الديناميكي

تجلب useManifestLanguages() اللغات المتاحة من مانيفست CDN. أضف لغة في لوحة التحكم وستظهر تلقائياً في تطبيقك.

استكشاف الخطافات

مفاتيح ترجمة آمنة بالأنواع

مبني على next-intl بدعم TypeScript الكامل. تُوفّر useTranslations() فحصاً للأخطاء عند وقت التجميع لمفاتيح الترجمة - اكتشف الأخطاء قبل وقت التشغيل.

وثائق API الآمنة بالأنواع

ترجمة مدعومة بالذكاء الاصطناعي

احصل على اقتراحات ترجمة مدعومة بالذكاء الاصطناعي في لوحة تحكم better-i18n. يضمن سير عمل الموافقة البشرية الجودة. ترجمة مشاريع كاملة في دقائق لا أيام.

جرب لوحة التحكم

كشف اللغة عبر الوسيط

يكتشف betterMiddleware() لغة المستخدم من مسار URL أو الكوكيز أو رأس Accept-Language. نمط رد النداء على غرار Clerk لتكامل مبسط مع المصادقة.

دليل إعداد الوسيط

إدارة لوحة التحكم

إدارة الترجمات واللغات ومجالات الأسماء من dash.better-i18n.com. تعاون حي وتاريخ إصدارات وتكامل GitHub.

فتح لوحة التحكم

Integration Journey

Get up and running in 4 simple steps.

Install

Add the SDK to your project

bun add @better-i18n/next

Configure

Create your i18n config

export const i18n = createI18n({ ... })

Wrap Provider

Add BetterI18nProvider to your layout

<BetterI18nProvider>

Use Translations

Call useTranslations() in any component

const t = useTranslations("ns")

Framework Compatibility

better-i18n works with all major React frameworks out of the box.

Feature	Next.js	Expo	Remix	Hono	TanStack
CDN Fetch	✓	✓	✓	✓	✓
ISR / Revalidation	✓	—	✓	—	✓
useSetLocale()	✓	✓	✓	✓	✓
useFormatter()	✓	✓	✓	✓	✓
LocaleDropdown	✓	✓	✓	✓	✓
SSR Support	✓	—	✓	✓	✓

تكامل سريع

أضف دعم تعدد اللغات إلى تطبيق Next.js في أقل من 5 دقائق. اتبع الدليل الكامل

i18n.config.ts

// i18n.config.ts
import { createI18n } from "@better-i18n/next";

export const i18n = createI18n({
  project: "your-org/your-project",
  defaultLocale: "en",
});

// middleware.ts
import { i18n } from "./i18n.config";
export default i18n.betterMiddleware();

// app/[locale]/layout.tsx
const messages = await i18n.getMessages(locale);
<BetterI18nProvider config={i18n.config} locale={locale} messages={messages}>
  {children}
</BetterI18nProvider>

// Any component
const t = useTranslations("namespace");
return <h1>{t("title")}</h1>;

هل أنت مستعد للتعدد اللغوي؟

أنشئ حساباً مجانياً، أضف لغاتك، وابدأ الترجمة. انضم إلى آلاف المطورين الذين يبنون لجمهور عالمي.

قراءة التوثيق فتح لوحة التحكم

جاري التحميل...

Feature

Next.js

Expo

Remix

Hono

TanStack

CDN Fetch

✓

ISR / Revalidation

✓

—

✓

—

✓

useSetLocale()

✓

useFormatter()

✓

LocaleDropdown

✓

SSR Support

✓

—

✓

// i18n.config.ts import { createI18n } from "@better-i18n/next"; export const i18n = createI18n({ project: "your-org/your-project", defaultLocale: "en", }); // middleware.ts import { i18n } from "./i18n.config"; export default i18n.betterMiddleware(); // app/[locale]/layout.tsx const messages = await i18n.getMessages(locale); <BetterI18nProvider config={i18n.config} locale={locale} messages={messages}> {children} </BetterI18nProvider> // Any component const t = useTranslations("namespace"); return <h1>{t("title")}</h1>;