Next.js 통합: useIntlayer 훅 문서

useIntlayer 훅은 Next.js 애플리케이션에서 로컬라이즈된 콘텐츠를 효율적으로 가져오고 관리하도록 맞춤화되었습니다. 이 문서는 Next.js 프로젝트 내에서 훅을 활용하는 방법에 중점을 두어 적절한 로컬라이제이션 관행을 보장합니다.

Next.js에서 useIntlayer 가져오기

Next.js 애플리케이션에서 클라이언트 측 또는 서버 측 구성 요소 작업에 따라 useIntlayer 훅을 다음과 같이 가져올 수 있습니다:

클라이언트 구성 요소:

typescript

import { useIntlayer } from "next-intlayer"; // 클라이언트 측 구성 요소에서 사용

서버 구성 요소:

tsx

import { useIntlayer } from "next-intlayer/server"; // 서버 측 구성 요소에서 사용

파라미터

key: 콘텐츠를 가져오고자 하는 사전 키의 문자열 식별자입니다.
locale (선택 사항): 사용할 특정 로케일입니다. 생략 시, 훅은 클라이언트 또는 서버 컨텍스트에 설정된 로케일을 기본값으로 사용합니다.

콘텐츠 선언 파일

모든 콘텐츠 키는 런타임 오류를 방지하고 타입 안전성을 보장하기 위해 콘텐츠 선언 파일 내에 정의되어야 합니다. 이 접근 방식은 컴파일 타임 검증을 위한 TypeScript 통합을 용이하게 합니다.

콘텐츠 선언 파일 설정에 대한 지침은 여기에서 확인할 수 있습니다.

Next.js에서의 사용 예시

다음은 애플리케이션의 현재 로케일에 따라 동적으로 로컬라이즈된 콘텐츠를 로드하기 위해 Next.js 페이지 내에서 useIntlayer 훅을 구현하는 방법입니다:

src/pages/[locale]/index.tsx

import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";const HomePage: NextPageIntlayer = async ({ params }) => {  const { locale } = await params;  const content = useIntlayer("homepage", locale);  return (    <>      <p>{content.introduction}</p>      <IntlayerClientProvider locale={locale}>        <ClientComponentExample />      </IntlayerClientProvider>      <IntlayerServerProvider locale={locale}>        <ServerComponentExample />      </IntlayerServerProvider>    </>  );};

src/components/ClientComponentExample.tsx

"use-client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";const ClientComponentExample: FC = () => {  const content = useIntlayer("component-content");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

src/components/ServerComponentExample.tsx

import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";const ServerComponentExample: FC = () => {  const content = useIntlayer("component-content");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>    </div>  );};

속성 로컬라이제이션 처리

alt, title, href, aria-label 등의 속성을 로컬라이즈하려면 콘텐츠를 올바르게 참조하도록 하십시오:

tsx

<img src={content.image.src.value} alt={content.image.alt.value} />

추가 정보

Intlayer 비주얼 에디터: 콘텐츠 관리를 더 쉽게 할 수 있는 방법을 여기에서 배우십시오.

이 문서는 useIntlayer 훅을 Next.js 환경 내에서 사용하는 방법을 설명하며, Next.js 애플리케이션 전반에 걸쳐 로컬라이제이션 관리에 대한 강력한 솔루션을 제공합니다.

이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

문서에 대한 GitHub 링크

t useIntlayerAsync