Better Translateالرئيسية
GitHub
البدء
  • المقدمة
  • المهمة
  • التثبيت
  • CLI
  • المهارات
  • RTL
  • سجل التغييرات
المحولات
  • الأساس
  • React
  • Expo
  • Astro
  • MD & MDX
  • Next.js
  • TanStack Router

Next.js

استخدم @better-translate/nextjs عندما تريد روابط مسبوقة بمعرف اللغة، وترجمات من جانب الخادم، وتنقل مدرك للغة في App Router.

إذا كنت تحتاج أيضًا إلى hooks من جانب العميل، أضف @better-translate/react فوق هذا الإعداد.

1. تثبيت الحزم

npm install @better-translate/core @better-translate/nextjs

2. إنشاء المترجم

أنشئ 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

أمثلة

  • nextjs-example
  • nextjs-nested-locale-example