МоТно Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ 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; // УстанавливаСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ lang для элСмСнта <html>
        document.documentElement.dir = getHTMLTextDir(locale); // УстанавливаСм Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ тСкста (ltr ΠΈΠ»ΠΈ rtl) для элСмСнта <html>
      }, [locale]);
    };