Referencia de Next.js
18ways.config.*
Crea 18ways.config.ts, 18ways.config.js o 18ways.config.cjs en la raíz de tu aplicación y exporta
tu configuración de 18ways allí.
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', inserta 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' | 'ruta' | 'ninguno' | Modo de enrutamiento por configuración regional. Use none cuando otro enrutador ya sea el propietario de las URL de configuración regional. |
localesAceptados | cadena[] | Lista explícita de configuraciones regionales. Obligatorio para path, opcional en otro caso. Mantén el modo path sincronizado con los idiomas habilitados en tu panel de control de 18ways. |
dominios | Array<{domain, defaultLocale}> | Mapa de enrutamiento opcional del dominio. |
localeParamName | cadena | Parámetro de segmento de configuración regional de App Router. El valor predeterminado es lang. |
persistLocaleCookie | boolean | ((request) => boolean) | Política de persistencia de cookies de configuración regional para cambios de configuración regional del servidor y del 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 enlazar explícitamente un objeto de configuración.
WaysRoot
Importa WaysRoot directamente desde @18ways/next/server en tus diseños 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 locale de App Router, esto suele significar app/[lang]/layout.tsx.
getLocale()
Resuelve la configuración regional actual en el servidor. Esta es la utilidad que hay que usar cuando necesitas el estado de configuración regional
fuera de WaysRoot, por ejemplo en utilidades SEO exclusivas del 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()
Utiliza generateWaysMetadata() dentro de generateMetadata() cuando desees títulos traducidos,
descripciones y URLs canónicas o alternativas que tengan en cuenta la configuración regional.
proxy.ts
Para router: 'app', proxy.ts es el punto de entrada prescriptivo para redirecciones de configuración regional en tiempo de solicitud.
Reexporta desde @18ways/next/proxy para gestionar / -> /{locale} y la canonización de dominios.
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()
Envoltorio sensible a la configuración regional alrededor de la navegación de Next. Pasa locale="fr-FR" para forzar un destino localizado o
locale={false} para forzar uno no localizado.
Link
Contenedor adaptado a la 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 bajo nivel para convertir un href interno en el href actual adaptado a la configuración regional.
Path routing config
En modo router: 'app', el adaptador sigue tu árbol de rutas:
- las rutas bajo
app/[lang]/...están localizadas - las rutas fuera de ese segmento siguen sin localizarse
Link, useRouter() y setLocale() tratan las rutas internas como localizadas por defecto. Usa
locale={false} solo cuando necesites dirigir explícitamente una ruta sin localizar.