Data utworzenia:2025-08-23Ostatnia aktualizacja:2025-08-23

Prześlij ten dokument do swojego ulubionego asystenta AIChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

Dodaj serwer MCP do swojego asystenta AI

Dzięki integracji serwera Intlayer MCP z ulubionym asystentem AI możesz uzyskać dostęp do całej dokumentacji bezpośrednio z ChatGPT, DeepSeek, Cursor, VSCode itp.

Zobacz dokumentację serwera MCP

Historia wersji

Inicjalizacja historii
v5.5.1029.06.2025

Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

Zobacz ostatnią wersję oryginalnej treści w języku angielskim

Edytuj tę dokumentację

Jeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.

Link do dokumentacji na GitHubie

Kopiuj

Kopiuj dokument Markdown do schowka

Tłumaczenie

Definiowanie tłumaczeń

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

Oto przykład, jak zadeklarować treść z tłumaczeniami.

**/*.content.ts

Kopiuj kod

Skopiuj kod do schowka

import { t, type Dictionary } from "intlayer";interface Content {  welcomeMessage: string;}export default {  key: "multi_lang",  content: {    welcomeMessage: t({      en: "Welcome to our application",      fr: "Bienvenue dans notre application",      es: "Bienvenido a nuestra aplicación",    }),  },} satisfies Dictionary<Content>;

import { t, type Dictionary } from "intlayer";interface Content {  welcomeMessage: string;}export default {  key: "multi_lang",  content: {    welcomeMessage: t({      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, możesz skonfigurować akceptowane lokalizacje w pliku intlayer.config.ts. Ta konfiguracja pozwala zdefiniować języki, które Twoja aplikacja obsługuje:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;

Używanie tłumaczeń w komponentach React

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

**/*.tsx

Kopiuj kod

Skopiuj kod do schowka

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;

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;

Ten komponent pobiera odpowiednie tłumaczenie na podstawie aktualnie ustawionego języka w Twojej aplikacji.

Niestandardowe obiekty treści

intlayer obsługuje niestandardowe obiekty treści do tłumaczenia, co pozwala na definiowanie bardziej złożonych struktur przy jednoczesnym zapewnieniu bezpieczeństwa typów. Oto przykład z niestandardowym obiektem:

**/*.content.ts

Kopiuj kod

Skopiuj kod do schowka

import { t, type Dictionary } from "intlayer";interface ICustomContent {  title: string;  content: string;}const customContent = {  key: "custom_content",  content: {    profileText: t<ICustomContent>({      en: {        title: "Page Title",        content: "Page Content",      },      fr: {        title: "Titre de la Page",        content: "Contenu de la Page",      },      es: {        title: "Título de la Página",        content: "Contenido de la Página",      },    }),  },} satisfies Dictionary;export default customContent;

import { t, type Dictionary } from "intlayer";interface ICustomContent {  title: string;  content: string;}const customContent = {  key: "custom_content",  content: {    profileText: t<ICustomContent>({      en: {        title: "Page Title",        content: "Page Content",      },      fr: {        title: "Titre de la Page",        content: "Contenu de la Page",      },      es: {        title: "Título de la Página",        content: "Contenido de la Página",      },    }),  },} satisfies Dictionary;export default customContent;

Deklaracja zawartości

Wyliczenie