# i18next/next-i18next **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/i18next-next-i18next).** 6,158 stars · 767 forks · TypeScript · MIT ## Links - GitHub: https://github.com/i18next/next-i18next - Homepage: https://next.i18next.com - awesome-repositories: https://awesome-repositories.com/repository/i18next-next-i18next.md ## Topics `i18next` `next` `nextjs` `now` `react` `react-i18next` `reactjs` `ssr` ## Description next-i18next is an internationalization library that integrates the i18next ecosystem into Next.js applications, supporting both the App Router and Pages Router. It provides locale-aware routing middleware, server-component translation hydration, and a unified translation management system that works across server and client components. The library handles automatic language detection from browser cookies and HTTP Accept-Language headers, persists user language preferences across sessions, and rewrites URLs with locale prefixes for proper routing. It includes a translation hydration framework that serializes server-loaded translations into page HTML, enabling immediate client-side access without additional network requests. For mixed-router projects, it provides separate middleware and configuration paths that allow both routing systems to coexist. Translation resources can be loaded from local JSON files or external sources through any i18next backend plugin, including HTTP, Locize, or chained backends. The library supports client-side language switching without full page reloads and provides dedicated translation functions for both Server Components and Client Components. ## Tags ### Web Development - [Internationalization Frameworks](https://awesome-repositories.com/f/web-development/backend-development/web-frameworks/rendering-and-layout-architectures/server-side-rendering-frameworks/framework-integrations/next-js/internationalization-frameworks.md) — Provides the core i18n framework that adds locale detection, translation loading, and hydration to Next.js apps. - [Internationalization Libraries](https://awesome-repositories.com/f/web-development/next-js-development/internationalization-libraries.md) — Adds multi-language support to Next.js applications with locale detection, translation loading, and server-client hydration. - [Translation Hooks](https://awesome-repositories.com/f/web-development/client-side-components/translation-hooks.md) — Provides a useT() hook in Client Components that returns the t function for the current language and namespace. ([source](https://cdn.jsdelivr.net/gh/i18next/next-i18next@master/README.md)) - [Translation Hydrations](https://awesome-repositories.com/f/web-development/client-side-hydration/translation-hydrations.md) — Hydrates server-loaded translations into client-side state so localized text renders immediately without extra requests. - [Translation](https://awesome-repositories.com/f/web-development/hydration-frameworks/translation.md) — Serializes server-loaded translations into page HTML for immediate client-side access without additional network requests. - [Locale-Aware Routing Middleware](https://awesome-repositories.com/f/web-development/localized-routing/locale-aware-routing-middleware.md) — Rewrites URLs with locale prefixes and detects user language from cookies or Accept-Language headers. - [Localized URL Mapping](https://awesome-repositories.com/f/web-development/localized-url-mapping.md) — Rewrites incoming requests to prepend a locale segment to the URL path for language-specific routing. - [Translation Functions](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/server-components/translation-functions.md) — Provides a dedicated translation function for translating text directly inside async Server Components without client hydration. ([source](https://cdn.jsdelivr.net/gh/i18next/next-i18next@master/README.md)) - [Translation Hydration Utilities](https://awesome-repositories.com/f/web-development/server-side-hydration-utilities/translation-hydration-utilities.md) — Serializes server-loaded translations into a JSON payload embedded in page HTML for immediate client-side access. - [Mixed Router Internationalization Setups](https://awesome-repositories.com/f/web-development/next-js-app-router-integrations/mixed-router-internationalization-setups.md) — Supports both App Router and Pages Router in the same Next.js project with separate internationalization configurations. - [Next.js Mixed Router Compatibility Layers](https://awesome-repositories.com/f/web-development/next-js-pages-router-integrations/hybrid-page-routers/next-js-mixed-router-compatibility-layers.md) — Provides separate middleware and configuration paths for App Router and Pages Router, allowing both routing systems to coexist. - [Internationalization Integrations](https://awesome-repositories.com/f/web-development/next-js-pages-router-integrations/internationalization-integrations.md) — Integrates i18next with the Pages Router to handle translation routing, resource hydration, and locale management. ([source](https://next.i18next.com)) ### Development Tools & Productivity - [Server Component Translation Functions](https://awesome-repositories.com/f/development-tools-productivity/localization-support/locale-mappings/dynamic-interface-translations/dynamic-translation-functions/server-component-translation-functions.md) — Provides async getT() functions that load translation resources before rendering localized text in Server Components. ### Graphics & Multimedia - [Translation Hydrations](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/ui-component-rendering/client-component-hydrations/translation-hydrations.md) — Serializes server-loaded translations and passes them to the client-side provider for immediate access. ([source](https://cdn.jsdelivr.net/gh/i18next/next-i18next@master/README.md)) ### Networking & Communication - [Locale-Aware Routings](https://awesome-repositories.com/f/networking-communication/url-routing-configurations/locale-aware-routings.md) — Configures URL paths with language prefixes and automatically redirects users to the correct locale-based route. ### Security & Cryptography - [Language Preference Cookie Persistence](https://awesome-repositories.com/f/security-cryptography/session-cookie-handlers/language-preference-cookie-persistence.md) — Stores the user's selected language in a browser cookie and reads it on subsequent requests to maintain language preference across sessions. ### Software Engineering & Architecture - [Next.js Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/next-js-integrations.md) — Integrates multi-language support into Next.js, detecting user locale and serving translated content across components. - [i18next Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/next-js-integrations/i18next-integrations.md) — Connects the i18next ecosystem to Next.js, supporting both App Router and Pages Router with unified translation management. - [Translation Backend Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/plugin-architectures/local-plugin-implementations/local-plugin-discovery/local-plugin-development-servers/plugin-backend-servers/translation-backend-plugin-systems.md) — Loads translation files from remote APIs, CDNs, or custom backends using i18next plugins instead of local JSON files. - [Translation](https://awesome-repositories.com/f/software-engineering-architecture/plugin-architectures/translation.md) — Loads translation backends and formatters through a unified plugin system that extends the core i18next instance. ### User Interface & Experience - [Translation Tools](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/server-components/translation-tools.md) — Provides async translation functions for Server Components, loading resources before rendering localized text. - [Accept-Language Locale Settings](https://awesome-repositories.com/f/user-interface-experience/localization-settings/accept-language-locale-settings.md) — Parses the HTTP Accept-Language header on the server to determine the user's preferred language for initial page loads. - [Cookie and Header Language Detectors](https://awesome-repositories.com/f/user-interface-experience/localization-settings/accept-language-locale-settings/cookie-and-header-language-detectors.md) — Reads user language from a browser cookie or Accept-Language header and sets it for all subsequent translations. - [Automatic Language Detections](https://awesome-repositories.com/f/user-interface-experience/user-interface-language-selection/automatic-language-detections.md) — Automatically detects user language from cookies, Accept-Language headers, or fallback values for consistent translation. ([source](https://cdn.jsdelivr.net/gh/i18next/next-i18next@master/README.md)) - [URL-Driven Language Switching](https://awesome-repositories.com/f/user-interface-experience/localization-status-monitoring/locale-change-monitors/url-driven-language-switching.md) — Switches language by navigating to a new locale prefix in the URL or updating a cookie without a full page reload. ([source](https://cdn.jsdelivr.net/gh/i18next/next-i18next@master/README.md)) ### Artificial Intelligence & ML - [i18next Backend Plugin Integrations](https://awesome-repositories.com/f/artificial-intelligence-ml/translation-api-integrations/i18next-backend-plugin-integrations.md) — Loads translation files from remote APIs, CDNs, or custom backends using i18next plugins instead of local JSON files. ### Data & Databases - [Translation Namespace Loading](https://awesome-repositories.com/f/data-databases/on-load-data-fetchers/on-demand-subset-loading/translation-namespace-loading.md) — Supports any i18next backend plugin to fetch translation files from APIs, CDNs, or local storage on demand. ([source](https://cdn.jsdelivr.net/gh/i18next/next-i18next@master/README.md))