Questions tagged [i18next]
The i18next library is an exceptional tool for comprehensive internationalization (i18n) in JavaScript, providing seamless translation capabilities to enhance your web application.
I'm currently facing difficulties in implementing localization for my nodeJS backend. Within my Angular frontend, I have a language-setting interceptor that successfully sets the language in the request header. You can refer to the image below which shows ...
Perhaps this is not the exact question you were expecting, but it did catch your attention :) The issue at hand revolves around the fact that most of the translations in my text do not update when the global language changes. Specifically, the translation ...
In the midst of working on a cutting-edge Next.js 13 project that utilizes the new /app folder routing, I am delving into the realm of setting up internationalization. Within my project's structure, it is organized as follows: https://i.stack.imgur.c ...
export async function getServerSideProps({ locale }) { const data = await serverSideTranslations(locale, ['apple', 'home']); return { props: data, }; } export default function IndexPage() { return <h1>Hi!</h1> } I have n ...
I'm currently facing a challenge in my project that involves translating content into 4 different languages. Despite watching numerous tutorials and attempting various solutions, I keep encountering the same issue. Within my application, there are man ...
I'm encountering challenges with integrating next-i18next into a Typescript NextJS project. There are very few recent examples available for reference. I have successfully set up internationalized routing, but I am facing difficulties in configuring i ...
I am looking to eliminate either the /en or the /it from the URL without explicitly adding it. i18next seems to be doing it automatically, and I am unsure how to disable this behavior. I simply want it to happen in the background. https://i.stack.imgur.co ...
After implementing i18next lib to localize my Next.js 14 app, everything seems to be working fine except for nesting translation. For example: {t("components.navbar.navbarlist.home")} Instead of displaying "Home," it shows as it is. Here is the snippet ...
I am facing an issue with my Next.js project using version v12.2.4 and implementing internationalization with i18next. The project supports two languages: Italian and English. Strangely, when I switch to English language, the app throws errors, while every ...
I'm new to this and feeling lost on how to tackle this issue. I tried following the instructions on https://github.com/i18next/next-i18next, but I'm struggling with index.js. When I toggle /de on my landing page, it translates correctly in the URL "http:// ...
After successfully migrating from react-router-dom to next.js, I encountered an issue with the internationalization of React-i18next. The file name was changed from i18n.js to next.config.js, but an error message 'Error: Text content does not match server- ...
Our team is embarking on creating a react web app using next.js, but we're facing a challenge with implementing multilanguage URLs. Our objective is to ensure that the same content in different languages has unique URL slugs. For instance, www.tld.com ...
As ngx-i18next serves as a wrapper for i18next, I am curious about the specific differences in translation capabilities between ngx-translate and i18next. ...
Currently, I am working on a Next.js 13 application that supports multiple languages and utilizes the next-intl package for internationalization. I have been attempting to configure translated URLs for my routes, but have encountered some challenges. For ...
Why isn't it working? I am attempting to shorten my translation path. Is there a way to do this without including the entire path ("root.chapter.key")? // json {"root": "chapter": { "key": "Some text" } } const { t } = useTranslation(&a ...
I am currently in the process of migrating my locales to a database. Our current setup involves using i18n with the following configuration: import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import { defaultLanguage, languagesR ...
I've configured the i18n middleware in my Express Node js server as follows: // server.js import i18nMiddleware from 'i18next-express-middleware'; import i18n from 'i18next'; import Backend from 'i18next-node-fs-backend'; import { LanguageDetector } from ' ...
I manage a website with multiple countries, each country having more than one locale. Below is the configuration from my next-i18next.config.js: module.exports = { i18n: { defaultLocale: 'en-eg', locales: ['en-br', 'en-eg', 'en-ke', 'pt-br', 'pt- ...
I am currently working on developing a multilanguage website using Next JS. For the translation functionality, I have integrated the next-translate package into my project. When it comes to generating posts, I have opted for static generation as my appro ...
I'm encountering difficulties with getting my website to function properly. It's a react + vite setup using the i18next.js library for text translation. The site is hosted on GitHub pages with a custom domain name. I keep seeing the error message ...
I've been working on a React project where I implemented i18next version 15.0.4 and react-i18next version 10.2.0 as dependencies. To handle internationalization, I created a module that initializes i18next with react-i18next and now I'm trying to write uni ...
In my Next.js application, I'm utilizing useSWR to fetch data on the client-side from an external API based on a specified language query parameter. To ensure the page loads initially, I retrieve data in a default language in getStaticProps and set it as f ...
Currently, I am utilizing ExpressJS and i18next. Within app.js var express = require('express') , i18n = require('i18next') , user = require('./routes/user') ... //internationalization i18n.init({ lng: 'en-US', saveMissing: true, debug: true }) ...
I am currently developing a Node.js app with support for multi-language functionality based on the URL query string. I have implemented the i18next module in my project. Below is a snippet from my main index.ts file: ... import i18next from 'i18next& ...
Hello There I recently created a website with dark mode and multi-language support for testing purposes, but I encountered an issue along the way. The Problematic Code I have removed any unnecessary elements from the code snippet below: portfolio/src/pag ...
Has anyone successfully integrated Material UI icons into i18n translated text? I've added the library and imported it to my parent file. I also included this line in my language JSON file, but unfortunately, it's not working as expected: { "text&quo ...
I am currently integrating react-i18next into my application to implement a switch button for French and English languages. Unfortunately, I am facing some issues as the translation is not working properly. I suspect it's related to the JSON file recogniti ...
I am trying to utilize a JSX object within the interpolation object of the i18next translate method. Here is an example code snippet along with its result: import React from "react"; import {useTranslation} from "react-i18next&qu ...
The issue: I'm currently facing a problem with i18next. It allows variable interpolation in strings, like "AddNew": "Add new {{item}}". However, I have a language where the grammar requires "{{item}}" to be the first word, as in "AddNew": "{{item}} toevoe ...
Everything seems to be working fine on my local environment. However, once I deploy it on Firebase, it causes a 500 internal error on nextServer. next-i18next version 8.1.3 Configuration module.exports = { i18n: { defaultLocale: 'en', locales: [ ...
I have followed the instructions for setting up next-i18next, but I am encountering an error that says "Text content did not match. Server: Testing ZH HANT Client: Testing EN" - even though only English text is displayed on the frontend. I seem to have ove ...
I've been grappling with this problem for the past few days. My React app is causing me some trouble as I try to implement multilingual support using i18next. I aim to modify the URL path based on the selected language, such as http://localhost:3000/e ...
Presently, this is the UI https://i.stack.imgur.com/CMvle.png App.tsx import "./styles.css"; import MyTable from "./MyTable"; export default function App() { const data = [ { key: "1", date: "2022-01- ...
Just yesterday, a new return type called DefaultTFuncReturn was introduced by i18next. I am currently in the process of updating this dependency and encountering numerous errors. Previously, it used to return a string, but now it consistently returns Defau ...
Transitioning from a single file containing all languages to individual files per language using i18next. The content of the translation.json file is as follows: { "section":{ "title":"wello world" } } This c ...
Currently, I am facing an issue with my react component that utilizes translations from i18next. Despite trying to create tests for it using JEST, nothing seems to be getting translated. I attempted to mock the useTranslation function as shown below: cons ...
I am currently using i18n to display translations in English and Japanese. The default language is set to English with the code en, but I have recently discovered that my website is not utilizing the correct ISO language code for Japanese, which should be ...
Having trouble with favicon display in Next.js 14.0.2. The issue cropped up after implementing internalization and reconfiguring my project structure. Here is a simplified view of my project structure: - app - [lang] - _components - _dictionaries ...
As I loop through an array from JSON, I extract all the necessary information. For example, if I have cards for blog posts that include the title, short description, published date, and URL. When clicking on a card, it redirects to a corresponding page ba ...