@intlayer/docs 6.1.6 → 7.0.0-canary.1

package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1396,6 +1396,20 @@ export const config = {
 
 Intlayer provides built-in middleware handling through the `next-intlayer` package configuration.
 
+```ts fileName="src/middleware.ts"
+import { intlayerMiddleware } from 'next-intlayer/middleware';
+
+export const middleware = intlayerMiddleware()
+
+// applies this middleware only to files in the app directory
+export const config = {
+  matcher:
+    "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+The set up of the middleware centralized in the `intlayer.config.ts` file.
+
   </TabItem>
 </Tab>
 

package/blog/en/{intlayer_with_next-i18next.mdx → _intlayer_with_next-i18next.md}

@@ -22,30 +22,30 @@
 ```
 
 ```ts fileName="i18n.config.ts"
-export const locales = ['en', 'fr'] as const;
+export const locales = ["en", "fr"] as const;
 export type Locale = (typeof locales)[number];
 
-export const defaultLocale: Locale = 'en';
+export const defaultLocale: Locale = "en";
 
-export const rtlLocales = ['ar', 'he', 'fa', 'ur'] as const;
+export const rtlLocales = ["ar", "he", "fa", "ur"] as const;
 export const isRtl = (locale: string) =>
   (rtlLocales as readonly string[]).includes(locale);
 
 export function localizedPath(locale: string, path: string) {
-  return locale === defaultLocale ? path : '/' + locale + path;
+  return locale === defaultLocale ? path : "/" + locale + path;
 }
 
-const ORIGIN = 'https://example.com';
+const ORIGIN = "https://example.com";
 export function abs(locale: string, path: string) {
   return ORIGIN + localizedPath(locale, path);
 }
 ```
 
 ```ts fileName="src/app/i18n/server.ts"
-import { createInstance } from 'i18next';
-import { initReactI18next } from 'react-i18next/initReactI18next';
-import resourcesToBackend from 'i18next-resources-to-backend';
-import { defaultLocale } from '@/i18n.config';
+import { createInstance } from "i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { defaultLocale } from "@/i18n.config";
 
 // Load JSON resources from src/locales/<locale>/<namespace>.json
 const backend = resourcesToBackend(
@@ -55,7 +55,7 @@ const backend = resourcesToBackend(
 
 export async function initI18next(
   locale: string,
-  namespaces: string[] = ['common']
+  namespaces: string[] = ["common"]
 ) {
   const i18n = createInstance();
   await i18n
@@ -65,7 +65,7 @@ export async function initI18next(
       lng: locale,
       fallbackLng: defaultLocale,
       ns: namespaces,
-      defaultNS: 'common',
+      defaultNS: "common",
       interpolation: { escapeValue: false },
       react: { useSuspense: false },
     });
@@ -74,14 +74,14 @@ export async function initI18next(
 ```
 
 ```tsx fileName="src/components/I18nProvider.tsx"
-'use client';
+"use client";
 
-import * as React from 'react';
-import { I18nextProvider } from 'react-i18next';
-import { createInstance } from 'i18next';
-import { initReactI18next } from 'react-i18next/initReactI18next';
-import resourcesToBackend from 'i18next-resources-to-backend';
-import { defaultLocale } from '@/i18n.config';
+import * as React from "react";
+import { I18nextProvider } from "react-i18next";
+import { createInstance } from "i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
+import resourcesToBackend from "i18next-resources-to-backend";
+import { defaultLocale } from "@/i18n.config";
 
 const backend = resourcesToBackend(
   (locale: string, namespace: string) =>
@@ -97,7 +97,7 @@ type Props = {
 
 export default function I18nProvider({
   locale,
-  namespaces = ['common'],
+  namespaces = ["common"],
   resources,
   children,
 }: Props) {
@@ -111,7 +111,7 @@ export default function I18nProvider({
         fallbackLng: defaultLocale,
         ns: namespaces,
         resources: resources ? { [locale]: resources } : undefined,
-        defaultNS: 'common',
+        defaultNS: "common",
         interpolation: { escapeValue: false },
         react: { useSuspense: false },
       });
@@ -124,8 +124,8 @@ export default function I18nProvider({
 ```
 
 ```tsx fileName="src/app/[locale]/layout.tsx"
-import type { ReactNode } from 'react';
-import { locales, defaultLocale, isRtl, type Locale } from '@/i18n.config';
+import type { ReactNode } from "react";
+import { locales, defaultLocale, isRtl, type Locale } from "@/i18n.config";
 
 export const dynamicParams = false;
 
@@ -144,7 +144,7 @@ export default function LocaleLayout({
     ? (params.locale as any)
     : defaultLocale;
 
-  const dir = isRtl(locale) ? 'rtl' : 'ltr';
+  const dir = isRtl(locale) ? "rtl" : "ltr";
 
   return (
     <html lang={locale} dir={dir}>
@@ -155,29 +155,26 @@ export default function LocaleLayout({
 ```
 
 ```tsx fileName="src/app/[locale]/about.tsx"
-import I18nProvider from '@/components/I18nProvider';
-import { initI18next } from '@/app/i18n/server';
-import type { Locale } from '@/i18n.config';
-import ClientComponent from '@/components/ClientComponent';
-import ServerComponent from '@/components/ServerComponent';
-
-// Force static rendering for the page
-export const dynamic = 'force-static';
+import I18nProvider from "@/components/I18nProvider";
+import { initI18next } from "@/app/i18n/server";
+import type { Locale } from "@/i18n.config";
+import ClientComponent from "@/components/ClientComponent";
+import ServerComponent from "@/components/ServerComponent";
 
 export default async function AboutPage({
   params: { locale },
 }: {
   params: { locale: Locale };
 }) {
-  const namespaces = ['common', 'about'] as const;
+  const namespaces = ["common", "about"] as const;
 
   const i18n = await initI18next(locale, [...namespaces]);
-  const tAbout = i18n.getFixedT(locale, 'about');
+  const tAbout = i18n.getFixedT(locale, "about");
 
   return (
     <I18nProvider locale={locale} namespaces={[...namespaces]}>
       <main>
-        <h1>{tAbout('title')}</h1>
+        <h1>{tAbout("title")}</h1>
 
         <ClientComponent />
         <ServerComponent t={tAbout} locale={locale} count={0} />
@@ -214,13 +211,13 @@ export default async function AboutPage({
 **Client component (loads only the required namespace)**
 
 ```tsx fileName="src/components/ClientComponent.tsx"
-'use client';
+"use client";
 
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 const ClientComponent = () => {
-  const { t, i18n } = useTranslation('about');
+  const { t, i18n } = useTranslation("about");
   const [count, setCount] = useState(0);
 
   const numberFormat = new Intl.NumberFormat(i18n.language);
@@ -229,10 +226,10 @@ const ClientComponent = () => {
     <div>
       <p>{numberFormat.format(count)}</p>
       <button
-        aria-label={t('counter.label')}
+        aria-label={t("counter.label")}
         onClick={() => setCount((c) => c + 1)}
       >
-        {t('counter.increment')}
+        {t("counter.increment")}
       </button>
     </div>
   );
@@ -263,7 +260,7 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
   return (
     <div>
       <p>{formatted}</p>
-      <button aria-label={t('counter.label')}>{t('counter.increment')}</button>
+      <button aria-label={t("counter.label")}>{t("counter.increment")}</button>
     </div>
   );
 };
@@ -289,24 +286,24 @@ Here's a list of good practices regarding multilingual SEO.
 Developers often forget to properly reference their pages across locales.
 
 ```ts fileName="i18n.config.ts"
-export const locales = ['en', 'fr'] as const;
+export const locales = ["en", "fr"] as const;
 export type Locale = (typeof locales)[number];
-export const defaultLocale: Locale = 'en';
-export const rtlLocales = ['ar', 'he', 'fa', 'ur'] as const;
+export const defaultLocale: Locale = "en";
+export const rtlLocales = ["ar", "he", "fa", "ur"] as const;
 export const isRtl = (locale: string) =>
   (rtlLocales as readonly string[]).includes(locale);
 export function localizedPath(locale: string, path: string) {
-  return locale === defaultLocale ? path : '/' + locale + path;
+  return locale === defaultLocale ? path : "/" + locale + path;
 }
-const ORIGIN = 'https://example.com';
+const ORIGIN = "https://example.com";
 export function abs(locale: string, path: string) {
   return ORIGIN + localizedPath(locale, path);
 }
 ```
 
 ```tsx fileName="src/app/[locale]/about/layout.tsx"
-import type { Metadata } from 'next';
-import { locales, defaultLocale, localizedPath } from '@/i18n.config';
+import type { Metadata } from "next";
+import { locales, defaultLocale, localizedPath } from "@/i18n.config";
 
 export async function generateMetadata({
   params,
@@ -316,19 +313,19 @@ export async function generateMetadata({
   const { locale } = params;
 
   // Import the correct JSON bundle from src/locales
-  const messages = (await import('@/locales/' + locale + '/about.json'))
+  const messages = (await import("@/locales/" + locale + "/about.json"))
     .default;
 
   const languages = Object.fromEntries(
-    locales.map((locale) => [locale, localizedPath(locale, '/about')])
+    locales.map((locale) => [locale, localizedPath(locale, "/about")])
   );
 
   return {
     title: messages.title,
     description: messages.description,
     alternates: {
-      canonical: localizedPath(locale, '/about'),
-      languages: { ...languages, 'x-default': '/about' },
+      canonical: localizedPath(locale, "/about"),
+      languages: { ...languages, "x-default": "/about" },
     },
   };
 }
@@ -339,19 +336,19 @@ export default async function AboutPage() {
 ```
 
 ```ts fileName="src/app/sitemap.ts"
-import type { MetadataRoute } from 'next';
-import { locales, defaultLocale, abs } from '@/i18n.config';
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale, abs } from "@/i18n.config";
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const languages = Object.fromEntries(
-    locales.map((locale) => [locale, abs(locale, '/about')])
+    locales.map((locale) => [locale, abs(locale, "/about")])
   );
 
   return [
     {
-      url: abs(defaultLocale, '/about'),
+      url: abs(defaultLocale, "/about"),
       lastModified: new Date(),
-      changeFrequency: 'monthly',
+      changeFrequency: "monthly",
       priority: 0.7,
       alternates: { languages },
     },
@@ -360,10 +357,10 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 ```ts fileName="src/app/robots.ts"
-import type { MetadataRoute } from 'next';
-import { locales, defaultLocale, localizedPath } from '@/i18n.config';
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale, localizedPath } from "@/i18n.config";
 
