Autor:
    Aymeric PINEAU
    Data utworzenia:2025-08-23Ostatnia aktualizacja:2026-10-08

    Tłumaczenie

    Definiowanie tłumaczeń

    Funkcja t w intlayer pozwala na deklarowanie treści w wielu językach. Funkcja ta zapewnia pełne bezpieczeństwo typów, zgłaszając błąd podczas kompilacji, jeśli brakuje jakichkolwiek tłumaczeń, co jest szczególnie przydatne w projektach TypeScript.

    Oto przykład deklaracji treści z tłumaczeniami:

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      pl: "Witaj w naszej aplikacji",
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

    Konfiguracja lokalizacji

    Aby zapewnić prawidłowe zarządzanie tłumaczeniami, skonfiguruj obsługiwane lokalizacje w pliku intlayer.config.ts. Ta konfiguracja pozwala zdefiniować języki, które Twoja aplikacja wspiera:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.POLISH, Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

    Używanie tłumaczeń w komponentach

    Dzięki react-intlayer możesz używać tłumaczeń w komponentach React. Oto przykład:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Komponent ten pobiera odpowiednie tłumaczenie na podstawie aktualnego locale ustawionego w Twojej aplikacji.

    Dzięki next-intlayer możesz używać tłumaczeń zarówno w komponentach serwerowych (Server Components), jak i klienckich (Client Components). Oto przykład w komponencie klienckim:

    **/*.tsx
    "use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Dzięki vue-intlayer możesz używać tłumaczeń w komponentach Vue. Oto przykład:

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const content = useIntlayer("multi_lang");
</script>

<template>
  <div>
    <p>{{ content.welcomeMessage }}</p>
  </div>
</template>

    Dzięki svelte-intlayer możesz używać tłumaczeń w komponentach Svelte. Dostęp do magazynu (store) uzyskujemy przez $:

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("multi_lang");
</script>

<div>
  <p>{$content.welcomeMessage}</p>
</div>

    Dzięki preact-intlayer możesz używać tłumaczeń w komponentach Preact. Oto przykład:

    **/*.tsx
    import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const MyComponent: FC = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Dzięki solid-intlayer możesz używać tłumaczeń w komponentach SolidJS. Oto przykład:

    **/*.tsx
    import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
  const content = useIntlayer("multi_lang");

  return (
    <div>
      <p>{content.welcomeMessage}</p>
    </div>
  );
};

export default MyComponent;

    Dzięki angular-intlayer możesz używać tłumaczeń w komponentach Angular. Oto przykład:

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-my-component",
  template: `
    <div>
      <p>{{ content().welcomeMessage }}</p>
    </div>
  `,
})
export class MyComponent {
  content = useIntlayer("multi_lang");
}

    Dzięki vanilla-intlayer możesz używać tłumaczeń w czystym JavaScript. Oto przykład:

    **/*.ts
    import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
  document.getElementById("welcome-message")!.textContent =
    newContent.welcomeMessage;
});

// Pierwsze renderowanie
document.getElementById("welcome-message")!.textContent =
  content.welcomeMessage;

    Dodatkowe zasoby

    Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z następującymi zasobami:

    Dokumentacja Intlayer CLI
    Dokumentacja React Intlayer
    Dokumentacja Next Intlayer

    Te zasoby oferują dodatkowe informacje na temat konfiguracji i użytkowania Intlayer w różnych środowiskach oraz frameworkach.

    Deklaracja zawartościLiczba mnoga