Référence Next.js
18ways.config.*
Créez 18ways.config.ts, 18ways.config.js ou 18ways.config.cjs à la racine de votre application, puis exportez
your 18ways config there.
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()
Importez depuis @18ways/next/config et appelez-le depuis next.config.js.
import { withWays } from '@18ways/next/config';Lorsque 18ways.config.* existe, withWays() le charge automatiquement. Pour router: 'path', il
renvoie la configuration i18n native de Next avec la détection de la langue désactivée. Pour router: 'app' et
router: 'none', il injecte l’alias nécessaire pour les imports directs depuis @18ways/next/server.
Options courantes :
| Option | Type | Remarques |
|---|---|---|
apiKey | chaîne | Requis. |
baseLocale | chaîne | Paramètre régional source et paramètre régional par défaut pour le routage. |
routeur | 'app' | 'path' | 'none' | Mode de routage localisé. Utilisez none lorsqu’un autre routeur gère déjà les URL de langue. |
localesAcceptés | tableau de chaînes | Liste explicite des paramètres régionaux. Obligatoire pour path, facultatif sinon. Gardez le mode path synchronisé avec les langues activées dans votre tableau de bord 18ways. |
domaines | Array<{domain, defaultLocale}> | Carte de routage de domaine facultative. |
localeParamName | chaîne | Paramètre de segment de locale d’App Router. Par défaut : lang. |
persistLocaleCookie | booléen | ((demande) => booléen) | Politique de persistance des cookies de langue pour les changements de langue du serveur et du client. |
cacheTtl | nombre | Durée de vie du cache pour les requêtes de l'adaptateur. |
fetcher | typeof fetch | Implémentation de récupération personnalisée. |
init(config)
Importer depuis @18ways/next/server.
Utilisez-le lorsque vous souhaitez lier explicitement un objet de configuration.
WaysRoot
Importez WaysRoot directement depuis @18ways/next/server dans vos layouts après avoir entouré
next.config.js avec withWays(...).
Utilisez WaysRoot dans votre mise en page afin que l’adaptateur puisse initialiser l’état d’exécution pour la requête en cours.
Avec le routage localisé d’App Router, cela signifie généralement app/[lang]/layout.tsx.
getLocale()
Résolvez la locale actuelle sur le serveur. C’est l’assistant à utiliser lorsque vous avez besoin de l’état de la locale
en dehors de WaysRoot, par exemple dans des assistants SEO réservés au serveur ou dans d’autres code serveur liés à la requête.
htmlAttrs()
htmlAttrs() résout les valeurs actuelles de lang et dir pour l'élément document.
generateWaysMetadata()
Utilisez generateWaysMetadata() à l'intérieur de generateMetadata() lorsque vous souhaitez des titres traduits,
descriptions et des URL canoniques ou alternatives sensibles à la locale.
proxy.ts
Pour router: 'app', proxy.ts est le point d’entrée recommandé pour les redirections de locale au moment de la requête.
Réexportez depuis @18ways/next/proxy pour gérer / -> /{locale} et la canonicalisation du domaine.
export { default, config } from '@18ways/next/proxy';Si vous avez déjà votre propre fichier de projet proxy.ts ou middleware.ts, utilisez
getWaysProxyResponse(request) et renvoyez-le avant le reste de votre logique.
Aides pour les clients
Importer depuis @18ways/next/client.
useLocale()
Lisez et changez la locale actuelle. C'est le hook que vous associez avec LanguageSwitcher ou votre propre interface utilisateur de sélecteur personnalisée.
useRouter()
Wrapper sensible à la locale autour de la navigation Next. Passez locale="fr-FR" pour forcer une cible localisée ou
locale={false} pour forcer une cible non localisée.
Link
Wrapper tenant compte de la locale autour de next/link, avec le même modèle de surcharge que useRouter().
useUnlocalizedPathname()
Lisez le chemin d'accès actuel sans le préfixe de locale.
useLocalizedHref()
Assistant de bas niveau pour convertir un href interne en href tenant compte de la locale actuelle.
Path routing config
En mode router: 'app', l’adaptateur suit votre arbre de routes :
- les routes sous
app/[lang]/...sont localisées - les itinéraires en dehors de ce segment restent non localisés
Lien, useRouter() et setLocale() traitent les routes internes comme localisées par défaut. Utilisez
locale={false} uniquement lorsque vous devez cibler explicitement une route non localisée.