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용

tsx

코드 복사

코드를 클립보드에 복사

// 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: 경로에 로케일 접두사가 없습니다
더 쉬운 유지보수: 각 언어별 배포가 독립적입니다