أواجه مشكلة في استخدام 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
الخطأ يحدث عند محاولة استخدام الترويسة 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.
السؤال
محمود سعداوي2
السلام عليكم.
أواجه مشكلة في استخدام next-intl مع Next.js 15 حيث يظهر لي خطأ متعلق بـ Hydration وآخر متعلق بالترويسات المسؤولة عن تحديد اللغة المحلية.
الخطأ الأول:
الخطأ الثاني:
الخطأ يحدث عند محاولة استخدام الترويسة headers() بدون انتظار النتيجة بشكل صحيح.
الخطأ الثالث:
ملاحظات:
لتوضيح أكثر، هذه هي تفاصيل الكود الذي أستخدمه:
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
ملاحظات إضافية:
لتجنب مشكلة الـ Hydration قمت بتجربة استخدام useEffect ولكن لم يعمل الكود كما يجب.
شكرا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
0 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.