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í.
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.
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ón | Tipo | Notas |
|---|---|---|
apiKey | cadena | Requerido. |
baseLocale | cadena | Configuració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. |
localesAceptados | cadena[] | 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. |
dominios | Array<{domain, defaultLocale}> | Mapa opcional de enrutamiento de dominio. |
localeParamName | cadena | Parámetro de segmento de configuración regional de App Router. El valor predeterminado es lang. |
persistLocaleCookie | boolean | ((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. |
cacheTtl | número | TTL de caché para solicitudes de adaptador. |
fetcher | typeof fetch | Implementació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.
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.
Link
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.