@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/tr/intlayer_with_nestjs.md

@@ -50,7 +50,7 @@ Backend'i uluslararasılaştırarak, uygulamanız sadece kültürel farklılıkl
 ## Başlarken
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-nestjs-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-nestjs-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
   title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -108,7 +108,7 @@ Intlayer'ı TypeScript ile kullanmak için `tsconfig.json`'unuzun ES modüllerin
 
 Proje kökünde bir `intlayer.config.ts` oluşturarak uluslararasılaştırma ayarlarını yapılandırın:
 
-```typescript fileName="intlayer.config.ts"  codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -121,39 +121,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 ### İçeriğinizi Bildirin
 
 Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
 
-```typescript fileName="src/app.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="src/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, type Dictionary } from "intlayer";
 
 const appContent: Dictionary = {

package/docs/tr/intlayer_with_nextjs_14.md

@@ -96,7 +96,7 @@ Here is the final structure that we will make:
 
 Proje kök dizininizde `intlayer.config.ts` dosyasını oluşturun:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales } from "intlayer";
 import { type IntlayerConfig } from "intlayer";
 
@@ -126,64 +126,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.js" codeFormat="esm"
-import { Locales } from "intlayer";
-
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      Locales.TURKISH,
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    // İçerik dosyalarınızın bulunduğu dizin
-    fileExtensions: [".content.ts", ".content.js", ".content.json"],
-    baseDir: "./src",
-    contentDirName: "content",
-    // İçerik dosyalarınızın türlerini belirtin
-    types: {
-      filePath: "./types/intlayer.d.ts",
-      moduleAugmentation: true,
-    },
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      Locales.TURKISH,
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-  content: {
-    // İçerik dosyalarınızın bulunduğu dizin
-    fileExtensions: [".content.ts", ".content.js", ".content.json"],
-    baseDir: "./src",
-    contentDirName: "content",
-    // İçerik dosyalarınızın türlerini belirtin
-    types: {
-      filePath: "./types/intlayer.d.ts",
-      moduleAugmentation: true,
-    },
-  },
-};
-
-module.exports = default = config;
-```
-
 ## Adım 3: Next.js Yapılandırmasını Güncelleme
 
 Next.js yapılandırma dosyanızı Intlayer ile uyumlu hale getirin:
@@ -222,7 +164,7 @@ module.exports = withIntlayer(config);
 
 İçerik dosyalarınızı oluşturun. Bu dosyalar, uygulamanızdaki çok dilli içeriği tanımlar.
 
-```typescript fileName="src/content/home.content.ts" codeFormat="typescript"
+```typescript fileName="src/content/home.content.ts" codeFormat={["typescript", "esm"]}
 import { t } from "intlayer";
 import { type ILocaleContent } from "intlayer";
 
@@ -244,27 +186,6 @@ const homeContent = {
 export default homeContent;
 ```
 
-```javascript fileName="src/content/home.content.js" codeFormat="esm"
-import { t } from "intlayer";
-
-const homeContent = {
-  title: t({
-    en: "Welcome to My App",
-    fr: "Bienvenue dans mon application",
-    es: "Bienvenido a mi aplicación",
-    tr: "Uygulamama Hoş Geldiniz",
-  }),
-  description: t({
-    en: "This is a sample Next.js application with Intlayer",
-    fr: "Ceci est un exemple d'application Next.js avec Intlayer",
-    es: "Esta es una aplicación de ejemplo de Next.js con Intlayer",
-    tr: "Bu, Intlayer ile örnek bir Next.js uygulamasıdır",
-  }),
-};
-
-export default homeContent;
-```
-
 ```json fileName="src/content/home.content.json"
 {
   "title": {
@@ -286,7 +207,7 @@ export default homeContent;
 
 İçeriğinizi bileşenlerinizde kullanın:
 
-```tsx fileName="src/app/page.tsx" codeFormat="typescript"
+```tsx fileName="src/app/page.tsx" codeFormat={["typescript", "esm"]}
 import { useIntlayer } from "next-intlayer";
 import { Locales } from "intlayer";
 
@@ -302,26 +223,11 @@ export default function HomePage() {
 }
 ```
 
-```jsx fileName="src/app/page.jsx" codeFormat="esm"
-import { useIntlayer } from "next-intlayer";
-
-export default function HomePage() {
-  const content = useIntlayer("home");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-}
-```
-
 ## Adım 6: Middleware Kurulumu
 
 Next.js 14'te çok dilli yönlendirme için middleware kurun:
 
-```typescript fileName="src/middleware.ts" codeFormat="typescript"
+```typescript fileName="src/middleware.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { createMiddleware } from "next-intlayer/middleware";
 import { type NextRequest } from "next/server";
 
