@intlayer/docs 5.7.6 → 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.
- package/dist/cjs/generated/docs.entry.cjs +44 -238
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +44 -238
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -2
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_tanstack.md +457 -0
- package/docs/ar/packages/next-intlayer/index.md +0 -1
- package/docs/ar/packages/react-intlayer/index.md +0 -1
- package/docs/de/intlayer_with_tanstack.md +458 -0
- package/docs/de/packages/next-intlayer/index.md +0 -1
- package/docs/de/packages/react-intlayer/index.md +0 -1
- package/docs/en/intlayer_with_tanstack.md +452 -0
- package/docs/en/packages/next-intlayer/index.md +0 -1
- package/docs/en/packages/react-intlayer/index.md +0 -1
- package/docs/en-GB/intlayer_with_tanstack.md +457 -0
- package/docs/en-GB/packages/next-intlayer/index.md +0 -1
- package/docs/en-GB/packages/react-intlayer/index.md +0 -1
- package/docs/es/intlayer_with_tanstack.md +435 -0
- package/docs/es/packages/next-intlayer/index.md +0 -1
- package/docs/es/packages/react-intlayer/index.md +0 -1
- package/docs/fr/intlayer_with_tanstack.md +435 -0
- package/docs/fr/packages/next-intlayer/index.md +0 -1
- package/docs/fr/packages/react-intlayer/index.md +0 -1
- package/docs/hi/intlayer_with_tanstack.md +438 -0
- package/docs/hi/packages/next-intlayer/index.md +0 -1
- package/docs/hi/packages/react-intlayer/index.md +0 -1
- package/docs/it/intlayer_with_tanstack.md +457 -0
- package/docs/it/packages/next-intlayer/index.md +0 -1
- package/docs/it/packages/react-intlayer/index.md +0 -1
- package/docs/ja/intlayer_with_tanstack.md +457 -0
- package/docs/ja/packages/next-intlayer/index.md +0 -1
- package/docs/ja/packages/react-intlayer/index.md +0 -1
- package/docs/ko/intlayer_with_tanstack.md +457 -0
- package/docs/ko/packages/next-intlayer/index.md +0 -1
- package/docs/ko/packages/react-intlayer/index.md +0 -1
- package/docs/pt/intlayer_with_tanstack.md +457 -0
- package/docs/pt/packages/next-intlayer/index.md +0 -1
- package/docs/pt/packages/react-intlayer/index.md +0 -1
- package/docs/ru/intlayer_with_tanstack.md +458 -0
- package/docs/ru/packages/next-intlayer/index.md +0 -1
- package/docs/ru/packages/react-intlayer/index.md +0 -1
- package/docs/zh/intlayer_with_tanstack.md +435 -0
- package/docs/zh/packages/next-intlayer/index.md +0 -1
- package/docs/zh/packages/react-intlayer/index.md +0 -1
- package/package.json +9 -9
- package/src/generated/docs.entry.ts +44 -238
- package/docs/ar/packages/next-intlayer/useIntlayerAsync.md +0 -237
- package/docs/ar/packages/react-intlayer/useIntlayerAsync.md +0 -252
- package/docs/de/packages/next-intlayer/useIntlayerAsync.md +0 -262
- package/docs/de/packages/react-intlayer/useIntlayerAsync.md +0 -256
- package/docs/en/packages/next-intlayer/useIntlayerAsync.md +0 -239
- package/docs/en/packages/react-intlayer/useIntlayerAsync.md +0 -254
- package/docs/en-GB/packages/next-intlayer/useIntlayerAsync.md +0 -237
- package/docs/en-GB/packages/react-intlayer/useIntlayerAsync.md +0 -257
- package/docs/es/packages/next-intlayer/useIntlayerAsync.md +0 -240
- package/docs/es/packages/react-intlayer/useIntlayerAsync.md +0 -276
- package/docs/fr/packages/next-intlayer/useIntlayerAsync.md +0 -238
- package/docs/fr/packages/react-intlayer/useIntlayerAsync.md +0 -252
- package/docs/hi/packages/next-intlayer/useIntlayerAsync.md +0 -237
- package/docs/hi/packages/react-intlayer/useIntlayerAsync.md +0 -252
- package/docs/it/packages/next-intlayer/useIntlayerAsync.md +0 -237
- package/docs/it/packages/react-intlayer/useIntlayerAsync.md +0 -252
- package/docs/ja/packages/next-intlayer/useIntlayerAsync.md +0 -237
- package/docs/ja/packages/react-intlayer/useIntlayerAsync.md +0 -268
- package/docs/ko/packages/next-intlayer/useIntlayerAsync.md +0 -260
- package/docs/ko/packages/react-intlayer/useIntlayerAsync.md +0 -271
- package/docs/pt/packages/next-intlayer/useIntlayerAsync.md +0 -238
- package/docs/pt/packages/react-intlayer/useIntlayerAsync.md +0 -252
- package/docs/ru/packages/next-intlayer/useIntlayerAsync.md +0 -237
- package/docs/ru/packages/react-intlayer/useIntlayerAsync.md +0 -252
- package/docs/zh/packages/next-intlayer/useIntlayerAsync.md +0 -239
- 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: بدء التاريخ
|