Penulis:
    Aymeric PINEAU
    Dibuat:2025-08-23Terakhir diperbarui:2025-08-23

    Terjemahan

    Mendefinisikan Terjemahan

    Fungsi t dalam intlayer memungkinkan Anda untuk mendeklarasikan konten dalam berbagai bahasa. Fungsi ini memastikan keamanan tipe, memberikan error jika ada terjemahan yang hilang, yang sangat berguna dalam lingkungan TypeScript.

    Berikut adalah contoh cara mendeklarasikan konten dengan terjemahan.

    **/*.content.ts
    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>;

    Konfigurasi untuk Lokal

    Untuk memastikan penanganan terjemahan yang tepat, Anda dapat mengonfigurasi lokal yang diterima di intlayer.config.ts. Konfigurasi ini memungkinkan Anda untuk menentukan bahasa yang didukung oleh aplikasi Anda:

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

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

export default config;

    Menggunakan Terjemahan dalam Komponen React

    With react-intlayer, you can use translations in React components. Here's an example:

    **/*.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;

    This component fetches the corresponding translation based on the current locale set in your application.

    With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

    **/*.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;

    With vue-intlayer, you can use translations in Vue components. Here's an example:

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

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

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

    With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

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

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

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

    With preact-intlayer, you can use translations in Preact components. Here's an example:

    **/*.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;

    With solid-intlayer, you can use translations in SolidJS components. Here's an example:

    **/*.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;

    With angular-intlayer, you can use translations in Angular components. Here's an example:

    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");
}

    With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

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

installIntlayer();

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

// Initial render
document.getElementById("welcome-message")!.textContent = String(
  content.welcomeMessage
);
    Deklarasi kontenPlural