@@ -336,39 +242,12 @@ export const config = {
 };
 ```
 
-```javascript fileName="src/middleware.js" codeFormat="esm"
-import { createMiddleware } from "next-intlayer/middleware";
-
-export default createMiddleware({
-  // Alternatif olarak, middleware seçeneklerini özelleştirebilirsiniz
-  // locales: ['en', 'fr', 'es'],
-  // defaultLocale: 'en',
-});
-
-export const config = {
-  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
-};
-```
-
-```javascript fileName="src/middleware.cjs" codeFormat="commonjs"
-const { createMiddleware } = require("next-intlayer/middleware");
-
-module.exports = createMiddleware({
-  // Alternatif olarak, middleware seçeneklerini özelleştirebilirsiniz
-  // locales: ['en', 'fr', 'es'],
-  // defaultLocale: 'en',
-});
-
-module.exports.config = {
-  matcher: ["/((?!api|_next|_vercel|.*\\..*).*)"],
-};
-```
-
 ## Adım 7: Düzen Dosyası (Layout)
 
 Kök düzen dosyanızı çok dilli hale getirin:
 
-```tsx fileName="src/app/layout.tsx" codeFormat="typescript"
+```tsx fileName="src/app/layout.tsx" codeFormat={["typescript", "esm"]}
+import {} from "next-intlayer";
 import { getHTMLTextDir } from "intlayer";
 import { getLocaleName } from "intlayer";
 import { Inter } from "next/font/google";
@@ -424,57 +303,11 @@ export default function RootLayout({
 }
 ```
 
-```jsx fileName="src/app/layout.jsx" codeFormat="esm"
-import { getHTMLTextDir } from "intlayer";
-import { getLocaleName } from "intlayer";
-import { Inter } from "next/font/google";
-import { getIntlayer } from "next-intlayer/server";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const generateMetadata = (params) => {
-  const { locale } = params.params;
-  const t = getIntlayer(locale);
-
-  return {
-    title: t({
-      en: "My App",
-      fr: "Mon Application",
-      es: "Mi Aplicación",
-      tr: "Uygulamam",
-    }),
-    description: t({
-      en: "This is my Next.js app with Intlayer",
-      fr: "Ceci est mon application Next.js avec Intlayer",
-      es: "Esta es mi aplicación Next.js con Intlayer",
-      tr: "Bu, Intlayer ile Next.js uygulamamdır",
-    }),
-  };
-};
-
-export default function RootLayout({ children, params }) {
-  const { locale } = params;
-  const localeName = getLocaleName(locale);
-  const textDirection = getHTMLTextDir(locale);
-
-  return (
-    <html lang={locale} dir={textDirection}>
-      <body className={inter.className}>
-        <header>
-          <h1>{localeName}</h1>
-        </header>
-        {children}
-      </body>
-    </html>
-  );
-}
-```
-
 ## Adım 8: Sayfa Yönlendirme
 
 Sayfa yönlendirmelerini çok dilli hale getirin:
 
-```tsx fileName="src/app/[locale]/page.tsx" codeFormat="typescript"
+```tsx fileName="src/app/[locale]/page.tsx" codeFormat={["typescript", "esm"]}
 import { useIntlayer } from "next-intlayer";
 import { Locales } from "intlayer";
 
@@ -490,26 +323,11 @@ export default function HomePage() {
 }
 ```
 
-```jsx fileName="src/app/[locale]/page.jsx" codeFormat="esm"
-import { useIntlayer } from "next-intlayer";
-
-export default function HomePage() {
-  const content = useIntlayer("home");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-}
-```
-
 ## Adım 9: Meta Verilerin Uluslararasılaştırılması
 
 Sayfa meta verilerini uluslararasılaştırın:
 
-```tsx fileName="src/app/[locale]/page.tsx" codeFormat="typescript"
+```tsx fileName="src/app/[locale]/page.tsx" codeFormat={["typescript", "esm"]}
 import { getIntlayer } from "next-intlayer/server";
 import { type Locales } from "intlayer";
 import { type Metadata } from "next/types";
@@ -548,46 +366,11 @@ export default function HomePage() {
 }
 ```
 
-```jsx fileName="src/app/[locale]/page.jsx" codeFormat="esm"
-import { getIntlayer } from "next-intlayer/server";
-
-export const generateMetadata = (params) => {
-  const { locale } = params.params;
-  const t = getIntlayer(locale);
-
-  return {
-    title: t({
-      en: "Home Page",
-      fr: "Page d'accueil",
-      es: "Página de inicio",
-      tr: "Ana Sayfa",
-    }),
-    description: t({
-      en: "Welcome to the home page",
-      fr: "Bienvenue sur la page d'accueil",
-      es: "Bienvenido a la página de inicio",
-      tr: "Ana sayfaya hoş geldiniz",
-    }),
-  };
-};
-
-export default function HomePage() {
-  const content = getIntlayer("home");
-
-  return (
-    <div>
-      <h1>{content.title}</h1>
-      <p>{content.description}</p>
-    </div>
-  );
-}
-```
-
 ## Adım 10: Site Haritası ve Robots.txt Kurulumu
 
 Site haritanızı ve robots.txt dosyanızı çok dilli hale getirin:
 
