@intlayer/docs 5.7.6-canary.0 → 5.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/cjs/generated/docs.entry.cjs +44 -238
  2. package/dist/cjs/generated/docs.entry.cjs.map +1 -1
  3. package/dist/esm/generated/docs.entry.mjs +44 -238
  4. package/dist/esm/generated/docs.entry.mjs.map +1 -1
  5. package/dist/types/generated/docs.entry.d.ts +1 -2
  6. package/dist/types/generated/docs.entry.d.ts.map +1 -1
  7. package/docs/ar/intlayer_with_tanstack.md +457 -0
  8. package/docs/ar/packages/next-intlayer/index.md +0 -1
  9. package/docs/ar/packages/react-intlayer/index.md +0 -1
  10. package/docs/de/intlayer_with_tanstack.md +458 -0
  11. package/docs/de/packages/next-intlayer/index.md +0 -1
  12. package/docs/de/packages/react-intlayer/index.md +0 -1
  13. package/docs/en/intlayer_with_tanstack.md +452 -0
  14. package/docs/en/packages/next-intlayer/index.md +0 -1
  15. package/docs/en/packages/react-intlayer/index.md +0 -1
  16. package/docs/en-GB/intlayer_with_tanstack.md +457 -0
  17. package/docs/en-GB/packages/next-intlayer/index.md +0 -1
  18. package/docs/en-GB/packages/react-intlayer/index.md +0 -1
  19. package/docs/es/intlayer_with_tanstack.md +435 -0
  20. package/docs/es/packages/next-intlayer/index.md +0 -1
  21. package/docs/es/packages/react-intlayer/index.md +0 -1
  22. package/docs/fr/intlayer_with_tanstack.md +435 -0
  23. package/docs/fr/packages/next-intlayer/index.md +0 -1
  24. package/docs/fr/packages/react-intlayer/index.md +0 -1
  25. package/docs/hi/intlayer_with_tanstack.md +438 -0
  26. package/docs/hi/packages/next-intlayer/index.md +0 -1
  27. package/docs/hi/packages/react-intlayer/index.md +0 -1
  28. package/docs/it/intlayer_with_tanstack.md +457 -0
  29. package/docs/it/packages/next-intlayer/index.md +0 -1
  30. package/docs/it/packages/react-intlayer/index.md +0 -1
  31. package/docs/ja/intlayer_with_tanstack.md +457 -0
  32. package/docs/ja/packages/next-intlayer/index.md +0 -1
  33. package/docs/ja/packages/react-intlayer/index.md +0 -1
  34. package/docs/ko/intlayer_with_tanstack.md +457 -0
  35. package/docs/ko/packages/next-intlayer/index.md +0 -1
  36. package/docs/ko/packages/react-intlayer/index.md +0 -1
  37. package/docs/pt/intlayer_with_tanstack.md +457 -0
  38. package/docs/pt/packages/next-intlayer/index.md +0 -1
  39. package/docs/pt/packages/react-intlayer/index.md +0 -1
  40. package/docs/ru/intlayer_with_tanstack.md +458 -0
  41. package/docs/ru/packages/next-intlayer/index.md +0 -1
  42. package/docs/ru/packages/react-intlayer/index.md +0 -1
  43. package/docs/zh/intlayer_with_tanstack.md +435 -0
  44. package/docs/zh/packages/next-intlayer/index.md +0 -1
  45. package/docs/zh/packages/react-intlayer/index.md +0 -1
  46. package/package.json +8 -8
  47. package/src/generated/docs.entry.ts +44 -238
  48. package/docs/ar/packages/next-intlayer/useIntlayerAsync.md +0 -237
  49. package/docs/ar/packages/react-intlayer/useIntlayerAsync.md +0 -252
  50. package/docs/de/packages/next-intlayer/useIntlayerAsync.md +0 -262
  51. package/docs/de/packages/react-intlayer/useIntlayerAsync.md +0 -256
  52. package/docs/en/packages/next-intlayer/useIntlayerAsync.md +0 -239
  53. package/docs/en/packages/react-intlayer/useIntlayerAsync.md +0 -254
  54. package/docs/en-GB/packages/next-intlayer/useIntlayerAsync.md +0 -237
  55. package/docs/en-GB/packages/react-intlayer/useIntlayerAsync.md +0 -257
  56. package/docs/es/packages/next-intlayer/useIntlayerAsync.md +0 -240
  57. package/docs/es/packages/react-intlayer/useIntlayerAsync.md +0 -276
  58. package/docs/fr/packages/next-intlayer/useIntlayerAsync.md +0 -238
  59. package/docs/fr/packages/react-intlayer/useIntlayerAsync.md +0 -252
  60. package/docs/hi/packages/next-intlayer/useIntlayerAsync.md +0 -237
  61. package/docs/hi/packages/react-intlayer/useIntlayerAsync.md +0 -252
  62. package/docs/it/packages/next-intlayer/useIntlayerAsync.md +0 -237
  63. package/docs/it/packages/react-intlayer/useIntlayerAsync.md +0 -252
  64. package/docs/ja/packages/next-intlayer/useIntlayerAsync.md +0 -237
  65. package/docs/ja/packages/react-intlayer/useIntlayerAsync.md +0 -268
  66. package/docs/ko/packages/next-intlayer/useIntlayerAsync.md +0 -260
  67. package/docs/ko/packages/react-intlayer/useIntlayerAsync.md +0 -271
  68. package/docs/pt/packages/next-intlayer/useIntlayerAsync.md +0 -238
  69. package/docs/pt/packages/react-intlayer/useIntlayerAsync.md +0 -252
  70. package/docs/ru/packages/next-intlayer/useIntlayerAsync.md +0 -237
  71. package/docs/ru/packages/react-intlayer/useIntlayerAsync.md +0 -252
  72. package/docs/zh/packages/next-intlayer/useIntlayerAsync.md +0 -239
  73. package/docs/zh/packages/react-intlayer/useIntlayerAsync.md +0 -257
