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í.

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', inserta 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' | '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.
localesAceptadoscadena[]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.
dominiosArray<{domain, defaultLocale}>Mapa de enrutamiento opcional del dominio.
localeParamNamecadenaParámetro de segmento de configuración regional de App Router. El valor predeterminado es lang.
persistLocaleCookieboolean | ((request) => boolean)Política de persistencia de cookies de configuración regional para cambios de configuración regional del servidor y del 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 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.

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()

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.

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.

Referencia de Next.js