حول إستخدام next-intel مع nextjs15

محمود سعداوي2 · 9 نوفمبر

السلام عليكم.

أواجه مشكلة في استخدام next-intl مع Next.js 15 حيث يظهر لي خطأ متعلق بـ Hydration وآخر متعلق بالترويسات المسؤولة عن تحديد اللغة المحلية.

الخطأ الأول:

اقتباس

Hydration failed because the server rendered HTML didn't match the client. As a result, this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. See more info here: https://nextjs.org/docs/messages/react-hydration-error

الخطأ الثاني:

اقتباس

Error: Route "/[locale]" used `headers().get('X-NEXT-INTL-LOCALE')`. `headers()` should be awaited before using its value. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis

الخطأ يحدث عند محاولة استخدام الترويسة headers() بدون انتظار النتيجة بشكل صحيح.

الخطأ الثالث:

اقتباس

Error: INVALID_KEY: Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character.

ملاحظات:

لتوضيح أكثر، هذه هي تفاصيل الكود الذي أستخدمه:

next.config.js:

const nextConfig = { timeZone: "Africa/Tunis", }; 
const withNextIntl = require("next-intl/plugin")("./i18n.js"); 
module.exports = withNextIntl(nextConfig);

i18n.js:

import { getRequestConfig } from "next-intl/server";

export default getRequestConfig(async ({ locale }) => ({  // locale مشطبة 
  messages: (await import(`./messages/${locale}.json`)).default,
  timeZone: "Africa/Tunis",
}));

middleware.js:

import createMiddleware from "next-intl/middleware";

export default createMiddleware({
    locales: ["en", "fr", "ar"],
    defaultLocale: "en",
});

export const config = {
    matcher: ["/((?!api|_next|.*\\..*).*)"],
};

app/[locale]/layout.js

import { NextIntlClientProvider } from "next-intl";
import { AppProvider } from "@/context/AppContext";
import { Tajawal } from "next/font/google";
import { getLocale, getMessages } from "next-intl/server";

const tajawal = Tajawal({
  subsets: ["arabic"],
  weight: ["300", "400", "500", "700"],
});

export default async function RootLayout({ children }) {
  const locale  = await getLocale(); 
  const messages = getMessages()

  const direction = locale === "ar" ? "rtl" : "ltr";
  const fontClassName = tajawal.className;

  return (
    <html lang={locale} dir={direction}>
      <body className={fontClassName}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          <AppProvider>{children}</AppProvider>
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

ملاحظات إضافية:

لتجنب مشكلة الـ Hydration قمت بتجربة استخدام useEffect ولكن لم يعمل الكود كما يجب.

شكرا

حول إستخدام next-intel مع nextjs15

السؤال

محمود سعداوي2

0 أجوبة على هذا السؤال

Recommended Posts

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية