Intlayer에서 /[locale]/ 경로 대신 도메인 기반 라우팅을 어떻게 구성하나요?

간단한 답변

도메인 기반 라우팅은 경로 기반 라우팅(example.com/[locale]/)보다 더 간단합니다. 모든 미들웨어와 라우팅 구성을 건너뛸 수 있기 때문입니다. 각 언어 도메인에 앱을 배포하고 도메인별로 환경 변수를 하나씩 설정하기만 하면 됩니다.

단계별 안내

도메인별로 한 번씩 배포 (example.com, exemple.fr, ejemplo.es, …).
각 배포마다 LOCALE (및 일반적인 Intlayer 환경 변수들)을 해당 도메인이 제공할 로케일로 설정합니다.
intlayer.config.[ts|js]에서 해당 변수를 defaultLocale로 참조합니다.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 도메인이 로케일을 결정합니다  },  // ... 나머지 구성};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: process.env.LOCALE, // 👈 도메인이 로케일을 결정합니다  },  // ... 나머지 구성};export default config;

이게 전부입니다-Next.js, Vite + React, Vite + Vue 등에서도 동일하게 작동합니다.

모든 도메인이 같은 배포본을 가리킨다면 어떻게 하나요?

모든 도메인이 동일한 애플리케이션 번들을 가리키는 경우, 런타임에 호스트를 감지하고 프로바이더를 통해 로케일을 수동으로 전달해야 합니다.

Next.js용

// src/IntlayerProvider.tsximport {  IntlayerClientProvider,  type IntlayerClientProviderProps,} from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";import type { FC } from "react";export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({  children,  locale,}) => {  const resolvedLocale = locale ?? getLocaleFromHostname(); // 호스트명에서 로케일을 가져오는 함수 사용  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

// src/IntlayerProvider.tsximport {  IntlayerClientProvider,  type IntlayerClientProviderProps,} from "next-intlayer";import { IntlayerServerProvider } from "next-intlayer/server";import type { FC } from "react";export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({  children,  locale,}) => {  const resolvedLocale = locale ?? getLocaleFromHostname(); // 호스트명에서 로케일을 가져오는 함수 사용  return (    <IntlayerServerProvider locale={resolvedLocale}>      <IntlayerClientProvider locale={resolvedLocale}>        {children}      </IntlayerClientProvider>    </IntlayerServerProvider>  );};

Vue용

import { createApp } from "vue";import { installIntlayer } from "vue-intlayer";import App from "./App.vue";import { router } from "./routes";const app = createApp(App);app.use(router);installIntlayer(app, getLocaleFromHostname()); // 호스트명에서 로케일을 가져오는 함수로 대체하세요.app.mount("#app");

import { createApp } from "vue";import { installIntlayer } from "vue-intlayer";import App from "./App.vue";import { router } from "./routes";const app = createApp(App);app.use(router);installIntlayer(app, getLocaleFromHostname()); // 호스트명에서 로케일을 가져오는 함수로 대체하세요.app.mount("#app");

getLocaleFromHostname()를 자신의 조회 로직으로 교체하세요.

로케일 스위처 업데이트

도메인 기반 라우팅을 사용할 때, 언어를 변경하면 다른 도메인으로 이동하게 됩니다:

const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 대상 로케일에 맞는 도메인으로 이동}

const { locale } = useLocale();function changeLanguage(target: Locale) {  window.location.href = domainForLocale[target]; // 대상 로케일에 맞는 도메인으로 이동}

도메인 기반 라우팅의 장점

더 간단한 구성: intlayerProxy, generateStaticParams, react-router 또는 vue-router를 구성할 필요가 없습니다.
더 나은 SEO: 각 언어마다 고유한 도메인을 가집니다
더 깔끔한 URL: 경로에 로케일 접두사가 없습니다
더 쉬운 유지보수: 각 언어별 배포가 독립적입니다