-```typescript fileName="src/app/[locale]/sitemap.ts" codeFormat="typescript"
+```typescript fileName="src/app/[locale]/sitemap.ts" codeFormat={["typescript", "esm"]}
 import { getLocalizedUrl } from "intlayer";
 import { Locales } from "intlayer";
 import { type MetadataRoute } from "next";
@@ -620,39 +403,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-```javascript fileName="src/app/[locale]/sitemap.js" codeFormat="esm"
-import { getLocalizedUrl } from "intlayer";
-import { Locales } from "intlayer";
-
-export default function sitemap() {
-  const locales = [
-    Locales.ENGLISH,
-    Locales.FRENCH,
-    Locales.SPANISH,
-    Locales.TURKISH,
-  ];
-
-  return [
-    {
-      url: getLocalizedUrl("/", Locales.ENGLISH),
-      lastModified: new Date(),
-      changeFrequency: "yearly",
-      priority: 1,
-      alternates: {
-        languages: locales.reduce(
-          (acc, locale) => ({
-            ...acc,
-            [locale]: getLocalizedUrl("/", locale),
-          }),
-          {}
-        ),
-      },
-    },
-  ];
-}
-```
-
-```typescript fileName="src/app/[locale]/robots.ts" codeFormat="typescript"
+```typescript fileName="src/app/[locale]/robots.ts" codeFormat={["typescript", "esm"]}
 import { getLocalizedUrl } from "intlayer";
 import { Locales } from "intlayer";
 import { type MetadataRoute } from "next";
@@ -669,22 +420,6 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-```javascript fileName="src/app/[locale]/robots.js" codeFormat="esm"
-import { getLocalizedUrl } from "intlayer";
-import { Locales } from "intlayer";
-
-export default function robots() {
-  return {
-    rules: {
-      userAgent: "*",
-      allow: "/",
-      disallow: "/private/",
-    },
-    sitemap: getLocalizedUrl("/sitemap.xml", Locales.ENGLISH),
-  };
-}
-```
-
 ## (İsteğe Bağlı) Adım 11: Yerel Anahtarlayıcı Bileşeni Oluşturma
 
 Uygulamanızın mevcut yerel ayarı saygı göstermesini sağlamak için, bir yerel anahtarlayıcı bileşeni oluşturabilirsiniz. Bu bileşen, dahili URL'leri otomatik olarak mevcut dille önekler, böylece örneğin Fransızca konuşan bir kullanıcı "Hakkında" sayfasına bir bağlantıya tıkladığında, `/fr/hakkinda` yerine `/hakkinda`ya yönlendirilir.
@@ -697,7 +432,7 @@ Bu davranış birkaç nedenden dolayı kullanışlıdır:
 
 Aşağıda, TypeScript'te yerelleştirilmiş bir `Link` bileşeninin uygulanması bulunmaktadır:
 
-```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat={["typescript", "esm"]}
 "use client";
 
 import { useRouter } from "next/navigation";
@@ -738,88 +473,6 @@ const LocaleSwitcher = () => {
 export default LocaleSwitcher;
 ```
 
