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.

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

Importez depuis @18ways/next/config et appelez-le depuis next.config.js.

ts
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 :

OptionTypeRemarques
apiKeychaîneRequis.
baseLocalechaîneParamè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éstableau de chaînesListe 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.
domainesArray<{domain, defaultLocale}>Carte de routage de domaine facultative.
localeParamNamechaîneParamètre de segment de locale d’App Router. Par défaut : lang.
persistLocaleCookiebooléen | ((demande) => booléen)Politique de persistance des cookies de langue pour les changements de langue du serveur et du client.
cacheTtlnombreDurée de vie du cache pour les requêtes de l'adaptateur.
fetchertypeof fetchImplé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.

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

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.

Changement de langue
Référence Next.js