next-i18next | The easiest way to translate your NextJs apps | Frontend Framework library

by isaachinman TypeScript Version: v11.0.0 License: MIT

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | next-i18next Summary

next-i18next is a TypeScript library typically used in User Interface, Frontend Framework, React, Next.js applications. next-i18next has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

Although NextJs provides internationalised routing directly, it does not handle any management of translation content, or the actual translation functionality itself. All NextJs does is keep your locales and URLs in sync. To complement this, next-i18next provides the remaining functionality – management of translation content, and components/hooks to translate your React components – while fully supporting SSG/SSR, multiple namespaces, codesplitting, etc. While next-i18next uses i18next and react-i18next under the hood, users of next-i18next simply need to include their translation content as JSON files and don't have to worry about much else. A live demo is available here. This demo app is the simple example - nothing more, nothing less.

Support

Quality

Security

License

Reuse

Support

next-i18next has a medium active ecosystem.

It has 3165 star(s) with 590 fork(s). There are 28 watchers for this library.

It had no major release in the last 12 months.

There are 10 open issues and 979 have been closed. On average issues are closed in 43 days. There are 6 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of next-i18next is v11.0.0

Quality

next-i18next has 0 bugs and 0 code smells.

Security

next-i18next has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

next-i18next code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

next-i18next is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

next-i18next releases are available to install and integrate.

Installation instructions, examples and code snippets are available.

It has 80 lines of code, 0 functions and 25 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of next-i18next

Get all kandi verified functions for this library.

next-i18next Key Features

No Key Features are available at this moment for next-i18next.

next-i18next Examples and Code Snippets

No Code Snippets are available at this moment for next-i18next.

Community Discussions

Trending Discussions on next-i18next

next-i18next t(...).map is not a function

React slick compatibility with Nextjs

How to generate dynamic paths for non-default locales in Next.js?

Server Error ReferenceError: window is not defined in Next.js

proper getServerSideProps syntax for Typescript next.js + i18n

ReferenceError: window is not defined in Next.js using npm clevertap-react

ReferenceError: process is not defined after upgrading to Next.js 12 from 11.x.x

next-i18next translation not working in storybook, console logs missingKey

How to switch back to the default locale in Next.js?

How to get the locale value from URL in Next Js

QUESTION

next-i18next t(...).map is not a function

Asked 2022-Feb-11 at 18:24

I just migrate my working app from react to nextjs. I followed the tutorial provided by next and installed next-i18next but I'm not being able to map

I got this kind of object

...

ANSWER

Answered 2022-Feb-11 at 11:26

it may be t is not ready to be used in a first render... If you're using the useTranslation hook, there should be a ready flag. => https://react.i18next.com/latest/usetranslation-hook#not-using-suspense Or you can check for !!t("skills.items", { returnObjects: true }) before calling map

Source https://stackoverflow.com/questions/71074170

QUESTION

React slick compatibility with Nextjs

Asked 2022-Jan-29 at 13:37

I am planning to add React-slick library into my nextjs project for image slider, but getting an issue

Tries installing "react-slick" and "slick-carousel" as mentioned in the docs by

...

ANSWER

Answered 2021-Sep-22 at 23:05

Just removed the tilde prefix

Source https://stackoverflow.com/questions/69287823

QUESTION

How to generate dynamic paths for non-default locales in Next.js?

Asked 2022-Jan-22 at 16:29

I am building a Next.js app with internationalization using next-i18next. Pages are generated for all the pages of my site for both English and French, except for pages with dynamic routes: (i.e., blog/[id]/[blog-title]). For pages with dynamic routes, pages are generated for English, but not for French.

I should note that the blog entries are the same in both languages. So if the user click on a blog entry in the list, they will get the same blog entry.

When a French language user goes to a page with a dynamic route they get a 404. I am new to React and Next so I could be doing something dumb here.

...

ANSWER

Answered 2022-Jan-07 at 20:56

For dynamic routes, you have to explicitly return the locales you want to be pre-generated from the getStaticPaths function. If you don't, Next.js will only generate pages for the default locale.

From Internationalized Routing documentation:

For pages using getStaticProps with Dynamic Routes, all locale variants of the page desired to be prerendered need to be returned from getStaticPaths. Along with the params object returned for paths, you can also return a locale field specifying which locale you want to render.

This can be achieved by modifying your getStaticPaths function to generate a path for each slug/locale combination.

Source https://stackoverflow.com/questions/70596939

QUESTION

Server Error ReferenceError: window is not defined in Next.js