-const ORIGIN = 'https://example.com';
+const ORIGIN = "https://example.com";
 
 const expandAllLocales = (path: string) => [
   localizedPath(defaultLocale, path),
@@ -374,14 +371,14 @@ const expandAllLocales = (path: string) => [
 
 export default function robots(): MetadataRoute.Robots {
   const disallow = [
-    ...expandAllLocales('/dashboard'),
-    ...expandAllLocales('/admin'),
+    ...expandAllLocales("/dashboard"),
+    ...expandAllLocales("/admin"),
   ];
 
   return {
-    rules: { userAgent: '*', allow: ['/'], disallow },
+    rules: { userAgent: "*", allow: ["/"], disallow },
     host: ORIGIN,
-    sitemap: ORIGIN + '/sitemap.xml',
+    sitemap: ORIGIN + "/sitemap.xml",
   };
 }
 ```
@@ -393,8 +390,8 @@ export default function robots(): MetadataRoute.Robots {
 Add a middleware to handle locale detection and routing:
 
 ```ts fileName="src/middleware.ts"
-import { NextResponse, type NextRequest } from 'next/server';
-import { defaultLocale, locales } from '@/i18n.config';
+import { NextResponse, type NextRequest } from "next/server";
+import { defaultLocale, locales } from "@/i18n.config";
 
 const PUBLIC_FILE = /\.[^/]+$/; // exclude files with extensions
 
@@ -402,9 +399,9 @@ export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
 
   if (
-    pathname.startsWith('/_next') ||
-    pathname.startsWith('/api') ||
-    pathname.startsWith('/static') ||
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/api") ||
+    pathname.startsWith("/static") ||
     PUBLIC_FILE.test(pathname)
   ) {
     return;
@@ -412,12 +409,12 @@ export function middleware(request: NextRequest) {
 
   const hasLocale = locales.some(
     (locale) =>
-      pathname === '/' + locale || pathname.startsWith('/' + locale + '/')
+      pathname === "/" + locale || pathname.startsWith("/" + locale + "/")
   );
   if (!hasLocale) {
     const locale = defaultLocale;
     const url = request.nextUrl.clone();
-    url.pathname = '/' + locale + (pathname === '/' ? '' : pathname);
+    url.pathname = "/" + locale + (pathname === "/" ? "" : pathname);
     return NextResponse.redirect(url);
   }
 }
@@ -425,7 +422,7 @@ export function middleware(request: NextRequest) {
 export const config = {
   matcher: [
     // Match all paths except the ones starting with these and files with an extension
-    '/((?!api|_next|static|.*\\..*).*)',
+    "/((?!api|_next|static|.*\\..*).*)",
   ],
 };
 ```

package/blog/en/{intlayer_with_next-intl.mdx → _intlayer_with_next-intl.md}

@@ -29,11 +29,11 @@ As mentioned previously, you must optimize how each JSON file is imported into y
 How the library handles content loading is important.
 
 ```tsx fileName="src/i18n.ts"
-import { getRequestConfig } from 'next-intl/server';
-import { notFound } from 'next/navigation';
+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;
+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
@@ -55,14 +55,12 @@ export default getRequestConfig(async ({ locale }) => {
 ```
 
 ```tsx fileName="src/app/[locale]/layout.tsx"
-import type { ReactNode } from 'react';
-import { locales } from '@/i18n';
+import type { ReactNode } from "react";
+import { locales } from "@/i18n";
 import {
   getLocaleDirection,
   unstable_setRequestLocale,
-} from 'next-intl/server';
-
-export const dynamic = 'force-static';
+} from "next-intl/server";
 
 export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
@@ -91,13 +89,11 @@ export default function LocaleLayout({
 ```
 
 ```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';
+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 default async function AboutPage({
   params,
@@ -108,11 +104,11 @@ export default async function AboutPage({
 
   // Messages are loaded server-side. Push only what's needed to the client.
   const messages = await getMessages();
-  const clientMessages = pick(messages, ['common', 'about']);
+  const clientMessages = pick(messages, ["common", "about"]);
 
   // Strictly server-side translations/formatting
-  const tAbout = await getTranslations('about');
-  const tCounter = await getTranslations('about.counter');
+  const tAbout = await getTranslations("about");
+  const tCounter = await getTranslations("about.counter");
   const format = await getFormatter();
 
   const initialFormattedCount = format.number(0);
@@ -120,12 +116,12 @@ export default async function AboutPage({
   return (
     <NextIntlClientProvider locale={locale} messages={clientMessages}>
       <main>
-        <h1>{tAbout('title')}</h1>
+        <h1>{tAbout("title")}</h1>
         <ClientComponentExample />
         <ServerComponent
           formattedCount={initialFormattedCount}
-          label={tCounter('label')}
-          increment={tCounter('increment')}
+          label={tCounter("label")}
+          increment={tCounter("increment")}
         />
       </main>
     </NextIntlClientProvider>
@@ -160,14 +156,14 @@ Let's take an example of a client component rendering a counter.
 **Client component**
 
 ```tsx fileName="src/components/ClientComponentExample.tsx"
-'use client';
+"use client";
 
-import React, { useState } from 'react';
-import { useTranslations, useFormatter } from 'next-intl';
+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 t = useTranslations("about.counter");
   const format = useFormatter();
   const [count, setCount] = useState(0);
 
@@ -175,10 +171,10 @@ const ClientComponentExample = () => {
     <div>
       <p>{format.number(count)}</p>
       <button
-        aria-label={t('label')}
+        aria-label={t("label")}
         onClick={() => setCount((count) => count + 1)}
       >
-        {t('increment')}
+        {t("increment")}
       </button>
     </div>
   );
@@ -205,7 +201,7 @@ const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
   return (
     <div>
       <p>{formatted}</p>
-      <button aria-label={t('label')}>{t('increment')}</button>
+      <button aria-label={t("label")}>{t("increment")}</button>
     </div>
   );
 };
@@ -220,12 +216,12 @@ const ServerComponent = ({ t, count, formatter }: ServerComponentProps) => {
 > - `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';
+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;
+  return locale === defaultLocale ? path : "/" + locale + path;
 }
 
 export async function generateMetadata({
@@ -234,19 +230,19 @@ export async function generateMetadata({
   params: { locale: string };
 }): Promise<Metadata> {
   const { locale } = params;
-  const t = await getTranslations({ locale, namespace: 'about' });
+  const t = await getTranslations({ locale, namespace: "about" });
 
-  const url = '/about';
+  const url = "/about";
   const languages = Object.fromEntries(
     locales.map((locale) => [locale, localizedPath(locale, url)])
   );
 
   return {
-    title: t('title'),
-    description: t('description'),
+    title: t("title"),
+    description: t("description"),
     alternates: {
       canonical: localizedPath(locale, url),
-      languages: { ...languages, 'x-default': url },
+      languages: { ...languages, "x-default": url },
     },
   };
 }
@@ -255,24 +251,24 @@ export async function generateMetadata({
 ```
 
 ```tsx fileName="src/app/sitemap.ts"
-import type { MetadataRoute } from 'next';
-import { locales, defaultLocale } from '@/i18n';
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale } from "@/i18n";
 
-const origin = 'https://example.com';
+const origin = "https://example.com";
 
 const formatterLocalizedPath = (locale: string, path: string) =>
-  locale === defaultLocale ? origin + path : origin + '/' + locale + path;
+  locale === defaultLocale ? origin + path : origin + "/" + locale + path;
 
 export default function sitemap(): MetadataRoute.Sitemap {
   const aboutLanguages = Object.fromEntries(
-    locales.map((l) => [l, formatterLocalizedPath(l, '/about')])
+    locales.map((l) => [l, formatterLocalizedPath(l, "/about")])
   );
 
   return [
     {
-      url: formatterLocalizedPath(defaultLocale, '/about'),
+      url: formatterLocalizedPath(defaultLocale, "/about"),
       lastModified: new Date(),
-      changeFrequency: 'monthly',
+      changeFrequency: "monthly",
       priority: 0.7,
       alternates: { languages: aboutLanguages },
     },
@@ -281,27 +277,27 @@ export default function sitemap(): MetadataRoute.Sitemap {
 ```
 
 ```tsx fileName="src/app/robots.ts"
-import type { MetadataRoute } from 'next';
-import { locales, defaultLocale } from '@/i18n';
+import type { MetadataRoute } from "next";
+import { locales, defaultLocale } from "@/i18n";
 
-const origin = 'https://example.com';
+const origin = "https://example.com";
 const withAllLocales = (path: string) => [
   path,
   ...locales
     .filter((locale) => locale !== defaultLocale)
-    .map((locale) => '/' + locale + path),
+    .map((locale) => "/" + locale + path),
 ];
 
 export default function robots(): MetadataRoute.Robots {
   const disallow = [
-    ...withAllLocales('/dashboard'),
-    ...withAllLocales('/admin'),
+    ...withAllLocales("/dashboard"),
+    ...withAllLocales("/admin"),
   ];
 
   return {
-    rules: { userAgent: '*', allow: ['/'], disallow },
+    rules: { userAgent: "*", allow: ["/"], disallow },
     host: origin,
-    sitemap: origin + '/sitemap.xml',
+    sitemap: origin + "/sitemap.xml",
   };
 }
 ```
@@ -311,8 +307,8 @@ export default function robots(): MetadataRoute.Robots {
 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';
+import createMiddleware from "next-intl/middleware";
+import { locales, defaultLocale } from "@/i18n";
 
 export default createMiddleware({
   locales: [...locales],
@@ -322,7 +318,7 @@ export default createMiddleware({
 
 export const config = {
   // Skip API, Next internals and static assets
-  matcher: ['/((?!api|_next|.*\\..*).*)'],
+  matcher: ["/((?!api|_next|.*\\..*).*)"],
 };
 ```
 

package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1401,6 +1401,20 @@ export const config = {
 
 Intlayer provides built-in middleware handling through the `next-intlayer` package configuration.
 
+```ts fileName="src/middleware.ts"
+import { intlayerMiddleware } from 'next-intlayer/middleware';
+
+export const middleware = intlayerMiddleware()
+
+// applies this middleware only to files in the app directory
+export const config = {
+  matcher:
+    "/((?!api|_next|static|.*\\..*).*)",
+};
+```
+
+The set up of the middleware centralized in the `intlayer.config.ts` file.
+
   </TabItem>
 </Tab>