npm - @intlayer/docs - Versions diffs - 6.1.4 → 6.1.6-canary.0 - Mend

@intlayer/docs 6.1.4 → 6.1.6-canary.0

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 (75) hide show

package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +1366 -75
package/blog/ar/nextjs-multilingual-seo-comparison.md +364 -0
package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +1288 -72
package/blog/de/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/en/intlayer_with_next-i18next.mdx +431 -0
package/blog/en/intlayer_with_next-intl.mdx +335 -0
package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +583 -336
package/blog/en/nextjs-multilingual-seo-comparison.md +360 -0
package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1144 -37
package/blog/en-GB/nextjs-multilingual-seo-comparison.md +360 -0
package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +1236 -64
package/blog/es/nextjs-multilingual-seo-comparison.md +363 -0
package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1142 -75
package/blog/fr/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/hi/nextjs-multilingual-seo-comparison.md +363 -0
package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1130 -55
package/blog/it/nextjs-multilingual-seo-comparison.md +363 -0
package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1150 -76
package/blog/ja/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1139 -73
package/blog/ko/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1143 -76
package/blog/pt/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1150 -74
package/blog/ru/nextjs-multilingual-seo-comparison.md +370 -0
package/blog/tr/next-i18next_vs_next-intl_vs_intlayer.md +2 -0
package/blog/tr/nextjs-multilingual-seo-comparison.md +362 -0
package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1152 -75
package/blog/zh/nextjs-multilingual-seo-comparison.md +394 -0
package/dist/cjs/generated/blog.entry.cjs +16 -0
package/dist/cjs/generated/blog.entry.cjs.map +1 -1
package/dist/cjs/generated/docs.entry.cjs +16 -0
package/dist/cjs/generated/docs.entry.cjs.map +1 -1
package/dist/esm/generated/blog.entry.mjs +16 -0
package/dist/esm/generated/blog.entry.mjs.map +1 -1
package/dist/esm/generated/docs.entry.mjs +16 -0
package/dist/esm/generated/docs.entry.mjs.map +1 -1
package/dist/types/generated/blog.entry.d.ts +1 -0
package/dist/types/generated/blog.entry.d.ts.map +1 -1
package/dist/types/generated/docs.entry.d.ts +1 -0
package/dist/types/generated/docs.entry.d.ts.map +1 -1
package/docs/ar/component_i18n.md +186 -0
package/docs/ar/vs_code_extension.md +48 -109
package/docs/de/component_i18n.md +186 -0
package/docs/de/vs_code_extension.md +46 -107
package/docs/en/component_i18n.md +186 -0
package/docs/en/interest_of_intlayer.md +2 -2
package/docs/en/intlayer_with_nextjs_14.md +18 -1
package/docs/en/intlayer_with_nextjs_15.md +18 -1
package/docs/en/vs_code_extension.md +24 -114
package/docs/en-GB/component_i18n.md +186 -0
package/docs/en-GB/vs_code_extension.md +42 -103
package/docs/es/component_i18n.md +182 -0
package/docs/es/vs_code_extension.md +53 -114
package/docs/fr/component_i18n.md +186 -0
package/docs/fr/vs_code_extension.md +50 -111
package/docs/hi/component_i18n.md +186 -0
package/docs/hi/vs_code_extension.md +49 -110
package/docs/it/component_i18n.md +186 -0
package/docs/it/vs_code_extension.md +50 -111
package/docs/ja/component_i18n.md +186 -0
package/docs/ja/vs_code_extension.md +50 -111
package/docs/ko/component_i18n.md +186 -0
package/docs/ko/vs_code_extension.md +48 -109
package/docs/pt/component_i18n.md +186 -0
package/docs/pt/vs_code_extension.md +46 -107
package/docs/ru/component_i18n.md +186 -0
package/docs/ru/vs_code_extension.md +48 -109
package/docs/tr/component_i18n.md +186 -0
package/docs/tr/vs_code_extension.md +54 -115
package/docs/zh/component_i18n.md +186 -0
package/docs/zh/vs_code_extension.md +51 -105
package/package.json +11 -11
package/src/generated/blog.entry.ts +16 -0
package/src/generated/docs.entry.ts +16 -0

package/blog/en/intlayer_with_next-intl.mdx ADDED Viewed

