---
createdAt: 2025-05-20
updatedAt: 2025-06-29
title: Jak skonfigurować routing oparty na domenach?
description: Dowiedz się, jak skonfigurować routing oparty na domenach.
keywords:
  - domena
  - routing
  - intlayer
  - konfiguracja
  - middleware
  - react-router
  - vue-router
  - next.js
  - vite
  - framework
slugs:
  - frequent-questions
  - domain-routing
---

# Jak skonfigurować **routing oparty na domenach** w Intlayer zamiast ścieżek `/[locale]/`?

## Krótka odpowiedź

Routing oparty na domenach jest prostszy niż routing oparty na ścieżkach (`example.com/[locale]/`), ponieważ można pominąć całą konfigurację middleware i routingu. Wystarczy wdrożyć aplikację na każdej domenie językowej i ustawić jedną zmienną środowiskową na domenę.

## Krok po kroku

1. **Wdroż aplikację raz na domenę** (`example.com`, `exemple.fr`, `ejemplo.es`, …).
2. Dla każdego wdrożenia ustaw `LOCALE` (oraz standardowe zmienne środowiskowe Intlayer) na lokalizację, którą dana domena ma obsługiwać.
3. Odwołaj się do tej zmiennej jako `defaultLocale` w swoim pliku `intlayer.config.[ts|js]`.

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: process.env.LOCALE, // 👈 domena decyduje o lokalizacji
  },
  // ... reszta twojej konfiguracji
};

export default config;
```

To wszystko — działa tak samo dla **Next.js**, **Vite + React**, **Vite + Vue** itd.

## Co jeśli każda domena trafia do **tego samego** wdrożenia?

Jeśli wszystkie domeny wskazują na ten sam pakiet aplikacji, musisz wykryć hosta w czasie wykonywania i ręcznie przekazać lokalizację przez providera.

### Dla Next.js

```tsx
// src/IntlayerProvider.tsx
import {
  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(); // 👈 rozwiąż lokalizację na podstawie hosta
  return (
    <IntlayerServerProvider locale={resolvedLocale}>
      <IntlayerClientProvider locale={resolvedLocale}>
        {children}
      </IntlayerClientProvider>
    </IntlayerServerProvider>
  );
};
```

### Dla Vue

```ts
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()); // 👈 zainstaluj Intlayer z lokalizacją na podstawie hosta
app.mount("#app");
```

Zamień `getLocaleFromHostname()` na własną logikę wyszukiwania.

## Zaktualizuj swój przełącznik lokalizacji

Przy routingu opartym na domenach, zmiana języka oznacza przejście na inną domenę:

```ts
const { locale } = useLocale();

function changeLanguage(target: Locale) {
  window.location.href = domainForLocale[target]; // 👈 przekieruj do domeny odpowiadającej wybranej lokalizacji
}
```

## Zalety routingu opartego na domenach

1. **Prostsza konfiguracja**: Nie ma potrzeby konfigurowania `intlayerMiddleware`, `generateStaticParams`, `react-router` ani `vue-router`
2. **Lepsze SEO**: Każdy język ma własną domenę
3. **Czystsze adresy URL**: Brak prefiksu lokalizacji w ścieżce
4. **Łatwiejsza konserwacja**: Każde wdrożenie języka jest niezależne
