Apakah mungkin menggunakan Intlayer dengan Next.js tanpa [locale] di jalur halaman?

Ya, memungkinkan untuk menggunakan Intlayer dengan Next.js tanpa [locale] di jalur halaman. Namun, hal ini tidak disarankan karena memisahkan halaman Anda memungkinkan untuk memicu lebih banyak kata kunci di mesin pencari. SSR Anda juga mungkin terpengaruh.

Jika Anda ingin melakukannya, ikuti langkah yang sama seperti yang dijelaskan dalam panduan Intlayer dengan Next.js,

tanpa src/middleware.ts
tanpa generateStaticParams

src/app/layout.tsx

Salin kode

Salin kode ke clipboard

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;

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

Salin kode

Salin kode ke clipboard

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;

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

Salin kode

Salin kode ke clipboard

"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>    </>  );};

"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

Salin kode

Salin kode ke clipboard

"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; // mengatur atribut bahasa dokumen HTML    document.documentElement.dir = getHTMLTextDir(locale); // mengatur arah teks dokumen HTML berdasarkan locale  }, [locale]);};

"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; // mengatur atribut bahasa dokumen HTML    document.documentElement.dir = getHTMLTextDir(locale); // mengatur arah teks dokumen HTML berdasarkan locale  }, [locale]);};