@@ -0,0 +1,335 @@
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── common.json
+│   │  └── about.json
+│   ├── fr
+│   │  ├── common.json
+│   │  └── about.json
+│   └── es
+│      ├── common.json
+│      └── about.json
+└── src
+    ├── i18n.ts
+    ├── middleware.ts
+    ├── app
+    │   └── [locale]
+    │       ├── layout.tsx
+    │       └── about
+    │           └── page.tsx
+    └── components
+        ├── ClientComponentExample.tsx
+        └── ServerComponent.tsx
+```
+#### Setup and Loading Content
+As mentioned previously, you must optimize how each JSON file is imported into your code.
+How the library handles content loading is important.
+```tsx fileName="src/i18n.ts"
+import { getRequestConfig } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+export const locales = ['en', 'fr', 'es'] as const;
+export const defaultLocale = 'en' as const;
+async function loadMessages(locale: string) {
+  // Load only the namespaces your layout/pages need
+  const [common, about] = await Promise.all([
+    import(`../locales/${locale}/common.json`).then((m) => m.default),
+    import(`../locales/${locale}/about.json`).then((m) => m.default),
+  ]);
+  return { common, about } as const;
+}
+export default getRequestConfig(async ({ locale }) => {
+  if (!locales.includes(locale as any)) notFound();
+  return {
+    messages: await loadMessages(locale),
+  };
+});
+```
+```tsx fileName="src/app/[locale]/layout.tsx"
+import type { ReactNode } from 'react';
+import { locales } from '@/i18n';
+import {
+  getLocaleDirection,
+  unstable_setRequestLocale,
+} from 'next-intl/server';
+export const dynamic = 'force-static';
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+export default function LocaleLayout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  // Set the active request locale for this server render (RSC)
+  unstable_setRequestLocale(locale);
+  const dir = getLocaleDirection(locale);
+  return (
+    <html lang={locale} dir={dir}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+```tsx fileName="src/app/[locale]/about/page.tsx"
+import { getTranslations, getMessages, getFormatter } from 'next-intl/server';
+import { NextIntlClientProvider } from 'next-intl';
+import pick from 'lodash/pick';
+import ServerComponent from '@/components/ServerComponent';
+import ClientComponentExample from '@/components/ClientComponentExample';
+export const dynamic = 'force-static';
+export default async function AboutPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  // Messages are loaded server-side. Push only what's needed to the client.
+  const messages = await getMessages();
+  const clientMessages = pick(messages, ['common', 'about']);
+  // Strictly server-side translations/formatting
+  const tAbout = await getTranslations('about');
+  const tCounter = await getTranslations('about.counter');
+  const format = await getFormatter();
+  const initialFormattedCount = format.number(0);
+  return (
+    <NextIntlClientProvider locale={locale} messages={clientMessages}>
+      <main>
+        <h1>{tAbout('title')}</h1>
+        <ClientComponentExample />
+        <ServerComponent
+          formattedCount={initialFormattedCount}
+          label={tCounter('label')}
+          increment={tCounter('increment')}
+        />
+      </main>
+    </NextIntlClientProvider>
+  );
+}
+```
+### Usage in a client component
+Let's take an example of a client component rendering a counter.
+**Translations (shape reused; load them into next-intl messages as you prefer)**
+```json fileName="locales/en/about.json"
+{
+  "counter": {
+    "label": "Counter",
+    "increment": "Increment"
+  }
+}
+```
+```json fileName="locales/fr/about.json"
+{
+  "counter": {
+    "label": "Compteur",
+    "increment": "Incrémenter"
+  }
+}
+```
+**Client component**
+```tsx fileName="src/components/ClientComponentExample.tsx"
+'use client';
+import React, { useState } from 'react';
+import { useTranslations, useFormatter } from 'next-intl';
+const ClientComponentExample = () => {
+  // Scope directly to the nested object
+  const t = useTranslations('about.counter');
+  const format = useFormatter();
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <p>{format.number(count)}</p>
+      <button
+        aria-label={t('label')}
+        onClick={() => setCount((count) => count + 1)}
+      >
+        {t('increment')}
+      </button>
+    </div>
+  );
+};
+```
+> Don't forget to add "about" message on the page client message
+> (only include the namespaces your client actually needs).
+### Usage in a server component
+We will take the case of a UI component. This component is a server component, and should be able to be inserted as a child of a client component. (page (server component) -> client component -> server component). As this component can be inserted as a child of a client component, it cannot be async.
+```tsx fileName="src/components/ServerComponent.tsx"
+type ServerComponentProps = {
+  count: number;
+  t: (key: string) => string;
+  formatter: Intl.NumberFormat;
+};
+const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
+  const formatted = formatter.format(count);
+  return (
+    <div>
+      <p>{formatted}</p>
+      <button aria-label={t('label')}>{t('increment')}</button>
+    </div>
+  );
+};
+```
+> As the server component cannot be async, you need to pass the translations and formatter function as props.
+>
+> In your page / layout:
+>
+> - `import { getTranslations, getFormatter } from "next-intl/server";`
+> - `const t = await getTranslations("about.counter");`
+> - `const formatter = await getFormatter().then((formatter) => formatter.number());`
+```tsx fileName="src/app/[locale]/about/layout.tsx"
+import type { Metadata } from 'next';
+import { locales, defaultLocale } from '@/i18n';
+import { getTranslations } from 'next-intl/server';
+function localizedPath(locale: string, path: string) {
+  return locale === defaultLocale ? path : '/' + locale + path;
+}
+export async function generateMetadata({
+  params,
+}: {
+  params: { locale: string };
+}): Promise<Metadata> {
+  const { locale } = params;
+  const t = await getTranslations({ locale, namespace: 'about' });
+  const url = '/about';
+  const languages = Object.fromEntries(
+    locales.map((locale) => [locale, localizedPath(locale, url)])
+  );
+  return {
+    title: t('title'),
+    description: t('description'),
+    alternates: {
+      canonical: localizedPath(locale, url),
+      languages: { ...languages, 'x-default': url },
+    },
+  };
+}
+// ... Rest of the page code
+```
+```tsx fileName="src/app/sitemap.ts"
+import type { MetadataRoute } from 'next';
+import { locales, defaultLocale } from '@/i18n';
+const origin = 'https://example.com';
+const formatterLocalizedPath = (locale: string, path: string) =>
+  locale === defaultLocale ? origin + path : origin + '/' + locale + path;
+export default function sitemap(): MetadataRoute.Sitemap {
+  const aboutLanguages = Object.fromEntries(
+    locales.map((l) => [l, formatterLocalizedPath(l, '/about')])
+  );
+  return [
+    {
+      url: formatterLocalizedPath(defaultLocale, '/about'),
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.7,
+      alternates: { languages: aboutLanguages },
+    },
+  ];
+}
+```
+```tsx fileName="src/app/robots.ts"
+import type { MetadataRoute } from 'next';
+import { locales, defaultLocale } from '@/i18n';
+const origin = 'https://example.com';
+const withAllLocales = (path: string) => [
+  path,
+  ...locales
+    .filter((locale) => locale !== defaultLocale)
+    .map((locale) => '/' + locale + path),
+];
+export default function robots(): MetadataRoute.Robots {
+  const disallow = [
+    ...withAllLocales('/dashboard'),
+    ...withAllLocales('/admin'),
+  ];
+  return {
+    rules: { userAgent: '*', allow: ['/'], disallow },
+    host: origin,
+    sitemap: origin + '/sitemap.xml',
+  };
+}
+```
+### Middleware for locale routing
+Add a middleware to handle locale detection and routing:
+```ts fileName="src/middleware.ts"
+import createMiddleware from 'next-intl/middleware';
+import { locales, defaultLocale } from '@/i18n';
+export default createMiddleware({
+  locales: [...locales],
+  defaultLocale,
+  localeDetection: true,
+});
+export const config = {
+  // Skip API, Next internals and static assets
+  matcher: ['/((?!api|_next|.*\\..*).*)'],
+};
+```
+### Best practices
+- **Set html `lang` and `dir`**: In `src/app/[locale]/layout.tsx`, compute `dir` via `getLocaleDirection(locale)` and set `<html lang={locale} dir={dir}>`.
+- **Split messages by namespace**: Organize JSON per locale and namespace (e.g., `common.json`, `about.json`).
+- **Minimize client payload**: On pages, send only required namespaces to `NextIntlClientProvider` (e.g., `pick(messages, ['common', 'about'])`).
+- **Prefer static pages**: Export `export const dynamic = 'force-static'` and generate static params for all `locales`.
+- **Synchronous server components**: Keep server components sync by passing precomputed strings (translated labels, formatted numbers) rather than async calls or non-serializable functions.