Có thể sử dụng Intlayer với Next.js mà không có [locale] trong đường dẫn trang không?

Có, bạn có thể sử dụng Intlayer với Next.js mà không có [locale] trong đường dẫn trang. Tuy nhiên, điều này không được khuyến nghị, vì việc tách trang của bạn cho phép kích hoạt nhiều từ khóa hơn trên các công cụ tìm kiếm. SSR của bạn cũng có thể bị ảnh hưởng.

Nếu bạn muốn làm như vậy, hãy làm theo các bước giống như được mô tả trong hướng dẫn Intlayer với Next.js,

không có src/middleware.ts
không có generateStaticParams

src/app/layout.tsx

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (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

Sao chép mã

Sao chép đoạn mã vào khay nhớ tạm (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;    // Thiết lập thuộc tính ngôn ngữ cho thẻ <html>    document.documentElement.lang = locale;    // Thiết lập hướng văn bản cho thẻ <html> dựa trên ngôn ngữ    document.documentElement.dir = getHTMLTextDir(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;    // Thiết lập thuộc tính ngôn ngữ cho thẻ <html>    document.documentElement.lang = locale;    // Thiết lập hướng văn bản cho thẻ <html> dựa trên ngôn ngữ    document.documentElement.dir = getHTMLTextDir(locale);  }, [locale]);};