اذهب إلى المحتوى
  • 0

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

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

السؤال

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

أواجه مشكلة في استخدام 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 ولكن لم يعمل الكود كما يجب.

شكرا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

لا توجد أي إجابات على هذا السؤال بعد

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...