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

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

أواجه مشكل في إستخدام next-intel مع nextjs15 حيث يظهر لي خطأ 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


- lang="en"
- dir="ltr"
- className="__className_f09b3f"

الخطأ الثاني

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
    at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26)
    at locale (webpack:///i18n.js?938b:3:41)
    at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26)
    at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26)
    at apply (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.react-server.development.js:888:26)
    at getLocale (webpack:///app/[locale]/layout.js?3ae2:12:33)
  1 | import { getRequestConfig } from "next-intl/server";
  2 |
> 3 | export default getRequestConfig(async ({ locale }) => ({
    |                                         ^
  4 |   messages: (await import(`./messages/${locale}.json`)).default,
  5 |   timeZone: "Africa/Tunis",
  6 | }));
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.

Invalid keys: (app-pages-browser)/./context/AppContext.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next-intl/dist/esm/shared/NextIntlClientProvider.js (at _response._bundlerConfig), (app-pages-browser)/./app/[locale]/page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-segment.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/lib/metadata/metadata-boundary.js (at _response._bundlerConfig)

If you're migrating from a flat structure, you can convert your messages as follows:

import {set} from "lodash";

const input = {
  "one.one": "1.1",
  "one.two": "1.2",
  "two.one.one": "2.1.1"
};

const output = Object.entries(input).reduce(
  (acc, [key, value]) => set(acc, key, value),
  {}
);

// Output:
//
// {
//   "one": {
//     "one": "1.1",
//     "two": "1.2"
//   },
//   "two": {
//     "one": {
//       "one": "2.1.1"
//     }
//   }
// }

    at nextCreate (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react-dom/cjs/react-dom-server.edge.development.js:3911:19)   
    at useMemo (file:///C:/Users/saadaoui/Desktop/portfolio/node_modules/next/dist/compiled/next-server/dist/compiled/react/cjs/react.development.js:1495:33) {
  code: 'INVALID_KEY',
  originalMessage: 'Namespace keys can not contain the character "." as this is used to express nesting. Please remove it or replace it with another character.\n' +
    '\n' +
    'Invalid keys: (app-pages-browser)/./context/AppContext.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next-intl/dist/esm/shared/NextIntlClientProvider.js (at _response._bundlerConfig), (app-pages-browser)/./app/[locale]/page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-page.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/client-segment.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js (at _response._bundlerConfig), (app-pages-browser)/./node_modules/next/dist/lib/metadata/metadata-boundary.js (at _response._bundlerConfig)\n' +
    '\n' +
    "If you're migrating from a flat structure, you can convert your messages as follows:\n" +
    '\n' +
    'import {set} from "lodash";\n' +
    '\n' +
    'const input = {\n' +
    '  "one.one": "1.1",\n' +
    '  "one.two": "1.2",\n' +
    '  "two.one.one": "2.1.1"\n' +
    '};\n' +
    '\n' +
    'const output = Object.entries(input).reduce(\n' +
    '  (acc, [key, value]) => set(acc, key, value),\n' +
    '  {}\n' +
    ');\n' +
    '\n' +
    '// Output:\n' +
    '//\n' +
    '// {\n' +
    '//   "one": {\n' +
    '//     "one": "1.1",\n' +
    '//     "two": "1.2"\n' +
    '//   },\n' +
    '//   },\n' +
    '//   "two": {\n' +
    '//     "one": {\n' +
    '//       "one": "2.1.1"\n' +
    '//     }\n' +
    '//   }\n' +
    '// }\n'
}

للتوضيح أكثر هذا الكود كاملا

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 }) => ({
  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 إلا أنه لم يتم تفعيل الكود بتاتا.

شكرا لكم.