작가:
    Aymeric PINEAU
    생성:2026-06-12마지막 업데이트:2026-06-12

    컬렉션

    컬렉션(Collection)은 동일한 사전 키(key)를 공유하지만 서로 다른 item 인덱스를 선언하는 콘텐츠 파일의 집합입니다. Intlayer는 빌드 시 이를 하나의 정렬된 목록으로 병합합니다.

    컬렉션 항목 선언

    각 파일은 하나의 항목을 나타냅니다. item 필드는 목록에서의 해당 위치입니다(1부터 시작).

    faq.1.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 1,
  content: {
    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
  },
} satisfies Dictionary;

export default dictionary;
    faq.2.content.ts
    import { t, type Dictionary } from "intlayer";

const dictionary = {
  key: "faq",
  item: 2,
  content: {
    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
  },
} satisfies Dictionary;

export default dictionary;

    컬렉션 소비하기

    모든 항목

    FAQ.tsx
    import { useIntlayer } from "react-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};
    FAQ.tsx
    import { useIntlayer } from "next-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};
    FAQ.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const items = useIntlayer("faq");
</script>

<template>
<ul>
  <li v-for="(item, index) in items" :key="index">
    <strong>{{ item.question }}</strong>
    <p>{{ item.answer }}</p>
  </li>
</ul>
</template>
    FAQ.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const items = useIntlayer("faq");
</script>

<ul>
{#each $items as item}
  <li>
    <strong>{item.question}</strong>
    <p>{item.answer}</p>
  </li>
{/each}
</ul>
    FAQ.tsx
    import { useIntlayer } from "preact-intlayer";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>
        <strong>{item.question}</strong>
        <p>{item.answer}</p>
      </li>
    ))}
  </ul>
);
};
    FAQ.tsx
    import { useIntlayer } from "solid-intlayer";
import { For } from "solid-js";

export const FAQ = () => {
const items = useIntlayer("faq"); // { question: string; answer: string }[]

return (
  <ul>
    <For each={items()}>
      {(item) => (
        <li>
          <strong>{item.question}</strong>
          <p>{item.answer}</p>
        </li>
      )}
    </For>
  </ul>
);
};
    faq.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-faq",
template: `
  <ul>
    @for (item of items(); track $index) {
      <li>
        <strong>{{ item.question }}</strong>
        <p>{{ item.answer }}</p>
      </li>
    }
  </ul>
`,
})
export class FAQComponent {
items = useIntlayer("faq");
}
    faq.js
    import { useIntlayer } from "vanilla-intlayer";

const faq = useIntlayer("faq");

faq.forEach((item) => {
console.log(item.question);
console.log(item.answer);
});

    인덱스로 단일 항목 가져오기

    tsx
    const faq2 = useIntlayer("faq", { item: 2 });
// → { question: string; answer: string }

    명시적 로케일로 단일 항목 가져오기

    tsx
    const faq2Ko = useIntlayer("faq", { item: 2, locale: "ko" });

    일반적인 사용 사례

    • FAQ 목록
    • 가격 책정 단계 / 요금제 목록
    • 캐러셀 / 슬라이더용 슬라이드 콘텐츠
    • 단계별 안내 지침
    로케일별 파일변형