Asked 2021-Dec-19 at 13:15

I'm trying to integrate CleverTap into my Next.js app. Followed the documentation Web SDK Quick Start Guide but facing issue:

Server Error ReferenceError: window is not defined in Next.js

_app.tsx

...

ANSWER

Answered 2021-Dec-19 at 13:15

This is because NextJS is trying to execute that function on the server because it uses SSR, and window is a browser object. Since the window object is available only in the browser (client-side), the server is unable to identify the window object, hence getting undefined. In order to fix this, you should make sure that any functions/components that contain client-side related code be executed only on the browser or client-side. One way is using hooks such as useEffect that run only after the component is mounted. Another way is to use lazy loading which pretty much does the same thing.

Using useEffect hook. In your _app.tsx component, add a new useEffect hook and move the initialization code into the newly created useEffect function.

Source https://stackoverflow.com/questions/70411639

QUESTION

proper getServerSideProps syntax for Typescript next.js + i18n

Asked 2021-Dec-17 at 23:19

I'm struggling with next-i18next integration in a NextJS Typescript project - has nearly no recent examples anywhere. I've already configured internationalized routing, but I can't properly setup i18next as long as getServerSideProps syntax is bothering me.

I don't know much about Typescript, and am not familiar with types declarations yet.

The code looks like this, mostly copied from next-i18next documentation :

...

ANSWER

Answered 2021-Nov-02 at 12:20

import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
.....
//try cxt or context (or locale) variables
export const getServerSideProps: GetServerSideProps = async (ctx) => ({
      props: {
        ...await serverSideTranslations(ctx.locale, ['common', 'header']),
      },
    })
    
export default Home

Source https://stackoverflow.com/questions/69809141

QUESTION

ReferenceError: window is not defined in Next.js using npm clevertap-react

Asked 2021-Dec-15 at 11:14

I started to integrate CleverTap for Web Web SDK Quick Start Guide into my application which is Next.js

After googling found some packages such as clevertap-web-sdk, clevertap-react and decided to go (integrate) using clevertap-web-sdk npm package. Followed the documentation as the way (to be more specific followed React Example as it suggests) but having issue.

Changed to another package clevertap-react. Here also found same issue.

ReferenceError: window is not defined

_app.tsx

...

ANSWER

Answered 2021-Dec-15 at 11:14

It's because Next is trying to render your component on the server and the window object doesn't exist on the server.

Can you try:

Source https://stackoverflow.com/questions/70362053

QUESTION

ReferenceError: process is not defined after upgrading to Next.js 12 from 11.x.x

Asked 2021-Dec-06 at 19:16

Getting this issue after upgrading to latest version 12 from 11.x.x

Unhandled Runtime Error: ReferenceError: process is not defined

Here is my package.json:

...

ANSWER

Answered 2021-Dec-06 at 19:16

If you are on serverside, you need to declare your variables in next.config.js:

Source https://stackoverflow.com/questions/70250516

QUESTION

next-i18next translation not working in storybook, console logs missingKey

Asked 2021-Nov-02 at 14:40

I am setting up storybook and for my translations I am using next-i18next. This is How I set it up:

...

ANSWER

Answered 2021-Nov-02 at 14:40

I installed this package: https://www.npmjs.com/package/i18next-http-backend

And then in my i18n.js file, I add the backend.

Source https://stackoverflow.com/questions/69810773

QUESTION

How to switch back to the default locale in Next.js?

Asked 2021-Oct-31 at 17:05

In the Next.js app, I am using the next-i18next module for multi-language which is working fine. There are two languages one English and the other Arabic. Default is English.

For toggle, I am using the following code in NavBar.

...

ANSWER

Answered 2021-Oct-30 at 11:02

To keep the current route but change the locale, you can use router.asPath as the url then pass the locale in the options object (third argument) of router.push.

Source https://stackoverflow.com/questions/69776965

QUESTION

How to get the locale value from URL in Next Js

Asked 2021-Oct-29 at 13:46

In Next Js application, I am using next-i18next module for multi language support. It is working fine.

Code of NabBar component:

...

ANSWER

Answered 2021-Oct-29 at 13:46

You can get current active locale from router. It is available at router.locale

And then you would simply check if checkbox id is matching active locale

Source https://stackoverflow.com/questions/69768856

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install next-i18next

You need to also have react and next installed.
First, create a next-i18next.config.js file in the root of your project. The syntax for the nested i18n object comes from NextJs directly.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Find more information at: