هل من الممكن استخدام Intlayer مع Next.js بدون [locale] في مسار الصفحة؟
نعم، من الممكن استخدام Intlayer مع Next.js بدون [locale] في مسار الصفحة. ومع ذلك، لا يُنصح بذلك، لأن تقسيم الصفحة يسمح بتحفيز المزيد من الكلمات المفتاحية على محركات البحث. قد يتأثر أيضًا SSR الخاص بك.
إذا كنت ترغب في القيام بذلك، فاتبع نفس الخطوات الموضحة في دليل Intlayer مع Next.js،
- لا يوجد src/middleware.ts
- لا يوجد generateStaticParams
src/app/layout.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import type { FC, PropsWithChildren } from "react";const LocaleLayout: FC<PropsWithChildren> = ({ children }) => ( <html lang={undefined} dir={undefined}> <body className={inter.className}>{children}</body> </html>);export default LocaleLayout;src/app/page.tsx
نسخ الكود
نسخ الكود إلى الحافظة
import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { PageContent } from "@components/pageContent";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";const Page: FC = () => { return ( <IntlayerServerProvider> <PageContent /> <ServerComponentExample /> <IntlayerClientProvider> <ClientComponentExample /> </IntlayerClientProvider> </IntlayerServerProvider> );};export default Page;src/component/pageContent.ts
نسخ الكود
نسخ الكود إلى الحافظة
"use client";import { type FC } from "react";import { useIntlayer } from "next-intlayer";import { useHTMLLanguage } from "@hooks/htmlTextDir";const PageContent: FC = () => { useHTMLLanguage(); const content = useIntlayer("page"); return ( <> <p>{content.getStarted.main}</p> <code>{content.getStarted.pageLink}</code> </> );};src/hooks/htmlTextDir.ts
نسخ الكود
نسخ الكود إلى الحافظة
"use client";import { useEffect } from "react";import { getHTMLTextDir } from "intlayer";import { useLocale } from "next-intlayer";export const useHTMLLanguage = () => { const { locale } = useLocale(); useEffect(() => { if (!document) return; document.documentElement.lang = locale; // تعيين لغة المستند document.documentElement.dir = getHTMLTextDir(locale); // تعيين اتجاه النص بناءً على اللغة }, [locale]);};