| createdAt | 2025-09-09 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| updatedAt | 2026-05-31 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| title | TanStack Start i18n - Повний посібник з перекладу вашого застосунку | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| description | Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку TanStack Start. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| keywords |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| slugs |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| applicationTemplate | https://github.com/aymericzip/intlayer-tanstack-start-template | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| applicationShowcase | https://intlayer-tanstack-start-template.vercel.app | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| youtubeVideo | https://www.youtube.com/watch?v=_XTdKVWaeqg | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| history |
|
Цей посібник демонструє, як інтегрувати Intlayer для плавної інтернаціоналізації в проєктах Tanstack Start з маршрутизацією, що враховує локаль, підтримкою TypeScript та сучасними практиками розробки.
Порівняно з основними рішеннями, такими як react-i18next або use-intl або paraglide, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
Intlayer повністю оптимізовано для TanStack Start, забезпечуючи багатомовну маршрутизацію, керування файлами cookie, генерацію карти сайту, динамічне завантаження вмісту та всі функції, необхідні для масштабування ваших зусиль з інтернаціоналізації (i18n).
Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає зменшити розмір бандлу і сторінок до 50%.
Організація вмісту за окремими областями (scoping) полегшує технічне обслуговування великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer повністю типізований (fully typed), щоб забезпечити точність вашого вмісту.
Спільне розміщення вмісту зменшує контекст, необхідний для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад CLI для перевірки відсутніх перекладів,LSP, MCP і навички агента, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує компілятор для автоматизації екстракція вмісту, а також веб-платформу, щоб допомогти перекладати у фоновому режимі.
Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
Більше ніж просто рішення i18n, Intlayer пропонує власний візуальний редактор і повний CMS, щоб допомогти вам керувати своїм багатомовним вмістом у реальному часі, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
<iframe title="Найкраще i18n-рішення для Tanstack Start? Дізнайтеся про Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/_XTdKVWaeqg?autoplay=0&origin=https://intlayer.org&controls=0&rel=1"/> <iframe src="https://ide.intlayer.org/aymericzip/intlayer-tanstack-start-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="Демо CodeSandbox, як інтернаціоналізувати ваш додаток за допомогою Intlayer" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy" /> <iframe src="https://intlayer-tanstack-start-template.vercel.app" 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="Демо - intlayer-tanstack-start-template" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy" />
Перегляньте Шаблон додатка на GitHub.
Почніть зі створення нового проєкту TanStack Start, дотримуючись інструкції Створення нового проєкту на сайті TanStack Start.
Встановіть необхідні пакети, використовуючи обраний менеджер пакетів:
npm install intlayer react-intlayer
npm install vite-intlayer --save-dev
npx intlayer initpnpm add intlayer react-intlayer
pnpm add vite-intlayer --save-dev
pnpm intlayer inityarn add intlayer react-intlayer
yarn add vite-intlayer --save-dev
yarn intlayer initbun add intlayer react-intlayer
bun add vite-intlayer --dev
bun x intlayer init-
intlayer
Основний пакет, який надає інструменти інтернаціоналізації для керування конфігурацією, перекладу, оголошення контенту, транспіляції та команд CLI.
-
react-intlayer Пакет, який інтегрує Intlayer із React-застосунком. Надає провайдери контексту та хуки для інтернаціоналізації в React.
-
vite-intlayer Містить плагін Vite для інтеграції Intlayer з бандлером Vite, а також middleware для визначення пріоритетної локалі користувача, керування cookie та обробки перенаправлень URL.
Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
import type { IntlayerConfig } from "intlayer";
import { Locales } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
defaultLocale: Locales.ENGLISH,
locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
},
};
export default config;За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, імена cookie, розташування та розширення декларацій контенту, вимкнути логування Intlayer у консолі та інше. Для повного переліку доступних параметрів див. документацію з конфігурації.
Додайте плагін intlayer до вашої конфігурації:
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";
const config = defineConfig({
plugins: [
nitro(),
intlayer(),
tanstackStart({
router: {
routeFileIgnorePattern:
".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
},
}),
viteReact(),
],
});
export default config;Плагін Vite
intlayer()використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у Vite-застосунку. Додатково він надає аліаси для оптимізації продуктивності.
Налаштуйте кореневий layout для підтримки інтернаціоналізації, використовуючи useParams для визначення поточної локалі та встановлення атрибутів lang і dir на тезі html.
import {
createRootRouteWithContext,
HeadContent,
Scripts,
} from "@tanstack/react-router";
import { defaultLocale, getHTMLTextDir } from "intlayer";
import { type ReactNode } from "react";
import { IntlayerProvider } from "react-intlayer";
import { Route as LocaleRoute } from "./{-$locale}/route";
export const Route = createRootRouteWithContext<{}>()({
head: () => ({
meta: [
{
charSet: "utf-8",
},
{
content: "width=device-width, initial-scale=1",
name: "viewport",
},
{
title: "TanStack Start Starter",
},
],
}),
shellComponent: RootDocument,
});
function RootDocument({ children }: { children: ReactNode }) {
const params = LocaleRoute.useParams();
const locale = params?.locale ?? defaultLocale;
return (
<html dir={getHTMLTextDir(locale)} lang={locale}>
<head>
<HeadContent />
</head>
<body>
<IntlayerProvider locale={locale}>{children}</IntlayerProvider>
<Scripts />
</body>
</html>
);
}Якщо ви хочете використовувати свій вміст в атрибуті типу
string, наприкладalt,title,href,aria-labelтощо, ви повинні викликати значення функції, наприклад:
<img src="{content.image.src.value}" alt="{content.image.value}" /> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" /> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
Створіть layout, який обробляє префікс локалі та виконує валідацію.
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { validatePrefix } from "intlayer";
export const Route = createFileRoute("/{-$locale}")({
beforeLoad: ({ params }) => {
const localeParam = params.locale;
// Валідація префіксу локалі
const { isValid, localePrefix } = validatePrefix(localeParam);
if (!isValid) {
throw redirect({
to: "/{-$locale}/404",
params: { locale: localePrefix },
});
}
},
component: Outlet,
});Тут
{-$locale}, динамічний параметр маршруту, який підставляється поточним локалем. Ця нотація робить слот необов'язковим, що дозволяє використовувати його з режимами маршрутизації, такими як'prefix-no-default'тощо.
Зауважте, що цей слот може викликати проблеми, якщо ви використовуєте кілька динамічних сегментів в одному маршруті (наприклад,
/{-$locale}/other-path/$anotherDynamicPath/...). У режимі'prefix-all'можливо краще змінити слот на$locale. У режимах'no-prefix'або'search-params'ви можете повністю видалити слот.
Створюйте й керуйте деклараціями контенту для зберігання перекладів:
import type { Dictionary } from "intlayer";
import { t } from "intlayer";
const appContent = {
content: {
links: {
about: t({
en: "About",
es: "Acerca de",
fr: "À propos",
}),
home: t({
en: "Home",
es: "Inicio",
fr: "Accueil",
}),
},
meta: {
title: t({
en: "Welcome to Intlayer + TanStack Router",
es: "Bienvenido a Intlayer + TanStack Router",
fr: "Bienvenue à Intlayer + TanStack Router",
}),
description: t({
en: "This is an example of using Intlayer with TanStack Router",
es: "Este es un ejemplo de uso de Intlayer con TanStack Router",
fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",
}),
},
},
key: "app",
} satisfies Dictionary;
export default appContent;Оголошення вмісту можна визначати будь-де у вашому застосунку, за умови, що вони включені у директорію
contentDir(за замовчуванням,./app) та відповідають розширенню файлу декларації вмісту (за замовчуванням,.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).
Для детальнішої інформації зверніться до документації з оголошення вмісту.
Створіть компонент LocalizedLink для навігації з урахуванням локалі:
import type { FC } from "react";
import { Link, type LinkComponentProps } from "@tanstack/react-router";
import { useLocale } from "react-intlayer";
import { getPrefix } from "intlayer";
export const LOCALE_ROUTE = "{-$locale}" as const;
export type To = StripLocalePrefix<LinkComponentProps["to"]>;
export type StripLocalePrefix<T extends string | undefined> = T extends
| `/${typeof LOCALE_ROUTE}/`
| `/${typeof LOCALE_ROUTE}`
? "/"
: T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
? `/${Rest}`
: T;
type LocalizedLinkProps = {
to?: To;
} & Omit<LinkComponentProps, "to">;
export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
const { locale } = useLocale();
const { localePrefix } = getPrefix(locale);
return (
<Link
{...props}
params={{
locale: localePrefix,
...(typeof props?.params === "object" ? props?.params : {}),
}}
to={`/${LOCALE_ROUTE}${props.to}` as LinkComponentProps["to"]}
/>
);
};Цей компонент має дві цілі:
- Видалити непотрібний префікс
{-$locale}з URL. - Вставити параметр локалі в URL, щоб користувач був безпосередньо перенаправлений на локалізований маршрут.
Потім ми можемо створити хук useLocalizedNavigate для програмної навігації:
import { useNavigate } from "@tanstack/react-router";
import { getPrefix } from "intlayer";
import { useLocale } from "react-intlayer";
import type { StripLocalePrefix } from "@/components/localized-link";
import type { FileRouteTypes } from "@/routeTree.gen";
type NavigateFn = ReturnType<typeof useNavigate>;
type BaseNavigateOptions = Parameters<NavigateFn>[0];
type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
export type LocalizedNavigateOptions = Omit<
BaseNavigateOptions,
"to" | "params"
> & {
to: LocalizedTo;
params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;
};
type LocalizedNavigate = (
options: LocalizedNavigateOptions
) => ReturnType<NavigateFn>;
export const useLocalizedNavigate = () => {
const navigate = useNavigate();
const { locale } = useLocale();
const localizedNavigate: LocalizedNavigate = (args: any) => {
const { localePrefix } = getPrefix(locale);
if (typeof args === "string") {
return navigate({
to: `/${LOCALE_ROUTE}${args}`,
params: { locale: localePrefix },
});
}
const { to, ...rest } = args;
const localizedTo = `/${LOCALE_ROUTE}${to}` as any;
return navigate({
to: localizedTo,
params: { locale: localePrefix, ...rest } as any,
});
};
return localizedNavigate;
};Отримуйте доступ до словників контенту по всьому застосунку:
import { createFileRoute } from "@tanstack/react-router";
import { getIntlayer } from "intlayer";
import { useIntlayer } from "react-intlayer";
import LocaleSwitcher from "@/components/locale-switcher";
import { LocalizedLink } from "@/components/localized-link";
import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
export const Route = createFileRoute("/{-$locale}/")({
component: RouteComponent,
});
function RouteComponent() {
const content = useIntlayer("app");
const navigate = useLocalizedNavigate();
return (
<div>
<div>
{content.title}
<LocaleSwitcher />
<div>
<LocalizedLink to="/">{content.links.home}</LocalizedLink>
<LocalizedLink to="/about">{content.links.about}</LocalizedLink>
</div>
<div>
<button onClick={() => navigate({ to: "/" })}>
{content.links.home}
</button>
<button onClick={() => navigate({ to: "/about" })}>
{content.links.about}
</button>
</div>
</div>
</div>
);
}Щоб дізнатися більше про хук
useIntlayer, зверніться до документації.
Створіть компонент, щоб дозволити користувачам змінювати мову:
import { useLocation } from "@tanstack/react-router";
import {
getHTMLTextDir,
getLocaleName,
getPathWithoutLocale,
getPrefix,
Locales,
} from "intlayer";
import type { FC } from "react";
import { useLocale } from "react-intlayer";
import { LocalizedLink, type To } from "./localized-link";
export const LocaleSwitcher: FC = () => {
const { pathname } = useLocation();
const { availableLocales, locale, setLocale } = useLocale();
const pathWithoutLocale = getPathWithoutLocale(pathname);
return (
<ol>
{availableLocales.map((localeEl) => (
<li key={localeEl}>
<LocalizedLink
aria-current={localeEl === locale ? "page" : undefined}
onClick={() => setLocale(localeEl)}
params={{ locale: getPrefix(localeEl).localePrefix }}
to={pathWithoutLocale as To}
>
<span>
{/* Локаль, наприклад FR */}
{localeEl}
</span>
<span>
{/* Назва мови у власній локалі, наприклад Français */}
{getLocaleName(localeEl, locale)}
</span>
<span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
{/* Мова в поточній локалі, наприклад «Francés», коли поточна локаль встановлена як Locales.SPANISH */}
{getLocaleName(localeEl)}
</span>
<span dir="ltr" lang={Locales.ENGLISH}>
{/* Мова англійською, наприклад «French» */}
{getLocaleName(localeEl, Locales.ENGLISH)}
</span>
</LocalizedLink>
</li>
))}
</ol>
);
};Щоб дізнатися більше про хук
useLocale, зверніться до документації.
Як показано в Кроці 5, ви можете керувати атрибутами lang і dir тега html, використовуючи useParams у вашому кореневому компоненті. Це забезпечує правильне встановлення атрибутів на сервері та клієнті.
function RootDocument({ children }: { children: ReactNode }) {
const params = LocaleRoute.useParams();
const locale = params?.locale ?? defaultLocale;
return (
<html dir={getHTMLTextDir(locale)} lang={locale}>
{/* ... */}
</html>
);
}Ви також можете використовувати intlayerProxy для додавання маршрутизації на стороні сервера у вашому додатку. Цей плагін автоматично визначатиме поточну локаль на основі URL і встановлюватиме відповідний cookie з локаллю. Якщо локаль не вказана, плагін визначить найбільш підходящу локаль на основі мовних налаштувань браузера користувача. Якщо локаль не буде виявлена, відбудеться перенаправлення на локаль за замовчуванням.
Зверніть увагу, що щоб використовувати
intlayerProxyу production, потрібно перемістити пакетvite-intlayerзdevDependenciesдоdependencies.
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer, intlayerProxy } from "vite-intlayer";
export default defineConfig({
plugins: [
intlayerProxy(), // Проксі слід розміщувати перед сервером, якщо ви використовуєте Nitro
nitro(),
intlayer(),
tanstackStart({
router: {
routeFileIgnorePattern:
".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",
},
}),
viteReact(),
],
});Ви також можете використовувати хук getIntlayer, щоб отримувати ваші словники контенту по всьому застосунку:
import { createFileRoute } from "@tanstack/react-router";
import { getIntlayer } from "intlayer";
export const Route = createFileRoute("/{-$locale}/")({
component: RouteComponent,
head: ({ params }) => {
const { locale } = params;
const path = "/"; // The path for this route
const metaContent = getIntlayer("app", locale);
return {
links: [
// Canonical link: Points to the current localized page
{ rel: "canonical", href: getLocalizedUrl(path, locale) },
// Hreflang: Tell Google about all localized versions
...localeMap(({ locale: mapLocale }) => ({
rel: "alternate",
hrefLang: mapLocale,
href: getLocalizedUrl(path, mapLocale),
})),
// x-default: For users in unmatched languages
// Define the default fallback locale (usually your primary language)
{
rel: "alternate",
hrefLang: "x-default",
href: getLocalizedUrl(path, defaultLocale),
},
],
meta: [
{ title: metaContent.title },
{ name: "description", content: metaContent.meta.description },
],
};
},
});Можливо, ви захочете отримувати поточну локаль всередині серверних дій або API-ендпоїнтів.
Ви можете зробити це за допомогою хелпера getLocale з intlayer.
Ось приклад із використанням серверних функцій TanStack Start:
import { createServerFn } from "@tanstack/react-start";
import {
getRequestHeader,
getRequestHeaders,
} from "@tanstack/react-start/server";
import { getCookie, getIntlayer, getLocale } from "intlayer";
export const getLocaleServer = createServerFn().handler(async () => {
const locale = await getLocale({
// Отримати cookie з запиту (за замовчуванням: 'INTLAYER_LOCALE')
getCookie: (name) => {
const cookieString = getRequestHeader("cookie");
return getCookie(name, cookieString);
},
// Отримати заголовок з запиту (за замовчуванням: 'x-intlayer-locale')
// Резервне відпрацювання через узгодження Accept-Language
getHeader: (name) => getRequestHeader(name),
});
// Отримати певний контент за допомогою getIntlayer()
const content = getIntlayer("app", locale);
return { locale, content };
});Коли користувач переходить на неіснуючу сторінку, ви можете відобразити власну сторінку «не знайдено», і префікс локалі може впливати на те, як ця сторінка викликається.
У TanStack Router обробка сторінок 404 для локалізованих маршрутів вимагає багаторівневого підходу:
- Виділений маршрут 404: спеціальний маршрут для відображення інтерфейсу сторінки 404
- Валідація на рівні маршруту: перевіряє префікси локалі та перенаправляє некоректні на 404
- Catch-all route: Перехоплює будь-які невідповідні шляхи в межах сегмента локалі
import { createFileRoute } from "@tanstack/react-router";
// Це створює спеціальний маршрут /[locale]/404
// Використовується як прямий маршрут і імпортується як компонент в інших файлах
export const Route = createFileRoute("/{-$locale}/404")({
component: NotFoundComponent,
});
// Експортується окремо, щоб його можна було повторно використовувати в notFoundComponent та catch-all маршрутах
export function NotFoundComponent() {
return (
<div>
<h1>404</h1>
</div>
);
}import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
import { validatePrefix } from "intlayer";
import { NotFoundComponent } from "./404";
export const Route = createFileRoute("/{-$locale}")({
// beforeLoad виконується перед відображенням маршруту (як на сервері, так і на клієнті)
// Це ідеальне місце для валідації префіксу локалі
beforeLoad: ({ params }) => {
const localeParam = params.locale;
// validatePrefix перевіряє, чи дійсна локаль згідно з вашою конфігурацією intlayer
const { isValid, localePrefix } = validatePrefix(localeParam);
if (!isValid) {
// Неприпустимий префікс локалі - перенаправити на сторінку 404 з дійсним префіксом локалі
throw redirect({
to: "/{-$locale}/404",
params: { locale: localePrefix },
});
}
},
component: Outlet,
// notFoundComponent викликається, коли дочірній маршрут не існує
// наприклад, /en/non-existent-page спричиняє це в межах layout для /en
notFoundComponent: NotFoundComponent,
});import { createFileRoute } from "@tanstack/react-router";
import { NotFoundComponent } from "./404";
// Маркер $ (splat/catch-all) маршрут відповідає будь-якому шляху, який не відповідає іншим маршрутам
// наприклад, /en/some/deeply/nested/invalid/path
// Це гарантує, що ВСІ невідповідні шляхи всередині локалі показуватимуть сторінку 404
// Без цього, невідповідні глибокі шляхи можуть показувати порожню сторінку або викликати помилку
export const Route = createFileRoute("/{-$locale}/$")({
component: NotFoundComponent,
});Intlayer використовує module augmentation, щоб отримати переваги TypeScript і зміцнити ваш codebase.
Переконайтеся, що ваша конфігурація TypeScript включає автогенеровані типи:
{
// ... ваші наявні конфігурації
include: [
// ... ваші наявні includes
".intlayer/**/*.ts", // Включає автогенеровані типи
],
}Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
Щоб спростити цей процес, Intlayer пропонує компілятор / екстрактор для перетворення ваших компонентів і витягування вмісту.
Щоб налаштувати його, ви можете додати розділ compiler у свій файл intlayer.config.ts:
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Інша частина вашої конфігурації
compiler: {
/**
* Вказує, чи повинен бути включений компілятор.
*/
enabled: true,
/**
* Визначає шлях до вихідних файлів
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Вказує, чи повинні компоненти зберігатися після перетворення. Таким чином, компілятор можна запустити лише один раз для перетворення програми, а потім видалити.
*/
saveComponents: false,
/**
* Префікс ключа словника
*/
dictionaryKeyPrefix: "",
},
};
export default config;Запустіть екстрактор для перетворення компонентів і витягування вмісту
npx intlayer extractpnpm intlayer extractyarn intlayer extractbun x intlayer extractОновіть свій vite.config.ts, щоб включити плагін intlayerCompiler:
import { defineConfig } from "vite";
import { intlayer, intlayerCompiler } from "vite-intlayer";
export default defineConfig({
plugins: [
intlayer(),
intlayerCompiler(), // Додає плагін компілятора
],
});npm run build # Або npm run devpnpm run build # Or pnpm run devyarn build # Or yarn devbun run build # Or bun run devРекомендується ігнорувати файли, згенеровані Intlayer. Це дозволить уникнути їх коміту в ваш Git-репозиторій.
Для цього ви можете додати наступні інструкції до файлу .gitignore:
# Ігнорувати файли, згенеровані Intlayer
.intlayer
Щоб покращити досвід розробки з Intlayer, ви можете встановити офіційне Intlayer VS Code Extension.
Встановити з VS Code Marketplace
Це розширення надає:
- Автозаповнення для ключів перекладу.
- Виявлення помилок у реальному часі для відсутніх перекладів.
- Вбудовані попередні перегляди перекладеного вмісту.
- Швидкі дії для простого створення та оновлення перекладів.
Для детальнішої інформації про використання розширення зверніться до документації Intlayer VS Code Extension.
Щоб піти далі, ви можете реалізувати візуальний редактор або винести свій вміст у зовнішню систему, використовуючи CMS.