-```jsx fileName="src/components/LocaleSwitcher.jsx" codeFormat="esm"
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useLocale } from "next-intlayer";
-import { getLocalizedUrl } from "intlayer";
-import { Locales } from "intlayer";
-
-const LocaleSwitcher = () => {
-  const router = useRouter();
-  const { locale } = useLocale();
-
-  const handleLocaleChange = (newLocale) => {
-    const pathWithoutLocale = window.location.pathname.replace(
-      /^\/[a-z]{2}/,
-      ""
-    );
-    router.push(getLocalizedUrl(pathWithoutLocale, newLocale));
-  };
-
-  return (
-    <div>
-      <h2>Dil Seçin</h2>
-      <div>
-        {Object.values(Locales).map((localeItem) => (
-          <button
-            key={localeItem}
-            onClick={() => handleLocaleChange(localeItem)}
-            disabled={locale === localeItem}
-          >
-            {localeItem.toUpperCase()}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default LocaleSwitcher;
-```
-
-```jsx fileName="src/components/LocaleSwitcher.cjs" codeFormat="commonjs"
-"use client";
-
-const { useRouter } = require("next/navigation");
-const { useLocale } = require("next-intlayer");
-const { getLocalizedUrl } = require("intlayer");
-const { Locales } = require("intlayer");
-
-const LocaleSwitcher = () => {
-  const router = useRouter();
-  const { locale } = useLocale();
-
-  const handleLocaleChange = (newLocale) => {
-    const pathWithoutLocale = window.location.pathname.replace(
-      /^\/[a-z]{2}/,
-      ""
-    );
-    router.push(getLocalizedUrl(pathWithoutLocale, newLocale));
-  };
-
-  return (
-    <div>
-      <h2>Dil Seçin</h2>
-      <div>
-        {Object.values(Locales).map((localeItem) => (
-          <button
-            key={localeItem}
-            onClick={() => handleLocaleChange(localeItem)}
-            disabled={locale === localeItem}
-          >
-            {localeItem.toUpperCase()}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-module.exports = LocaleSwitcher;
-```
-
 > Alternatif bir yol, `useLocale` kancası tarafından sağlanan `setLocale` fonksiyonunu kullanmaktır. Bu fonksiyon, sayfa ön yüklemesine izin vermez ve sayfayı yeniden yükler.
 
 > Bu durumda, `router.push` kullanarak yönlendirme olmadan, sadece sunucu tarafı kodunuz içeriğin yerel ayarını değiştirecektir.
@@ -868,7 +521,7 @@ Bu davranış birkaç nedenden dolayı kullanışlıdır:
 
 Aşağıda, TypeScript'te yerelleştirilmiş bir `Link` bileşeninin uygulanması bulunmaktadır:
 
-```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
+```tsx fileName="src/components/Link.tsx" codeFormat={["typescript", "esm"]}
 "use client";
 
 import { getLocalizedUrl } from "intlayer";
@@ -909,78 +562,6 @@ export const Link = forwardRef<
 Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/Link.mjx" codeFormat="esm"
-'use client';
-
-import { getLocalizedUrl } from 'intlayer';
-import NextLink, { type LinkProps as NextLinkProps } from 'next/link';
-import { useLocale } from "next-intlayer";
-import { forwardRef, PropsWithChildren, type ForwardedRef } from 'react';
-
-/**
- * Verilen bir URL'nin harici olup olmadığını kontrol eden yardımcı fonksiyon.
- * URL http:// veya https:// ile başlıyorsa, harici olarak kabul edilir.
- */
-export const checkIsExternalLink = (href) =>
-  /^https?:\/\//.test(href ?? '');
-
-/**
- * Href özelliğini mevcut yerel ayar temelinde uyarlayan özel bir Link bileşeni.
- * Dahili bağlantılar için, `getLocalizedUrl` kullanarak URL'yi yerel ayar ile önekler (örneğin, /fr/hakkinda).
- * Bu, navigasyonun aynı yerel ayar bağlamında kalmasını sağlar.
- */
-export const Link = forwardRef(({ href, children, ...props }, ref) => {
-  const { locale } = useLocale();
-  const isExternalLink = checkIsExternalLink(href.toString());
-
-  // Bağlantı dahili ise ve geçerli bir href sağlanmışsa, yerelleştirilmiş URL'yi alın.
-  const hrefI18n =
-    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
-
-  return (
-    <NextLink href={hrefI18n} ref={ref} {...props}>
-      {children}
-    </NextLink>
-  );
-});
-
-Link.displayName = 'Link';
-```
-
-```jsx fileName="src/components/Link.csx" codeFormat="commonjs"
-'use client';
-
-const { getLocalizedUrl } = require("intlayer");
-const NextLink = require("next/link");
-const { useLocale } = require("next-intlayer");
-const { forwardRef } = require("react");
-
-/**
- * Verilen bir URL'nin harici olup olmadığını kontrol eden yardımcı fonksiyon.
- * URL http:// veya https:// ile başlıyorsa, harici olarak kabul edilir.
- */
-const checkIsExternalLink = (href) =>
-  /^https?:\/\//.test(href ?? '');
-
-
-const Link = forwardRef(({ href, children, ...props }, ref) => {
-  const { locale } = useLocale();
-  const isExternalLink = checkIsExternalLink(href.toString());
-
-  // Bağlantı dahili ise ve geçerli bir href sağlanmışsa, yerelleştirilmiş URL'yi alın.
-  const hrefI18n: NextLinkProps['href'] =
-    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;
-
-  return (
-    <NextLink href={hrefI18n} ref={ref} {...props}>
-      {children}
-    </NextLink>
-  );
-});
-
-Link.displayName = 'Link';
-```
-
 #### Nasıl Çalışır
 
 - **Harici Bağlantıları Algılama**: