@intlayer/docs 5.7.5 → 5.7.6

package/docs/ja/packages/react-intlayer/useI18n.md

@@ -0,0 +1,250 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: useI18n フック ドキュメント | react-intlayer
+description: react-intlayer パッケージで useI18n フックを使用する方法を学ぶ
+keywords:
+  - useI18n
+  - i18n
+  - 翻訳
+  - 辞書
+  - Intlayer
+  - 国際化
+  - ドキュメント
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useI18n
+---
+
+# React 統合: `useI18n` フック ドキュメント
+
+このセクションでは、React アプリケーション内で `useI18n` フックを使用して効率的なコンテンツのローカライズを実現する方法について詳細に説明します。
+
+## React での `useI18n` のインポート
+
+`useI18n` フックは、以下のようにコンテキストに応じて React アプリケーションにインポートおよび統合できます。
+
+- **クライアントコンポーネント:**
+
+  ```typescript codeFormat="typescript"
+  import { useI18n } from "react-intlayer"; // クライアントサイドの React コンポーネントで使用
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer"; // クライアントサイドの React コンポーネントで使用
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer"); // クライアントサイドの React コンポーネントで使用
+  ```
+
+- **サーバーコンポーネント:**
+
+  ```typescript codeFormat="commonjs"
+  import { useI18n } from "react-intlayer/server"; // サーバーサイドの React コンポーネントで使用
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer/server"; // サーバーサイドの React コンポーネントで使用
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer/server"); // サーバーサイドの React コンポーネントで使用
+  ```
+
+## パラメータ
+
+このフックは2つのパラメータを受け取ります：
+
+1. **`namespace`**：翻訳キーのスコープを指定する辞書の名前空間。
+2. **`locale`**（オプション）：希望するロケール。指定しない場合は、コンテキストのロケールがデフォルトで使用されます。
+
+## 辞書
+
+すべての辞書キーは、型安全性を高めエラーを防ぐためにコンテンツ宣言ファイル内で宣言する必要があります。[設定手順はこちら](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)で確認できます。
+
+## Reactでの使用例
+
+Reactコンポーネント内で`useI18n`フックを使用する例：
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { useI18n, IntlayerServerProvider } from "react-intlayer/server";
+import { Locales } from "intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.jsx" codeFormat="esm"
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.cjs" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useI18n } from "react-intlayer";
+
+const ComponentExample: FC = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* タイトルを表示 */}
+      <p>{t("description")}</p> {/* 説明を表示 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer";
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* タイトルを表示 */}
+      <p>{t("description")}</p> {/* 説明を表示 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* タイトルを表示 */}
+      <p>{t("description")}</p> {/* 説明を表示 */}
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* タイトルを表示 */}
+      <p>{t("description")}</p> {/* 説明を表示 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* タイトルを表示 */}
+      <p>{t("description")}</p> {/* 説明を表示 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer/server");
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+```
+
+## 属性の取り扱い
+
+属性をローカライズする際は、翻訳値に適切にアクセスしてください：
+
+```jsx
+<!-- アクセシビリティ属性（例：aria-label）には、純粋な文字列が必要なため .value を使用します -->
+<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
+```
+
+## 追加リソース
+
+- **Intlayer ビジュアルエディター**: より直感的なコンテンツ管理体験のために、ビジュアルエディターのドキュメントは[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)をご参照ください。
+
+このセクションでは、Reactアプリケーションにおける `useI18n` フックの統合について具体的に説明しており、ローカライズプロセスを簡素化し、異なるロケール間でのコンテンツの一貫性を確保します。
+
+## ドキュメント履歴
+
+- 6.0.0 - 2025-06-29: `useI18n` フックのドキュメント初版作成

package/docs/ko/dictionary/enumeration.md

@@ -15,7 +15,6 @@ slugs:
   - doc
   - concept
   - content
-  - dictionary
   - enumeration
 ---
 

package/docs/ko/packages/react-intlayer/useI18n.md

@@ -0,0 +1,250 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+title: useI18n 훅 문서 | react-intlayer
+description: react-intlayer 패키지에서 useI18n 훅을 사용하는 방법을 알아보세요
+keywords:
+  - useI18n
+  - i18n
+  - 번역
+  - 사전
+  - Intlayer
+  - 국제화
+  - 문서
+  - Next.js
+  - 자바스크립트
+  - 리액트
+slugs:
+  - doc
+  - packages
+  - react-intlayer
+  - useI18n
+---
+
+# React 통합: `useI18n` 훅 문서
+
+이 섹션에서는 React 애플리케이션 내에서 `useI18n` 훅을 사용하는 방법에 대해 자세히 안내하며, 효율적인 콘텐츠 현지화를 가능하게 합니다.
+
+## React에서 `useI18n` 가져오기
+
+`useI18n` 훅은 다음과 같이 상황에 맞게 React 애플리케이션에 가져와 통합할 수 있습니다:
+
+- **클라이언트 컴포넌트:**
+
+  ```typescript codeFormat="typescript"
+  import { useI18n } from "react-intlayer"; // 클라이언트 측 React 컴포넌트에서 사용
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer"; // 클라이언트 측 React 컴포넌트에서 사용
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer"); // 클라이언트 측 React 컴포넌트에서 사용
+  ```
+
+- **서버 컴포넌트:**
+
+  ```typescript codeFormat="commonjs"
+  import { useI18n } from "react-intlayer/server"; // 서버 측 React 컴포넌트에서 사용
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useI18n } from "react-intlayer/server"; // 서버 측 React 컴포넌트에서 사용
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useI18n } = require("react-intlayer/server"); // 서버 측 React 컴포넌트에서 사용
+  ```
+
+## 매개변수
+
+이 훅은 두 개의 매개변수를 받습니다:
+
+1. **`namespace`**: 번역 키의 범위를 지정하는 사전 네임스페이스입니다.
+2. **`locale`** (선택 사항): 원하는 로케일입니다. 지정하지 않으면 컨텍스트의 로케일이 기본값으로 사용됩니다.
+
+## 사전
+
+모든 사전 키는 타입 안전성을 높이고 오류를 방지하기 위해 콘텐츠 선언 파일 내에 선언되어야 합니다. [설정 지침은 여기에서 확인할 수 있습니다](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/dictionary/get_started.md).
+
+## React에서의 사용 예시
+
+React 컴포넌트 내에서 `useI18n` 훅을 사용하는 예시:
+
+```tsx fileName="src/App.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { useI18n, IntlayerServerProvider } from "react.intlayer/server";
+import { Locales } from "intlayer";
+
+const App: FC<{ locale: Locales }> = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.jsx" codeFormat="esm"
+import { ClientComponentExample, ServerComponentExample } from "@components";
+import { IntlayerProvider } from "react-intlayer";
+import { IntlayerServerProvider, useI18n } from "react-intlayer/server";
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/app.cjs" codeFormat="commonjs"
+const { IntlayerProvider } = require("react-intlayer");
+const { IntlayerServerProvider, useI18n } = require("react-intlayer/server");
+
+const App = ({ locale }) => {
+  const t = useI18n("home-page", locale);
+
+  return (
+    <>
+      <p>{t("introduction")}</p>
+      <IntlayerProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useI18n } from "react-intlayer";
+
+const ComponentExample: FC = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* 제목을 표시합니다 */}
+      <p>{t("description")}</p> {/* 설명을 표시합니다 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer";
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* 제목을 표시합니다 */}
+      <p>{t("description")}</p> {/* 설명을 표시합니다 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const t = useI18n("component-example");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* 제목을 표시합니다 */}
+      <p>{t("description")}</p> {/* 설명을 표시합니다 */}
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* 제목을 표시합니다 */}
+      <p>{t("description")}</p> {/* 설명을 표시합니다 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.jsx" codeFormat="esm"
+import { useI18n } from "react-intlayer/server";
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1> {/* 제목을 표시합니다 */}
+      <p>{t("description")}</p> {/* 설명을 표시합니다 */}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.cjs" codeFormat="commonjs"
+const { useI18n } = require("react-intlayer/server");
+
+const ServerComponentExample = () => {
+  const t = useI18n("server-component");
+
+  return (
+    <div>
+      <h1>{t("title")}</h1>
+      <p>{t("description")}</p>
+    </div>
+  );
+};
+```
+
+## 속성 처리
+
+속성을 현지화할 때는 번역 값을 적절히 접근해야 합니다:
+
+```jsx
+<!-- 접근성 속성(예: aria-label)의 경우, 순수 문자열이 필요하므로 .value를 사용하세요 -->
+<button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
+```
+
+## 추가 자료
+
+- **Intlayer 비주얼 에디터**: 보다 직관적인 콘텐츠 관리 경험을 위해 비주얼 에디터 문서를 [여기](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ko/intlayer_visual_editor.md)에서 참고하세요.
+
+이 섹션은 React 애플리케이션에서 `useI18n` 훅의 통합을 구체적으로 다루며, 현지화 과정을 단순화하고 다양한 로케일 간 콘텐츠 일관성을 보장합니다.
+
+## 문서 기록
+
+- 6.0.0 - 2025-06-29: `useI18n` 훅 문서 초안 작성