Referencia de Next.js

18ways.config.*

Crea 18ways.config.ts, 18ways.config.js o 18ways.config.cjs en la raíz de tu app y exporta tu configuración de 18ways ahí.

ts
import type { WaysConfig } from '@18ways/next/config';
 
export default {
  apiKey: process.env.NEXT_PUBLIC_18WAYS_PUBLIC_API_KEY,
  baseLocale: 'en-GB',
  router: 'app', // 'app', 'path', or 'none' depending on if you use app router, path router, or if you don't want the router to sync with locale at all
} satisfies WaysConfig;

withWays()

Importa desde @18ways/next/config y llámalo desde next.config.js.

ts
import { withWays } from '@18ways/next/config';

Cuando existe 18ways.config.*, withWays() lo carga automáticamente. Para router: 'path', devuelve la configuración nativa de i18n de Next con la detección de locale desactivada. Para router: 'app' y router: 'none', inyecta el alias necesario para importaciones directas desde @18ways/next/server.

Opciones comunes:

OpciónTipoNotas
apiKeycadenaRequerido.
baseLocalecadenaConfiguración regional de origen y configuración regional predeterminada para el enrutamiento.
router'app' | 'path' | 'none'Modo de enrutamiento por configuración regional. Usa none cuando otro enrutador ya sea dueño de las URL de la configuración regional.
localesAceptadoscadena[]Lista explícita de configuraciones regionales. Requerida para path, opcional en otros casos. Mantén el modo path sincronizado con los idiomas habilitados en tu panel de control de 18ways.
dominiosArray<{domain, defaultLocale}>Mapa opcional de enrutamiento de dominio.
localeParamNamecadenaParámetro de segmento de configuración regional de App Router. El valor predeterminado es lang.
persistLocaleCookieboolean | ((solicitud) => boolean)Política de persistencia de cookies de configuración regional para cambios de configuración regional en el servidor y en el cliente.
cacheTtlnúmeroTTL de caché para solicitudes de adaptador.
fetchertypeof fetchImplementación de búsqueda personalizada.

init(config)

Importar de @18ways/next/server.

Úsalo cuando quieras vincular un objeto de configuración explícitamente.

WaysRoot

Importa WaysRoot directamente desde @18ways/next/server en tus layouts después de envolver next.config.js con withWays(...).

Usa WaysRoot en tu diseño para que el adaptador pueda inicializar el estado en tiempo de ejecución para la solicitud actual. Con el enrutamiento por configuración regional de App Router, esto normalmente significa app/[lang]/layout.tsx.

getLocale()

Resuelve la configuración regional actual en el servidor. Este es el auxiliar que debes usar cuando necesites el estado de configuración regional fuera de WaysRoot, por ejemplo en auxiliares de SEO solo para el servidor u otro código de servidor vinculado a la solicitud.

htmlAttrs()

htmlAttrs() resuelve los valores actuales de lang y dir para el elemento del documento.

generateWaysMetadata()

Usa generateWaysMetadata() dentro de generateMetadata() cuando desees títulos traducidos, descripciones y URLs canónicas o alternas que consideren la localidad.

proxy.ts

Para router: 'app', proxy.ts es el punto de entrada recomendado para redirecciones de configuración regional en tiempo de solicitud. Vuelve a exportar desde @18ways/next/proxy para manejar / -> /{locale} y la canonicalización del dominio.

ts
export { default, config } from '@18ways/next/proxy';

Si ya tienes tu propio proyecto proxy.ts o middleware.ts, usa getWaysProxyResponse(request) y devuélvelo antes del resto de tu lógica.

Ayudantes del cliente

Importar desde @18ways/next/client.

useLocale()

Lee y cambia la configuración regional actual. Este es el gancho que emparejas con LanguageSwitcher o tu propio selector de interfaz de usuario personalizado.

useRouter()

Contenedor compatible con la configuración regional para la navegación de Next. Pasa locale="fr-FR" para forzar un destino localizado o locale={false} para forzar uno sin localización.

Contenedor con conciencia de configuración regional alrededor de next/link con el mismo modelo de anulación que useRouter().

useUnlocalizedPathname()

Lee la ruta actual sin el prefijo de localización.

useLocalizedHref()

Ayudante de nivel inferior para convertir un href interno en el href actual, teniendo en cuenta la configuración regional.

Path routing config

En el modo router: 'app', el adaptador sigue tu árbol de rutas:

  • las rutas bajo app/[lang]/... están localizadas
  • las rutas fuera de ese segmento permanecen sin localización

Link, useRouter() y setLocale() tratan las rutas internas como localizadas de forma predeterminada. Usa locale={false} solo cuando necesites apuntar explícitamente a una ruta no localizada.

Cambiando idioma
Referencia de Next.js