페이지 경로에 [locale] 없이 Next.js에서 Intlayer를 사용할 수 있나요?

네, 페이지 경로에 [locale] 없이 Next.js에서 Intlayer를 사용하는 것이 가능합니다. 하지만 페이지를 분리하는 것이 검색 엔진에서 더 많은 키워드를 유발할 수 있기 때문에 권장하지 않습니다. 또한 SSR에도 영향을 미칠 수 있습니다.

원하신다면, Intlayer with 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;

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;

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

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

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