using next-i18next with Next.js 13 #1993

VugarAhmadov · 2022-10-26T07:15:14Z

VugarAhmadov
Oct 26, 2022

How we are going to use this package with Nextjs version 13 and how it will work with server components? Because I want my hole page use translation in server and get translated page from server.

previously, we were using this package like this.
export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale as string, ["common", "login", "form"])),
},
};
};

adrai · 2022-10-26T07:17:58Z

adrai
Oct 26, 2022
Maintainer

... is there an issue with that?
Check the second page of the examples/simple...
should work as usual

0 replies

VugarAhmadov · 2022-10-26T07:33:55Z

VugarAhmadov
Oct 26, 2022
Author

the example is using pages directory. we can not use getServerSideProps inside app directory. so what will be the alternative?

1 reply

rakibul-wdp Jul 6, 2023

@VugarAhmadov Did you solve this issue?
i18next/next-app-dir-i18next-example#21 (comment)

Gbuomprisco · 2022-10-26T07:50:41Z

Gbuomprisco
Oct 26, 2022

WIth the new app directory structure, we will not be able to use getServerSideProps and _app.tsx.

There are quite a few changes in there. While next-i18next works great with the pages structure, it will not work with the new one.

More info: https://beta.nextjs.org/docs/upgrade-guide#

0 replies

adrai · 2022-10-26T07:53:26Z

adrai
Oct 26, 2022
Maintainer

https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app

Feel free to start a PR addressing this.

1 reply

adrai Dec 6, 2022
Maintainer

#1993 (reply in thread)

raymonddaikon · 2022-10-26T07:58:20Z

raymonddaikon
Oct 26, 2022

