Next.js
استخدم @better-translate/nextjs عندما تريد روابط مسبوقة بمعرف اللغة، وترجمات من جانب الخادم، وتنقل مدرك للغة في App Router.
إذا كنت تحتاج أيضًا إلى hooks من جانب العميل، أضف @better-translate/react فوق هذا الإعداد.
1. تثبيت الحزم
npm install @better-translate/core @better-translate/nextjs2. إنشاء المترجم
أنشئ src/lib/i18n/config.ts:
ts
1import { configureTranslations } from "@better-translate/core";23const en = {4 home: {5 title: "Hello from Next.js",6 },7} as const;89const es = {10 home: {11 title: "Hola desde Next.js",12 },13} as const;1415export const translator = await configureTranslations({16 availableLocales: ["en", "es"] as const,17 defaultLocale: "en",18 fallbackLocale: "en",19 messages: { en, es },20});3. إضافة ملف التوجيه
أنشئ src/lib/i18n/routing.ts:
ts
1import { defineRouting } from "@better-translate/nextjs";23export const routing = defineRouting({4 defaultLocale: "en",5 locales: ["en", "es"] as const,6 routeTemplate: "/[lang]",7});4. إضافة مساعدي الطلب والخادم
أنشئ src/lib/i18n/request.ts:
ts
1import { getRequestConfig } from "@better-translate/nextjs/server";23import { translator } from "./config";45export const requestConfig = getRequestConfig(async () => ({6 translator,7}));أنشئ src/lib/i18n/server.ts:
ts
1import { createServerHelpers } from "@better-translate/nextjs/server";23import { requestConfig } from "./request";45export const { getTranslations } = createServerHelpers(requestConfig);5. إضافة تنقل مدرك للغة
أنشئ src/lib/i18n/navigation.ts:
tsx
1"use client";23import Link from "next/link";4import { useParams, usePathname, useRouter } from "next/navigation";56import { createNavigationFunctions } from "@better-translate/nextjs/navigation";78import { routing } from "./routing";910export const {11 Link: I18nLink,12 usePathname: useI18nPathname,13 useRouter: useI18nRouter,14} = createNavigationFunctions({15 Link,16 routing,17 useParams,18 usePathname,19 useRouter,20});6. إضافة الوكيل
أنشئ src/proxy.ts:
ts
1import { createProxy, getProxyMatcher } from "@better-translate/nextjs/proxy";23import { routing } from "./lib/i18n/routing";45export const proxy = createProxy(routing);67export const config = {8 matcher: getProxyMatcher(routing),9};7. عرض صفحة مترجمة
أنشئ src/app/[lang]/page.tsx:
tsx
1import { setRequestLocale } from "@better-translate/nextjs/server";23import { getTranslations } from "../../lib/i18n/server";45export default async function HomePage({6 params,7}: {8 params: Promise<{ lang: string }>;9}) {10 const { lang } = await params;1112 setRequestLocale(lang);1314 const t = await getTranslations();1516 return <h1>{t("home.title")}</h1>;17}8. إضافة روابط تحتفظ باللغة
أنشئ src/components/language-links.tsx:
tsx
1"use client";23import { I18nLink } from "../lib/i18n/navigation";45export function LanguageLinks() {6 return (7 <nav>8 <I18nLink href="/" locale="en">9 English10 </I18nLink>11 {" | "}12 <I18nLink href="/" locale="es">13 Español14 </I18nLink>15 </nav>16 );17}متى تضيف محول React
أضف @better-translate/react فقط عندما تحتاج المكونات من جانب العميل إلى useTranslations() أو موفر.
توليد ملفات اللغة تلقائيًا
بدلاً من كتابة كل الترجمة يدويًا، استخدم CLI لاستخراج السلاسل وتوليد ملفات اللغة: دليل CLI