Next.js
Intégrez i1n à Next.js en utilisant next-intl ou directement le SDK i1n.
Configuration
Exécutez i1n init dans votre projet Next.js. L'interface CLI détecte automatiquement next-intl s'il est présent et configure le format JSON imbriqué dans votre répertoire locales/.
i1n fonctionne avec l'App Router et le Pages Router. Vous pouvez utiliser le SDK i1n en mode autonome ou le connecter à next-intl via le mode Bridge.
Mode autonome
Importez init et t depuis i1n, chargez vos ressources de traduction et utilisez t() directement dans vos composants. Le fichier i1n.d.ts généré automatiquement offre une sécurité de type complète et une auto-complétion dans l'IDE.
Cette approche remplace entièrement next-intl. Utilisez init() pour charger les ressources et setLocale() pour changer de langue. Aucune bibliothèque i18n supplémentaire n'est requise.
Mode Pont avec next-intl
Si votre projet utilise déjà next-intl, connectez-le à i1n avec une seule ligne : registerI1n((key, params) => nextIntlT(key, params)). Cela préserve votre configuration next-intl existante tout en ajoutant l'autocomplétion type-safe de i1n.
i1n gère les fichiers de traduction, la traduction par IA et la génération de types. next-intl continue de gérer le chargement à l'exécution, les composants serveur et le routage. Vous bénéficiez des avantages des deux systèmes sans aucun coût de migration.
Déploiement
Ajoutez i1n pull à votre étape de build ou à votre pipeline CI/CD pour vous assurer que les traductions sont toujours synchronisées avant le déploiement.
La génération statique (SSG) et le rendu côté serveur (SSR) de Next.js fonctionnent tous deux de manière transparente avec les fichiers de traduction gérés par i1n.
import { t } from 'i1n'
export default function HomePage() {
return (
<main>
<h1>{t('home.title')}</h1>
<p>{t('home.subtitle')}</p>
</main>
)
}import { registerI1n } from 'i1n'
import { useTranslations } from 'next-intl'
const t = useTranslations()
registerI1n((key, params) => t(key, params))