Also with the new app directory approach AppProps is no longer passed to children (since _app and _document don't exist anymore), therefore the appWithTranslation HOC does not work.

0 replies

adrai · 2022-10-26T07:59:43Z

adrai
Oct 26, 2022
Maintainer

Like said, feel free to start a pull request and contribute to this open source project...

1 reply

adrai Dec 6, 2022
Maintainer

#1993 (reply in thread)

Gbuomprisco · 2022-10-26T09:28:02Z

Gbuomprisco
Oct 26, 2022

Like said, feel free to start a pull request and contribute to this open source project...

I get the why of your comments, "just make a PR" (I do it too!) - but in this case, it's a fundamental change in how this library works with the future Next.js, and I think it would be more appropriate if it were led by a maintainer.

Please don't take this as "please work for free for me"; it's the beginning of a discussion for making this library work with what Next.js will become, not a command to work on it.

0 replies

adrai · 2022-10-26T09:30:20Z

adrai
Oct 26, 2022
Maintainer

That's why I said "...feel free to start a pull request..." ;-)

0 replies

Gbuomprisco · 2022-10-26T09:33:10Z

Gbuomprisco
Oct 26, 2022

Before I start a PR, should this be moved to a discussion, maybe? Since the API will have significant changes, and maintainers should lead the design of those?

0 replies

LB22 · 2022-10-26T10:04:33Z

LB22
Oct 26, 2022

https://beta.nextjs.org/docs/app-directory-roadmap

Internationalization (i18n)
We will be providing more guidance on solutions for internationalized routing inside app. With the addition of generateStaticParams, which can be used inside layouts, this will provide improved flexibility for handling routing when paired with Middleware versus the existing i18n routing features in pages/.

1 reply

jlarmstrongiv Nov 29, 2022

More guidance can be found here vercel/next.js#41980 (comment)

dejurin · 2022-10-29T15:23:36Z

dejurin
Oct 29, 2022

You can use native

'use client'

import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";


i18n
.use(initReactI18next) // passes i18n down to react-i18next
.init({
  // the translations
  // (tip move them in a JSON file and import them,
  // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
  resources: {
    en: {
      translation: {
        "Welcome to React": "Welcome to React and react-i18next"
      }
    }
  },
  lng: "en", // if you're using a language detector, do not define the lng option
  fallbackLng: "en",

  interpolation: {
    escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
  }
});


function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {

  const { t } = useTranslation();


  
  return (
    <html lang="en">
      <head>
      </head>
      <body>
            <h2>{t('Welcome to React')}</h2>
            {children}
      </body>
    </html>
  );
}

export default RootLayout;

4 replies

adrai Oct 29, 2022
Maintainer

This will work directly only in the client, right?

dejurin Oct 29, 2022

Yep, I was use
'use client'

aldabil21 Nov 5, 2022

with this setup, you will use client components everywhere you use the t function, which is almost everywhere. Thats not what Next 13 is all about (Server component first and by default).

adrai Dec 6, 2022
Maintainer

#1993 (reply in thread)

murad-alqadi · 2022-12-05T20:10:17Z

murad-alqadi
Dec 5, 2022

What is the current consensus on roadmap for addressing this issue?

1 reply

adrai Dec 7, 2022
Maintainer

#1993 (comment)

adrai · 2022-12-06T10:32:40Z

adrai
Dec 6, 2022
Maintainer

fyi: https://beta.nextjs.org/docs/app-directory-roadmap#not-planned-features

7 replies

adrai Dec 6, 2022
Maintainer

Will create a little example how this could work directly with i18next with the same "workaround"...

LB22 Dec 6, 2022

If you @adrai, or someone else who has strong knowledge and ties to i18next / react-i18next / next-i18next, would get in contact with the Next.js team to understand their vision, get advice for next-i18next, manage pain points, open up a feedback channel, etc, I think that could help this package out tremendously. I'm sure they are aware of this package.

With "not planning to include the i18n feature", I think they mean that they won't specifically build an i18n solution such as next-i18next into Next.js by default. I'm sure they however want something like next-i18next to exist, and I'm sure they are willing to help out keeping their own ecosystem (next-i18next) alive.

Again, someone with strong knowledge of this package should get in contact with them and hopefully they could offer us something valuable.

vercel/next.js#41980 (comment)
"Open to any feedback" - They want us to give our opinions

adrai Dec 6, 2022
Maintainer

Here a simple example that uses i18next and react-i18next directly... without the need of next-i18next: https://github.com/i18next/next-13-app-dir-i18next-example

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

adrai · 2022-12-07T21:46:55Z

adrai
Dec 7, 2022
Maintainer

The example here: https://github.com/i18next/next-13-app-dir-i18next-example is showing how i18next could be used on server side and client side... and also a middleware with language detection and cookie persistence...
And here the corresponding blog post: https://locize.com/blog/next-13-app-dir-i18n/

11 replies

adrai Apr 12, 2023
Maintainer

i18next/next-app-dir-i18next-example#12

weilin-ong Jul 20, 2023

Hey thanks for the example. Quick question, can both setups co-exist?
I'm slowly migrating my app from pages router to app router, while every file works fine under the pages router, the migrated files under app router do not. Can I not delete the old setup while I'm following this new approach? https://locize.com/blog/next-13-app-dir-i18n/

adrai Jul 20, 2023
Maintainer

What do you mean by "the migrated files under app router do not"? Is there an error?
Never tested that myself...

weilin-ong Jul 21, 2023

yes, i got this error:
--> react-i18next:: You will need to pass in an i18next instance by using initReactI18next

i think the error comes from removing this part in my migrated files, i had to remove it because i cant use getStaticProps in client components:

import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, [
        'common',
        'footer',
      ])),
      // Will be passed to the page component as props
    },
  }
}

adrai Jul 21, 2023
Maintainer

in the app router part you can't use next-i18next anymore, but in the pages part you need to import useTranslation from next-i18next

paulghc051080 · 2023-04-05T05:57:41Z

paulghc051080
Apr 5, 2023

Do you have an example of how to use dynamic routes? I had an error when I created the dynamic page folder 'Server Error
Error: A required parameter (name) was not provided as a string in generateStaticParams for /[lng]/[name]

This error happened while generating the page. Any console logs will be displayed in the terminal window.' thanks

1 reply

adrai Apr 5, 2023
Maintainer

app directory does not have the concept for dynamic routes, but dynamic segments, if you have next.js specific questions you might ask directly in the vercel/next.js repo

albertothedev · 2023-04-28T18:32:42Z

