@intlayer/docs 5.5.8

package/ja/packages/next-intlayer/useIntlayer.md

@@ -0,0 +1,237 @@
+# Next.js統合: `useIntlayer`フックのドキュメント
+
+`useIntlayer`フックは、Next.jsアプリケーション向けに設計されており、ローカライズされたコンテンツを効率的に取得および管理するためのものです。このドキュメントでは、Next.jsプロジェクト内でフックを利用する方法に焦点を当て、適切なローカライゼーションの実践を確保します。
+
+## Next.jsでの`useIntlayer`のインポート
+
+Next.jsアプリケーションでクライアントサイドまたはサーバーサイドのコンポーネントを操作するかに応じて、以下のように`useIntlayer`フックをインポートできます。
+
+- **クライアントコンポーネント:**
+
+  ```typescript codeFormat="typescript"
+  import { useIntlayer } from "next-intlayer"; // クライアントサイドコンポーネントで使用
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useIntlayer } from "next-intlayer"; // クライアントサイドコンポーネントで使用
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useIntlayer } = require("next-intlayer"); // クライアントサイドコンポーネントで使用
+  ```
+
+- **サーバーコンポーネント:**
+
+  ```tsx codeFormat="typescript"
+  import { useIntlayer } from "next-intlayer/server"; // サーバーサイドコンポーネントで使用
+  ```
+
+  ```javascript codeFormat="esm"
+  import { useIntlayer } from "next-intlayer/server"; // サーバーサイドコンポーネントで使用
+  ```
+
+  ```javascript codeFormat="commonjs"
+  const { useIntlayer } = require("next-intlayer/server"); // サーバーサイドコンポーネントで使用
+  ```
+
+## パラメータ
+
+1. **`key`**: 取得したいコンテンツの辞書キーを示す文字列識別子。
+2. **`locale`** (オプション): 使用する特定のロケール。省略された場合、フックはクライアントまたはサーバーコンテキストで設定されたロケールをデフォルトとして使用します。
+
+## 辞書ファイル
+
+すべてのコンテンツキーがコンテンツ宣言ファイル内で定義されていることが重要です。これにより、ランタイムエラーを防ぎ、型安全性を確保できます。このアプローチは、TypeScript統合を容易にし、コンパイル時の検証を可能にします。
+
+コンテンツ宣言ファイルの設定手順については[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/ja/dictionary/get_started.md)をご覧ください。
+
+## Next.jsでの使用例
+
+以下は、`useIntlayer`フックをNext.jsページ内で実装し、アプリケーションの現在のロケールに基づいてローカライズされたコンテンツを動的にロードする方法です。
+
+```tsx fileName="src/pages/[locale]/index.tsx" codeFormat="typescript"
+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>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/pages/[locale]/index.csx" codeFormat="esm"
+import { ClientComponentExample } from "@components/ClientComponentExample";
+import { ServerComponentExample } from "@components/ServerComponentExample";
+import { IntlayerClientProvider } from "next-intlayer";
+import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
+
+const HomePage = ({ locale }) => {
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+const {
+  ClientComponentExample,
+} = require("@components/ClientComponentExample");
+const {
+  ServerComponentExample,
+} = require("@components/ServerComponentExample");
+const { IntlayerClientProvider } = require("next-intlayer");
+const { useIntlayer } = require("next-intlayer/server");
+
+const HomePage = ({ locale }) => {
+  const content = useIntlayer("homepage", locale);
+
+  return (
+    <>
+      <p>{content.introduction}</p>
+      <IntlayerClientProvider locale={locale}>
+        <ClientComponentExample />
+      </IntlayerClientProvider>
+      <IntlayerServerProvider locale={locale}>
+        <ServerComponentExample />
+      </IntlayerServerProvider>
+    </>
+  );
+};
+```
+
+```tsx fileName="src/components/ClientComponentExample.tsx" codeFormat="typescript"
+"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>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.msx" codeFormat="esm"
+"use-client";
+
+import { useIntlayer } from "next-intlayer";
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ClientComponentExample.csx" codeFormat="commonjs"
+"use-client";
+
+const { useIntlayer } = require("next-intlayer");
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```tsx fileName="src/components/ServerComponentExample.tsx" codeFormat="typescript"
+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>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.mjx" codeFormat="esm"
+import { useIntlayer } from "next-intlayer/server";
+
+const ServerComponentExample = () => {
+  const content = useIntlayer("component-content");
+
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ServerComponentExample.csx" codeFormat="commonjs"
+const { useIntlayer } = require("next-intlayer/server");
+
+const ServerComponentExample = () => {
+  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ビジュアルエディタ**: コンテンツ管理を容易にするビジュアルエディタの使用方法については[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/ja/intlayer_visual_editor.md)をご覧ください。
+
+このドキュメントは、Next.js環境内での`useIntlayer`フックの使用に特化しており、Next.jsアプリケーション全体でローカライゼーションを管理するための堅牢なソリューションを提供します。

package/ja/packages/next-intlayer/useIntlayerAsync.md

@@ -0,0 +1,211 @@
+# Next.js統合: `useIntlayerAsync`フックドキュメント
+
+`useIntlayerAsync`フックは、事前レンダリングされた辞書を返すだけでなく、非同期で更新を取得する機能を追加し、初期レンダリング後にローカライズされたコンテンツを頻繁に更新するアプリケーションに最適です。
+
+## 概要
+
+- **非同期辞書読み込み:**  
+  クライアント側では、`useIntlayerAsync`はまず事前レンダリングされたロケール辞書を返し（`useIntlayer`と同様）、その後非同期で新しく利用可能なリモート辞書を取得してマージします。
+- **進行状態管理:**  
+  このフックは、リモート辞書が取得されているときに`isLoading`状態を提供します。これにより、開発者はスムーズなユーザー体験のためにローディングインジケーターやスケルトン状態を表示できます。
+
+## 環境設定
+
+Intlayerは、開発者以外の人々がアプリケーションコンテンツをシームレスに管理および更新できるヘッドレスコンテンツソース管理（CSM）システムを提供します。Intlayerの直感的なダッシュボードを使用することで、チームはコードを直接変更することなく、ローカライズされたテキスト、画像、その他のリソースを編集できます。これにより、コンテンツ管理プロセスが合理化され、コラボレーションが促進され、迅速かつ簡単に更新が可能になります。
+
+Intlayerを始めるには、まず[https://intlayer.org/dashboard](https://intlayer.org/dashboard)で登録し、アクセストークンを取得する必要があります。資格情報を取得したら、以下のように設定ファイルに追加します:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import type { IntlayerConfig } from "intlayer";
+
+export default {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+} satisfies IntlayerConfig;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { type IntlayerConfig } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  // ...
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+  },
+};
+
+module.exports = config;
+```
+
+資格情報を設定した後、以下のコマンドを実行して新しいロケール辞書をIntlayerにプッシュできます:
+
+```bash
+npx intlayer dictionary push -d my-first-dictionary-key
+```
+
+このコマンドは初期コンテンツ辞書をアップロードし、非同期取得およびIntlayerプラットフォームを通じた編集が可能になります。
+
+## Next.jsでの`useIntlayerAsync`のインポート
+
+`useIntlayerAsync`は**クライアントサイド**コンポーネント用に設計されているため、`useIntlayer`と同じクライアントエントリポイントからインポートします:
+
+```tsx codeFormat="typescript"
+"use client";
+
+import { useIntlayerAsync } from "next-intlayer";
+```
+
+```javascript codeFormat="esm"
+"use client";
+
+import { useIntlayerAsync } from "next-intlayer";
+```
+
+```javascript codeFormat="commonjs"
+"use client";
+
+const { useIntlayerAsync } = require("next-intlayer");
+```
+
+Next.jsのApp Routerでサーバーコンポーネントとクライアントコンポーネントが分離されている場合、インポートするファイルの先頭に`"use client"`を記述してください。
+
+## パラメーター
+
+1. **`key`**:  
+   **型**: `DictionaryKeys`  
+   ローカライズされたコンテンツブロックを識別するために使用される辞書キー。このキーはコンテンツ宣言ファイルで定義する必要があります。
+
+2. **`locale`** (オプション):  
+   **型**: `Locales`  
+   ターゲットとする特定のロケール。省略された場合、フックはクライアントコンテキストのロケールを使用します。
+
+3. **`isRenderEditor`** (オプション、デフォルトは`true`):  
+   **型**: `boolean`  
+   コンテンツがIntlayerエディターオーバーレイでレンダリング可能であるかどうかを決定します。`false`に設定すると、返される辞書データにはエディター固有の機能が含まれません。
+
+## 戻り値
+
+このフックは、`key`および`locale`でキー付けされたローカライズされたコンテンツを含む辞書オブジェクトを返します。また、リモート辞書が現在取得中であるかどうかを示す`isLoading`ブール値も含まれます。
+
+## Next.jsでの使用例
+
+### クライアントサイドコンポーネントの例
+
+```tsx fileName="src/components/AsyncClientComponentExample.tsx" codeFormat="typescript"
+"use client";
+
+import { useEffect, type FC } from "react";
+import { useIntlayerAsync } from "next-intlayer";
+
+export const AsyncClientComponentExample: FC = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("コンテンツを読み込み中...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/AsyncClientComponentExample.mjx" codeFormat="esm"
+"use client";
+
+import { useEffect } from "react";
+import { useIntlayerAsync } from "next-intlayer";
+
+const AsyncClientComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("コンテンツを読み込み中...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/AsyncClientComponentExample.csx" codeFormat="commonjs"
+"use client";
+
+const { useEffect } = require("react");
+const { useIntlayerAsync } = require("next-intlayer");
+
+const AsyncClientComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("コンテンツを読み込み中...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      <h1>{title.value}</h1>
+      <p>{description.value}</p>
+    </div>
+  );
+};
+```
+
+**重要なポイント:**
+
+- 初期レンダリング時、`title`と`description`は事前レンダリングされたロケール辞書から取得されます。
+- `isLoading`が`true`の間、バックグラウンドでリモートリクエストが行われ、更新された辞書が取得されます。
+- 取得が完了すると、`title`と`description`は最新のコンテンツに更新され、`isLoading`は`false`に戻ります。
+
+## 属性ローカライズの処理
+
+`useIntlayer`と同様に、さまざまなHTMLプロパティ（例: `alt`、`title`、`aria-label`）のローカライズされた属性値を取得できます:
+
+```tsx
+<img src={title.image.src.value} alt={title.image.alt.value} />
+```
+
+## 辞書ファイル
+
+すべてのコンテンツキーは、型安全性を確保し、ランタイムエラーを防ぐためにコンテンツ宣言ファイルで定義する必要があります。これらのファイルはTypeScriptによる検証を可能にし、常に既存のキーとロケールを参照することを保証します。
+
+コンテンツ宣言ファイルの設定手順については[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/ja/dictionary/get_started.md)をご覧ください。
+
+## 詳細情報
+
+- **Intlayerビジュアルエディター:**  
+  UIから直接コンテンツを管理および編集するためにIntlayerビジュアルエディターと統合します。詳細は[こちら](https://github.com/aymericzip/intlayer/blob/main/docs/ja/intlayer_visual_editor.md)をご覧ください。
+
+---
+
+**まとめとして**, `useIntlayerAsync`は、事前レンダリングされた辞書と非同期辞書更新を組み合わせることで、ユーザー体験を向上させ、コンテンツの新鮮さを維持するために設計された強力なクライアントサイドフックです。`isLoading`とTypeScriptベースのコンテンツ宣言を活用することで、Next.jsアプリケーションに動的でローカライズされたコンテンツをシームレスに統合できます。

package/ja/packages/next-intlayer/useLocale.md

@@ -0,0 +1,105 @@
+# Next.js統合: `useLocale`フックのドキュメント for `next-intlayer`
+
+このセクションでは、`next-intlayer`ライブラリ内でNext.jsアプリケーション向けに調整された`useLocale`フックの詳細なドキュメントを提供します。これは、ロケールの変更とルーティングを効率的に処理するよう設計されています。
+
+## Next.jsでの`useLocale`のインポート
+
+Next.jsアプリケーションで`useLocale`フックを利用するには、以下のようにインポートします:
+
+```javascript
+import { useLocale } from "next-intlayer"; // Next.jsでロケールとルーティングを管理するために使用
+```
+
+## 使用方法
+
+Next.jsコンポーネント内で`useLocale`フックを実装する方法は以下の通りです:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+"use client";
+
+import type { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+const LocaleSwitcher: FC = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>現在のロケール: {locale}</h1>
+      <p>デフォルトロケール: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
+"use client";
+
+import { Locales } from "intlayer";
+import { useLocale } from "next-intlayer";
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>現在のロケール: {locale}</h1>
+      <p>デフォルトロケール: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
+"use client";
+
+const { Locales } = require("intlayer");
+const { useLocale } = require("next-intlayer");
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>現在のロケール: {locale}</h1>
+      <p>デフォルトロケール: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+```
+
+## パラメータと戻り値
+
+`useLocale`フックを呼び出すと、以下のプロパティを含むオブジェクトが返されます:
+
+- **`locale`**: Reactコンテキストで設定された現在のロケール。
+- **`defaultLocale`**: 設定で定義された主要なロケール。
+- **`availableLocales`**: 設定で定義された利用可能なすべてのロケールのリスト。
+- **`setLocale`**: アプリケーションのロケールを変更し、URLを更新するための関数。設定に基づいて、パスにロケールを追加するかどうかのルールを処理します。`next/navigation`の`useRouter`を利用して、`push`や`refresh`などのナビゲーション機能を提供。
+- **`pathWithoutLocale`**: ロケールなしのパスを返す計算プロパティ。URLを比較する際に便利です。例えば、現在のロケールが`fr`で、URLが`fr/my_path`の場合、ロケールなしのパスは`/my_path`です。現在のパスを取得するために`next/navigation`の`usePathname`を利用。
+
+## 結論
+
+`next-intlayer`の`useLocale`フックは、Next.jsアプリケーションでロケールを管理するための重要なツールです。ロケールの保存、状態管理、URLの変更をシームレスに処理する統合的なアプローチを提供します。

package/ja/packages/preact-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/preact-intlayer/index.md