@@ -1495,6 +1495,50 @@ export const docsEntry = {
1495
1495
  )
1496
1496
  ),
1497
1497
  } as unknown as Record<LocalesValues, Promise<string>>,
1498
+ './docs/en/intlayer_with_tanstack.md': {
1499
+ en: Promise.resolve(
1500
+ readFile(join(dir, '../../../docs/en/intlayer_with_tanstack.md'), 'utf8')
1501
+ ),
1502
+ fr: Promise.resolve(
1503
+ readFile(join(dir, '../../../docs/fr/intlayer_with_tanstack.md'), 'utf8')
1504
+ ),
1505
+ ru: Promise.resolve(
1506
+ readFile(join(dir, '../../../docs/ru/intlayer_with_tanstack.md'), 'utf8')
1507
+ ),
1508
+ ja: Promise.resolve(
1509
+ readFile(join(dir, '../../../docs/ja/intlayer_with_tanstack.md'), 'utf8')
1510
+ ),
1511
+ ko: Promise.resolve(
1512
+ readFile(join(dir, '../../../docs/ko/intlayer_with_tanstack.md'), 'utf8')
1513
+ ),
1514
+ zh: Promise.resolve(
1515
+ readFile(join(dir, '../../../docs/zh/intlayer_with_tanstack.md'), 'utf8')
1516
+ ),
1517
+ es: Promise.resolve(
1518
+ readFile(join(dir, '../../../docs/es/intlayer_with_tanstack.md'), 'utf8')
1519
+ ),
1520
+ de: Promise.resolve(
1521
+ readFile(join(dir, '../../../docs/de/intlayer_with_tanstack.md'), 'utf8')
1522
+ ),
1523
+ ar: Promise.resolve(
1524
+ readFile(join(dir, '../../../docs/ar/intlayer_with_tanstack.md'), 'utf8')
1525
+ ),
1526
+ pt: Promise.resolve(
1527
+ readFile(join(dir, '../../../docs/pt/intlayer_with_tanstack.md'), 'utf8')
1528
+ ),
1529
+ 'en-GB': Promise.resolve(
1530
+ readFile(
1531
+ join(dir, '../../../docs/en-GB/intlayer_with_tanstack.md'),
1532
+ 'utf8'
1533
+ )
1534
+ ),
1535
+ it: Promise.resolve(
1536
+ readFile(join(dir, '../../../docs/it/intlayer_with_tanstack.md'), 'utf8')
1537
+ ),
1538
+ hi: Promise.resolve(
1539
+ readFile(join(dir, '../../../docs/hi/intlayer_with_tanstack.md'), 'utf8')
1540
+ ),
1541
+ } as unknown as Record<LocalesValues, Promise<string>>,
1498
1542
  './docs/en/intlayer_with_vite+preact.md': {
1499
1543
  en: Promise.resolve(
1500
1544
  readFile(
@@ -4519,125 +4563,6 @@ export const docsEntry = {
4519
4563
  )
4520
4564
  ),
4521
4565
  } as unknown as Record<LocalesValues, Promise<string>>,
4522
- './docs/en/packages/next-intlayer/useIntlayerAsync.md': {
4523
- en: Promise.resolve(
4524
- readFile(
4525
- join(
4526
- dir,
4527
- '../../../docs/en/packages/next-intlayer/useIntlayerAsync.md'
4528
- ),
4529
- 'utf8'
4530
- )
4531
- ),
4532
- fr: Promise.resolve(
4533
- readFile(
4534
- join(
4535
- dir,
4536
- '../../../docs/fr/packages/next-intlayer/useIntlayerAsync.md'
4537
- ),
4538
- 'utf8'
4539
- )
4540
- ),
4541
- ru: Promise.resolve(
4542
- readFile(
4543
- join(
4544
- dir,
4545
- '../../../docs/ru/packages/next-intlayer/useIntlayerAsync.md'
4546
- ),
4547
- 'utf8'
4548
- )
4549
- ),
4550
- ja: Promise.resolve(
4551
- readFile(
4552
- join(
4553
- dir,
4554
- '../../../docs/ja/packages/next-intlayer/useIntlayerAsync.md'
4555
- ),
4556
- 'utf8'
4557
- )
4558
- ),
4559
- ko: Promise.resolve(
4560
- readFile(
4561
- join(
4562
- dir,
4563
- '../../../docs/ko/packages/next-intlayer/useIntlayerAsync.md'
4564
- ),
4565
- 'utf8'
4566
- )
4567
- ),
4568
- zh: Promise.resolve(
4569
- readFile(
4570
- join(
4571
- dir,
4572
- '../../../docs/zh/packages/next-intlayer/useIntlayerAsync.md'
4573
- ),
4574
- 'utf8'
4575
- )
4576
- ),
4577
- es: Promise.resolve(
4578
- readFile(
4579
- join(
4580
- dir,
4581
- '../../../docs/es/packages/next-intlayer/useIntlayerAsync.md'
4582
- ),
4583
- 'utf8'
4584
- )
4585
- ),
4586
- de: Promise.resolve(
4587
- readFile(
4588
- join(
4589
- dir,
4590
- '../../../docs/de/packages/next-intlayer/useIntlayerAsync.md'
4591
- ),
4592
- 'utf8'
4593
- )
4594
- ),
4595
- ar: Promise.resolve(
4596
- readFile(
4597
- join(
4598
- dir,
4599
- '../../../docs/ar/packages/next-intlayer/useIntlayerAsync.md'
4600
- ),
4601
- 'utf8'
4602
- )
4603
- ),
4604
- pt: Promise.resolve(
4605
- readFile(
4606
- join(
4607
- dir,
4608
- '../../../docs/pt/packages/next-intlayer/useIntlayerAsync.md'
4609
- ),
4610
- 'utf8'
4611
- )
4612
- ),
4613
- 'en-GB': Promise.resolve(
4614
- readFile(
4615
- join(
4616
- dir,
4617
- '../../../docs/en-GB/packages/next-intlayer/useIntlayerAsync.md'
4618
- ),
4619
- 'utf8'
4620
- )
4621
- ),
4622
- it: Promise.resolve(
4623
- readFile(
4624
- join(
4625
- dir,
4626
- '../../../docs/it/packages/next-intlayer/useIntlayerAsync.md'
4627
- ),
4628
- 'utf8'
4629
- )
4630
- ),
4631
- hi: Promise.resolve(
4632
- readFile(
4633
- join(
4634
- dir,
4635
- '../../../docs/hi/packages/next-intlayer/useIntlayerAsync.md'
4636
- ),
4637
- 'utf8'
4638
- )
4639
- ),
4640
- } as unknown as Record<LocalesValues, Promise<string>>,
4641
4566
  './docs/en/packages/next-intlayer/useLocale.md': {
4642
4567
  en: Promise.resolve(
4643
4568
  readFile(
@@ -5281,125 +5206,6 @@ export const docsEntry = {
5281
5206
  )
5282
5207
  ),
5283
5208
  } as unknown as Record<LocalesValues, Promise<string>>,
5284
- './docs/en/packages/react-intlayer/useIntlayerAsync.md': {
5285
- en: Promise.resolve(
5286
- readFile(
5287
- join(
5288
- dir,
5289
- '../../../docs/en/packages/react-intlayer/useIntlayerAsync.md'
5290
- ),
5291
- 'utf8'
5292
- )
5293
- ),
5294
- fr: Promise.resolve(
5295
- readFile(
5296
- join(
5297
- dir,
5298
- '../../../docs/fr/packages/react-intlayer/useIntlayerAsync.md'
5299
- ),
5300
- 'utf8'
5301
- )
5302
- ),
5303
- ru: Promise.resolve(
5304
- readFile(
5305
- join(
5306
- dir,
5307
- '../../../docs/ru/packages/react-intlayer/useIntlayerAsync.md'
5308
- ),
5309
- 'utf8'
5310
- )
5311
- ),
5312
- ja: Promise.resolve(
5313
- readFile(
5314
- join(
5315
- dir,
5316
- '../../../docs/ja/packages/react-intlayer/useIntlayerAsync.md'
5317
- ),
5318
- 'utf8'
5319
- )
5320
- ),
5321
- ko: Promise.resolve(
5322
- readFile(
5323
- join(
5324
- dir,
5325
- '../../../docs/ko/packages/react-intlayer/useIntlayerAsync.md'
5326
- ),
5327
- 'utf8'
5328
- )
5329
- ),
5330
- zh: Promise.resolve(
5331
- readFile(
5332
- join(
5333
- dir,
5334
- '../../../docs/zh/packages/react-intlayer/useIntlayerAsync.md'
5335
- ),
5336
- 'utf8'
5337
- )
5338
- ),
5339
- es: Promise.resolve(
5340
- readFile(
5341
- join(
5342
- dir,
5343
- '../../../docs/es/packages/react-intlayer/useIntlayerAsync.md'
5344
- ),
5345
- 'utf8'
5346
- )
5347
- ),
5348
- de: Promise.resolve(
5349
- readFile(
5350
- join(
5351
- dir,
5352
- '../../../docs/de/packages/react-intlayer/useIntlayerAsync.md'
5353
- ),
5354
- 'utf8'
5355
- )
5356
- ),
5357
- ar: Promise.resolve(
5358
- readFile(
5359
- join(
5360
- dir,
5361
- '../../../docs/ar/packages/react-intlayer/useIntlayerAsync.md'
5362
- ),
5363
- 'utf8'
5364
- )
5365
- ),
5366
- pt: Promise.resolve(
5367
- readFile(
5368
- join(
5369
- dir,
5370
- '../../../docs/pt/packages/react-intlayer/useIntlayerAsync.md'
5371
- ),
5372
- 'utf8'
5373
- )
5374
- ),
5375
- 'en-GB': Promise.resolve(
5376
- readFile(
5377
- join(
5378
- dir,
5379
- '../../../docs/en-GB/packages/react-intlayer/useIntlayerAsync.md'
5380
- ),
5381
- 'utf8'
5382
- )
5383
- ),
5384
- it: Promise.resolve(
5385
- readFile(
5386
- join(
5387
- dir,
5388
- '../../../docs/it/packages/react-intlayer/useIntlayerAsync.md'
5389
- ),
5390
- 'utf8'
5391
- )
5392
- ),
5393
- hi: Promise.resolve(
5394
- readFile(
5395
- join(
5396
- dir,
5397
- '../../../docs/hi/packages/react-intlayer/useIntlayerAsync.md'
5398
- ),
5399
- 'utf8'
5400
- )
5401
- ),
5402
- } as unknown as Record<LocalesValues, Promise<string>>,
5403
5209
  './docs/en/packages/react-intlayer/useLocale.md': {
5404
5210
  en: Promise.resolve(
5405
5211
  readFile(
@@ -1,237 +0,0 @@
1
- ---
2
- createdAt: 2024-08-11
3
- updatedAt: 2025-06-29
4
- title: توثيق هوك useIntlayerAsync | next-intlayer
5
- description: تعرف على كيفية استخدام هوك useIntlayerAsync لحزمة next-intlayer
6
- keywords:
7
- - useIntlayerAsync
8
- - dictionary
9
- - key
10
- - Intlayer
11
- - التدويل
12
- - التوثيق
13
- - Next.js
14
- - جافا سكريبت
15
- - React
16
- slugs:
17
- - doc
18
- - packages
19
- - next-intlayer
20
- - useIntlayerAsync
21
- ---
22
-
23
- # تكامل Next.js: توثيق هوك `useIntlayerAsync`
24
-
25
- يقوم هوك `useIntlayerAsync` بتوسيع وظيفة هوك `useIntlayer` ليس فقط بإرجاع القواميس المسبقة العرض، بل أيضًا بجلب التحديثات بشكل غير متزامن، مما يجعله مثاليًا للتطبيقات التي تقوم بتحديث محتواها المحلي بشكل متكرر بعد العرض الأولي.
26
-
27
- ## نظرة عامة
28
-
29
- - **تحميل القاموس بشكل غير متزامن:**
30
- على جانب العميل، يقوم `useIntlayerAsync` أولاً بإرجاع قاموس اللغة المسبق العرض (تمامًا مثل `useIntlayer`) ثم يقوم بجلب ودمج أي قواميس جديدة متاحة عن بُعد بشكل غير متزامن.
31
- - **إدارة حالة التقدم:**
32
- يوفر الهوك أيضًا حالة `isLoading`، التي تشير إلى متى يتم جلب قاموس عن بُعد. هذا يسمح للمطورين بعرض مؤشرات تحميل أو حالات هيكل عظمي لتجربة مستخدم أكثر سلاسة.
33
-
34
- ## إعداد البيئة
35
-
36
- توفر Intlayer نظام إدارة مصادر المحتوى بدون واجهة (CSM) يمكّن غير المطورين من إدارة وتحديث محتوى التطبيق بسلاسة. باستخدام لوحة التحكم البديهية الخاصة بـ Intlayer، يمكن لفريقك تحرير النصوص المترجمة، والصور، والموارد الأخرى دون الحاجة إلى تعديل الكود مباشرة. هذا يبسط عملية إدارة المحتوى، ويعزز التعاون، ويضمن إمكانية إجراء التحديثات بسرعة وسهولة.
37
-
38
- للبدء مع Intlayer، ستحتاج أولاً إلى التسجيل والحصول على رمز وصول في [لوحة التحكم](https://intlayer.org/dashboard). بمجرد حصولك على بيانات الاعتماد الخاصة بك، أضفها إلى ملف التكوين الخاص بك كما هو موضح أدناه:
39
-
40
- ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
41
- import type { IntlayerConfig } from "intlayer";
42
-
43
- export default {
44
- // ...
45
- editor: {
46
- clientId: process.env.INTLAYER_CLIENT_ID,
47
- clientSecret: process.env.INTLAYER_CLIENT_SECRET,
48
- },
49
- } satisfies IntlayerConfig;
50
- ```
51
-
52
- ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
53
- import { type IntlayerConfig } from "intlayer";
54
-
55
- /** @type {import('intlayer').IntlayerConfig} */
56
- const config = {
57
- // ...
58
- editor: {
59
- clientId: process.env.INTLAYER_CLIENT_ID,
60
- clientSecret: process.env.INTLAYER_CLIENT_SECRET,
61
- },
62
- };
63
-
64
- export default config;
65
- ```
66
-
67
- ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
68
- /** @type {import('intlayer').IntlayerConfig} */
69
- const config = {
70
- // ...
71
- editor: {
72
- clientId: process.env.INTLAYER_CLIENT_ID,
73
- clientSecret: process.env.INTLAYER_CLIENT_SECRET,
74
- },
75
- };
76
-
77
- module.exports = config;
78
- ```
79
-
80
- بعد تكوين بيانات الاعتماد الخاصة بك، يمكنك دفع قاموس لغة جديد إلى Intlayer عن طريق تشغيل الأمر التالي:
81
-
82
- ```bash
83
- npx intlayer dictionary push -d my-first-dictionary-key
84
- ```
85
-
86
- يقوم هذا الأمر بتحميل قواميس المحتوى الأولية الخاصة بك، مما يجعلها متاحة للتحميل والتحرير بشكل غير متزامن عبر منصة Intlayer.
87
-
88
- ## استيراد `useIntlayerAsync` في Next.js
89
-
90
- نظرًا لأن `useIntlayerAsync` مخصص لمكونات **جهة العميل**، فستقوم باستيراده من نفس نقطة الدخول الخاصة بالعميل مثل `useIntlayer`:
91
-
92
- ```tsx codeFormat="typescript"
93
- "use client";
94
-
95
- import { useIntlayerAsync } from "next-intlayer";
96
- ```
97
-
98
- ```javascript codeFormat="esm"
99
- "use client";
100
-
101
- import { useIntlayerAsync } from "next-intlayer";
102
- ```
103
-
104
- ```javascript codeFormat="commonjs"
105
- "use client";
106
-
107
- const { useIntlayerAsync } = require("next-intlayer");
108
- ```
109
-
110
- تأكد من أن الملف الذي يستورد يحتوي على التعليق `"use client"` في الأعلى، إذا كنت تستخدم Next.js App Router مع فصل مكونات الخادم والعميل.
111
-
112
- ## المعاملات
113
-
114
- 1. **`key`**:
115
- **النوع**: `DictionaryKeys`
116
- مفتاح القاموس المستخدم لتحديد كتلة المحتوى المحلي. يجب تعريف هذا المفتاح في ملفات إعلان المحتوى الخاصة بك.
117
-
118
- 2. **`locale`** (اختياري):
119
- **النوع**: `Locales`
120
- اللغة المحددة التي تريد استهدافها. إذا تم حذفها، يستخدم الخطاف اللغة من سياق العميل.
121
-
122
- 3. **`isRenderEditor`** (اختياري، القيمة الافتراضية `true`):
123
- **النوع**: `boolean`
124
- يحدد ما إذا كان يجب أن يكون المحتوى جاهزًا للعرض مع تراكب محرر Intlayer. إذا تم تعيينه إلى `false`، ستستبعد بيانات القاموس المرجعة الميزات الخاصة بالمحرر.
125
-
126
- ## القيمة المرجعة
127
-
128
- يعيد الخطاف كائن قاموس يحتوي على المحتوى المحلي المفهرس بواسطة `key` و`locale`. كما يتضمن قيمة منطقية `isLoading` تشير إلى ما إذا كان يتم حاليًا جلب قاموس بعيد.
129
-
130
- ## مثال على الاستخدام في Next.js
131
-
132
- ### مثال على مكون جانب العميل
133
-
134
- ```tsx fileName="src/components/AsyncClientComponentExample.tsx" codeFormat="typescript"
135
- "use client";
136
-
137
- import { useEffect, type FC } from "react";
138
- import { useIntlayerAsync } from "next-intlayer";
139
-
140
- export const AsyncClientComponentExample: FC = () => {
141
- const { title, description, isLoading } = useIntlayerAsync("async-component");
142
-
143
- useEffect(() => {
144
- if (isLoading) {
145
- console.log("يتم تحميل المحتوى...");
146
- }
147
- }, [isLoading]);
148
-
149
- return (
150
- <div>
151
- <h1>{title.value}</h1>
152
- <p>{description.value}</p>
153
- </div>
154
- );
155
- };
156
- ```
157
-
158
- ```jsx fileName="src/components/AsyncClientComponentExample.mjx" codeFormat="esm"
159
- "use client";
160
-
161
- import { useEffect } from "react";
162
- import { useIntlayerAsync } from "next-intlayer";
163
-
164
- const AsyncClientComponentExample = () => {
165
- const { title, description, isLoading } = useIntlayerAsync("async-component");
166
-
167
- useEffect(() => {
168
- if (isLoading) {
169
- console.log("يتم تحميل المحتوى...");
170
- }
171
- }, [isLoading]);
172
-
173
- return (
174
- <div>
175
- <h1>{title.value}</h1>
176
- <p>{description.value}</p>
177
- </div>
178
- );
179
- };
180
- ```
181
-
182
- ```jsx fileName="src/components/AsyncClientComponentExample.csx" codeFormat="commonjs"
183
- "use client";
184
-
185
- const { useEffect } = require("react");
186
- const { useIntlayerAsync } = require("next-intlayer");
187
-
188
- const AsyncClientComponentExample = () => {
189
- const { title, description, isLoading } = useIntlayerAsync("async-component");
190
-
191
- useEffect(() => {
192
- if (isLoading) {
193
- console.log("يتم تحميل المحتوى...");
194
- }
195
- }, [isLoading]);
196
-
197
- return (
198
- <div>
199
- <h1>{title.value}</h1>
200
- <p>{description.value}</p>
201
- </div>
202
- );
203
- };
204
- ```
205
-
206
- **النقاط الرئيسية:**
207
-
208
- - عند العرض الأولي، يأتي `title` و `description` من قاموس اللغة المُسبق العرض.
209
- - بينما تكون قيمة `isLoading` تساوي `true`، يتم إجراء طلب عن بُعد في الخلفية لجلب قاموس محدث.
210
- - بمجرد اكتمال الجلب، يتم تحديث `title` و `description` بأحدث المحتويات، وتعود قيمة `isLoading` إلى `false`.
211
-
212
- ## التعامل مع تعريب الخصائص
213
-
214
- كما هو الحال مع `useIntlayer`، يمكنك استرجاع قيم الخصائص المعربة لمختلف خصائص HTML (مثل `alt`، `title`، `aria-label`):
215
-
216
- ```tsx
217
- <img src={title.image.src.value} alt={title.image.alt.value} />
218
- ```
219
-
220
- ## ملفات القاموس
221
-
222
- يجب تعريف جميع مفاتيح المحتوى في ملفات إعلان المحتوى الخاصة بك لضمان سلامة النوع ولمنع أخطاء وقت التشغيل. تتيح هذه الملفات التحقق من صحة TypeScript، مما يضمن أنك تشير دائمًا إلى المفاتيح واللغات الموجودة.
223
-
224
- تعليمات إعداد ملفات إعلان المحتوى متاحة [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md).
225
-
226
- ## معلومات إضافية
227
-
228
- - **محرر Intlayer المرئي:**
229
- دمج مع محرر Intlayer المرئي لإدارة وتحرير المحتوى مباشرة من واجهة المستخدم. مزيد من التفاصيل [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md).
230
-
231
- ---
232
-
233
- **باختصار**، `useIntlayerAsync` هو هوك قوي على جانب العميل مصمم لتعزيز تجربة المستخدم والحفاظ على تحديث المحتوى من خلال الجمع بين القواميس المعالجة مسبقًا وتحديثات القاموس غير المتزامنة. من خلال الاستفادة من `isLoading` وإعلانات المحتوى المستندة إلى TypeScript، يمكنك دمج المحتوى الديناميكي والمحلي بسلاسة في تطبيقات Next.js الخاصة بك.
234
-
235
- ## تاريخ الوثيقة
236
-
237
- - 5.5.10 - 2025-06-29: بدء التاريخ