albertothedev
Apr 28, 2023

Does this mean that this library is useless since Next.js 13 and we should instead use i18next and react-i18next? From the blog post:

Nice features provided by next-i18next (and other Next.js related i18n modules), like described here and here are not suited to this new app directory setup.

7 replies

adrai Apr 28, 2023
Maintainer

next-i18next is still compatible with Next.js 13... but only for the pages setup, and not with the app directory setup.

albertothedev Apr 28, 2023

Great, I saw the commits while I was working on my PR #2148. I think this works.

sagargulati Apr 30, 2023

So next-i18next doesn't seem to be compatible with the new app directory at all and it doesn't seem to be on roadmap too?

adrai Apr 30, 2023
Maintainer

like said, it's just not necessary anymore.

albertothedev Apr 30, 2023

It would be great to not have to manually configure the middleware.

Ivan275 · 2023-07-12T21:10:08Z

Ivan275
Jul 12, 2023

Elint complaint this when I'm building: Error: React Hook "useTranslation" cannot be called in an async function. react-hooks/rules-of-hooks

2 replies

aldabil21 Jul 12, 2023

Rename it, for example rename the server-side useTranslation to getTranslation

Ivan275 Jul 12, 2023

Thanks!, that works!

multivoltage · 2024-04-12T09:11:44Z

multivoltage
Apr 12, 2024

Hi.
I have a scenario probably equals to most of you.
I developed my entire site with next 12 and used next-i18-next.
Today my site use next 13 and only 2 new pages uses app router.

This because all my pages have got footer and header component which are using useTranslation from next-i18-next.

these 2 pages fortunatly ara pegas without any component (only a canvas).

But now when I need to create a new page I would create in the app router. But this is impossible since a normal page in my case has both footer and header component. They (with use client on top) did not work since requires code like ...(await serverSideTranslations(locale, ["common"])),

How can I start a migration? I dupicate footer and make it working with app router?

0 replies

This comment has been minimized.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

This comment has been hidden.

Sign in to view

using next-i18next with Next.js 13 #1993

Replies: 20 comments · 39 replies

adrai Oct 26, 2022 Maintainer

VugarAhmadov Oct 26, 2022 Author

adrai Oct 26, 2022 Maintainer

adrai Dec 6, 2022 Maintainer

adrai Oct 26, 2022 Maintainer

adrai Dec 6, 2022 Maintainer

adrai Oct 26, 2022 Maintainer

adrai Oct 29, 2022 Maintainer

adrai Dec 6, 2022 Maintainer

adrai Dec 7, 2022 Maintainer

This comment has been minimized.

adrai Dec 6, 2022 Maintainer

adrai Dec 6, 2022 Maintainer

adrai Dec 6, 2022 Maintainer

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

This comment has been hidden.

adrai Dec 7, 2022 Maintainer

adrai Apr 12, 2023 Maintainer

adrai Jul 20, 2023 Maintainer

adrai Jul 21, 2023 Maintainer

adrai Apr 5, 2023 Maintainer

adrai Apr 28, 2023 Maintainer

adrai Apr 30, 2023 Maintainer

Replies: 20 comments 39 replies

adrai
Oct 26, 2022
Maintainer

VugarAhmadov
Oct 26, 2022
Author

adrai
Oct 26, 2022
Maintainer

adrai Dec 6, 2022
Maintainer

adrai
Oct 26, 2022
Maintainer

adrai Dec 6, 2022
Maintainer

adrai
Oct 26, 2022
Maintainer

adrai Oct 29, 2022
Maintainer

adrai Dec 6, 2022
Maintainer

adrai Dec 7, 2022
Maintainer

adrai
Dec 6, 2022
Maintainer

adrai Dec 6, 2022
Maintainer

adrai Dec 6, 2022
Maintainer

adrai
Dec 7, 2022
Maintainer

adrai Apr 12, 2023
Maintainer

adrai Jul 20, 2023
Maintainer

adrai Jul 21, 2023
Maintainer

adrai Apr 5, 2023
Maintainer

adrai Apr 28, 2023
Maintainer

adrai Apr 30, 2023
Maintainer