fix: issue #1040 #1238

samfromaway · 2021-06-04T13:58:54Z

A migration guide for this issue #1040.

vercel · 2021-06-04T13:58:59Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/isaachinman/next-i18next/52XRt5QedN2PrJJdGMwe5AtooZS6
✅ Preview: https://next-i18next-git-fork-samfromaway-patch-1-isaachinman.vercel.app

Fix: issue #1040

isaachinman · 2021-06-04T14:13:11Z

v8-migration.md

+Please read the [full documentation](https://github.com/isaachinman/next-i18next/blob/master/README.md), before migrating from previous versions to v8.
+
+This is a guide which will cover most use cases to migrate from v7 to v8.
+We advise migrating as soon as possible, as new versions of next.js won't be compatible with the v7 of this package next-i18next.


Suggested change

We advise migrating as soon as possible, as new versions of next.js won't be compatible with the v7 of this package next-i18next.

We advise migrating as soon as possible, as new versions of NextJs won't be compatible with the v7 of this package `next-i18next`.

Fixed with new commit

isaachinman · 2021-06-04T14:14:02Z

v8-migration.md

+We advise migrating as soon as possible, as new versions of next.js won't be compatible with the v7 of this package next-i18next.
+
+#### What is new?
+This library, next-i18next, has changed a lot because it now is NOT providing internationalized routing anymore, as [next.js is providing that now.](https://nextjs.org/docs/advanced-features/i18n-routing)


Suggested change

This library, next-i18next, has changed a lot because it now is NOT providing internationalized routing anymore, as [next.js is providing that now.](https://nextjs.org/docs/advanced-features/i18n-routing)

This package, `next-i18next`, has changed a lot because it now is_not_ providing internationalised routing, as [NextJs has first class support for it.](https://nextjs.org/docs/advanced-features/i18n-routing)

Fixed with new commit

isaachinman · 2021-06-04T14:14:59Z

v8-migration.md

+#### What is new?
+This library, next-i18next, has changed a lot because it now is NOT providing internationalized routing anymore, as [next.js is providing that now.](https://nextjs.org/docs/advanced-features/i18n-routing)
+
+Before the translation functionality was initialized on a global level, in the page `_app.js`. Now you have to import the functionality with a new method `serverSideTranslations` on EACH page in your next pages folder where you have translations.


Suggested change

Before the translation functionality was initialized on a global level, in the page `_app.js`. Now you have to import the functionality with a new method `serverSideTranslations` on EACH page in your next pages folder where you have translations.

Before the translation functionality was initialised on a global level, in `_app.js`. Now, you must use a new method, called `serverSideTranslations` on_each_ page in your `pages` directory.

Fixed with new commit

isaachinman · 2021-06-04T14:15:50Z

v8-migration.md

+
+Before the translation functionality was initialized on a global level, in the page `_app.js`. Now you have to import the functionality with a new method `serverSideTranslations` on EACH page in your next pages folder where you have translations.
+
+The object `i18n` which was imported directly  from `i18n.js` in the v7 suppored only client-side-rendering. Now in the v8 the `i18n` object also supports server-side-renering. So you can use the `i18n.language` for server side rendered elements.


Suggested change

The object `i18n` which was imported directly from `i18n.js` in the v7 suppored only client-side-rendering. Now in the v8 the `i18n` object also supports server-side-renering. So you can use the `i18n.language` for server side rendered elements.

The object `i18n` which was imported directly from `i18n.js` in `next-i18next@<8` suppored only client-side-rendering. Now in the v8 the `i18n` object also supports server-side rendering. So you can use the `i18n.language` for server-side rendered elements.

Fixed with new commit

isaachinman · 2021-06-04T14:16:45Z

v8-migration.md

+1. `appWithTranslation` is still wrapping the App in `_app.js`.
+2. `withTranslation` is still working the same way.
+3. `useTranslation` is still working the same way.
+4. The [translation content structure](https://github.com/isaachinman/next-i18next/blob/master/README.md#2-translation-content) is still the same.


Suggested change

1. `appWithTranslation` is still wrapping the App in `_app.js`.

2. `withTranslation` is still working the same way.

3. `useTranslation` is still working the same way.

4. The [translation content structure](https://github.com/isaachinman/next-i18next/blob/master/README.md#2-translation-content) is still the same.

1. `appWithTranslation` still wraps the App in `_app.js`

2. `withTranslation` works the same way

3. `useTranslation` works the same way

4. The [translation content structure](https://github.com/isaachinman/next-i18next/blob/master/README.md#2-translation-content) remains the same

Fixed with new commit

isaachinman · 2021-06-04T14:19:21Z

v8-migration.md

+1.  Remove i18n.js and add next-i18next.config.js like described in [the docs](https://github.com/isaachinman/next-i18next#3-project-setup) to the next.config.js file.
+2. Replace `import { appWithTranslation } from 'i18n'` with `import { appWithTranslation } from 'next-i18next'`
+3.  Replace all instances of `import { withTranslation } from 'i18n`  to  `import { withTranslation } from 'next-i18next'`
+4. Replace all instances of `import { useTranslation } from 'i18n`  to  `import { useTranslation } from 'next-i18next'`
+5.  Add to `getServerSideProps` or `getInitialProps` in the return as props`...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>]))`  in every single page where you have translations in children. Or in all pages if you have a component in `_app.js` that needs translations. As [described in the docs.](https://github.com/isaachinman/next-i18next#serversidetranslations)
+6.  Remove  `namespacesRequired: ['common'],`  in `_app.js` (not used anymore).
+7.  Change the language changer to  `router.push(router.asPath, undefined, { locale: <YOUR_LOCALE>, });`


Suggested change

1. Remove i18n.js and add next-i18next.config.js like described in [the docs](https://github.com/isaachinman/next-i18next#3-project-setup) to the next.config.js file.

2. Replace `import { appWithTranslation } from 'i18n'` with `import { appWithTranslation } from 'next-i18next'`

3. Replace all instances of `import { withTranslation } from 'i18n` to `import { withTranslation } from 'next-i18next'`

4. Replace all instances of `import { useTranslation } from 'i18n` to `import { useTranslation } from 'next-i18next'`

5. Add to `getServerSideProps` or `getInitialProps` in the return as props`...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>]))` in every single page where you have translations in children. Or in all pages if you have a component in `_app.js` that needs translations. As [described in the docs.](https://github.com/isaachinman/next-i18next#serversidetranslations)

6. Remove `namespacesRequired: ['common'],` in `_app.js` (not used anymore).

7. Change the language changer to `router.push(router.asPath, undefined, { locale: <YOUR_LOCALE>, });`

1. Remove `i18n.js` and add `next-i18next.config.js` as described in [the docs](https://github.com/isaachinman/next-i18next#3-project-setup) to your `next.config.js` file

2. Replace `import { appWithTranslation } from 'i18n'` with `import { appWithTranslation } from 'next-i18next'`

3. Replace all instances of `import { withTranslation } from 'i18n` to `import { withTranslation } from 'next-i18next'`

4. Replace all instances of `import { useTranslation } from 'i18n` to `import { useTranslation } from 'next-i18next'`

5. Add to `getServerSideProps` or `getInitialProps` in the return as props`...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>]))` in every single page where you have translations. Note that if you have a component in `_app` that needs translations, you will have to do this for _all_ pages. Follow [the docs.](https://github.com/isaachinman/next-i18next#serversidetranslations)

6. Remove `namespacesRequired: ['common'],` in `_app.js` (not used anymore)

7. To change language imperatively, you can now do: `router.push(router.asPath, undefined, { locale: <YOUR_LOCALE>, });`

Fixed with new commit

isaachinman · 2021-06-04T14:19:55Z

v8-migration.md

+1. Add to the custom 404 page the `...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>])),`  as a return in props in `getStaticProps` so the 404 page works with translations as well.
+2. Add to the custom 500 page the `...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>])),`  as a return in props in `getStaticProps` so the 404 page works with translations as well.
+3. Add set cookie `NEXT_LOCALE` for language recognition, More about that in [the next.js docs](https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie)
+4.  Adjust the Jest test settings to mock `withTranslation`,`useTranslation`, and `t()` or/and `i18n` in props.


Suggested change

1. Add to the custom 404 page the `...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>])),` as a return in props in `getStaticProps` so the 404 page works with translations as well.

2. Add to the custom 500 page the `...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>])),` as a return in props in `getStaticProps` so the 404 page works with translations as well.

3. Add set cookie `NEXT_LOCALE` for language recognition, More about that in [the next.js docs](https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie)

4. Adjust the Jest test settings to mock `withTranslation`,`useTranslation`, and `t()` or/and `i18n` in props.

1. Add to the custom 404 page the `...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>])),` as a return in props in `getStaticProps` so the 404 page works with translations as well

2. Add to the custom 500 page the `...(await serverSideTranslations(locale, [<YOUR_NAMESPACES>])),` as a return in props in `getStaticProps` so the 404 page works with translations as well

3. Add set cookie `NEXT_LOCALE` for language recognition. More about that in [the NextJs docs](https://nextjs.org/docs/advanced-features/i18n-routing#leveraging-the-next_locale-cookie)

4. Adjust the Jest test settings to mock `withTranslation`,`useTranslation`, and `t()` or/and `i18n` in props.

Fixed with new commit

Corrections according to issachinman Please let me know where in the "main" readme to link this md file. Or you can add it yourself.

samfromaway · 2021-06-04T21:44:59Z

@isaachinman All fixed. Only things that's missing is the link on the main readme

isaachinman

Looks good to me. Can we create a top-level docs directory and put this inside, and link to it from the main README?

samfromaway · 2021-06-13T15:53:12Z

Looks good to me. Can we create a top-level docs directory and put this inside, and link to it from the main README?

Sorry I accidentaly delete my fork I added a new PR #1254

samfromaway · 2021-06-13T15:53:47Z

Sorry I accidentally delete my fork I added a new PR #1254

issues/1040

cb74d1d

A migration guide for this issue #1040.

vercel bot deployed to Preview June 4, 2021 13:58 View deployment

samfromaway changed the title ~~issues/1040~~ Fix: issue #1040 Jun 4, 2021

Fix: issue #1040

ed7896a

Fix: issue #1040

vercel bot deployed to Preview June 4, 2021 14:03 View deployment

samfromaway changed the title ~~Fix: issue #1040~~ fix: issue #1040 Jun 4, 2021

isaachinman suggested changes Jun 4, 2021

View reviewed changes

fix: issue #1040

e5ecbd2

Corrections according to issachinman Please let me know where in the "main" readme to link this md file. Or you can add it yourself.

vercel bot deployed to Preview June 4, 2021 16:28 View deployment

Merge branch 'master' into patch-1

ba5c8c1

vercel bot deployed to Preview June 4, 2021 18:00 View deployment

Merge branch 'master' into patch-1

99c7b95

vercel bot deployed to Preview June 7, 2021 13:32 View deployment

samfromaway requested a review from isaachinman June 8, 2021 23:20

isaachinman reviewed Jun 13, 2021

View reviewed changes

samfromaway marked this pull request as draft June 13, 2021 15:43

samfromaway closed this Jun 13, 2021

samfromaway mentioned this pull request Jun 13, 2021

fix: issue-#1040 #1254

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: issue #1040 #1238

fix: issue #1040 #1238

samfromaway commented Jun 4, 2021

vercel bot commented Jun 4, 2021 •

edited

Loading

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

isaachinman Jun 4, 2021

samfromaway Jun 4, 2021

samfromaway commented Jun 4, 2021 •

edited

Loading

isaachinman left a comment

samfromaway commented Jun 13, 2021

samfromaway commented Jun 13, 2021

	We advise migrating as soon as possible, as new versions of next.js won't be compatible with the v7 of this package next-i18next.
	We advise migrating as soon as possible, as new versions of NextJs won't be compatible with the v7 of this package `next-i18next`.

	This library, next-i18next, has changed a lot because it now is NOT providing internationalized routing anymore, as [next.js is providing that now.](https://nextjs.org/docs/advanced-features/i18n-routing)
	This package, `next-i18next`, has changed a lot because it now is_not_ providing internationalised routing, as [NextJs has first class support for it.](https://nextjs.org/docs/advanced-features/i18n-routing)

	Before the translation functionality was initialized on a global level, in the page `_app.js`. Now you have to import the functionality with a new method `serverSideTranslations` on EACH page in your next pages folder where you have translations.
	Before the translation functionality was initialised on a global level, in `_app.js`. Now, you must use a new method, called `serverSideTranslations` on_each_ page in your `pages` directory.


		Before the translation functionality was initialized on a global level, in the page `_app.js`. Now you have to import the functionality with a new method `serverSideTranslations` on EACH page in your next pages folder where you have translations.

		The object `i18n` which was imported directly from `i18n.js` in the v7 suppored only client-side-rendering. Now in the v8 the `i18n` object also supports server-side-renering. So you can use the `i18n.language` for server side rendered elements.

fix: issue #1040 #1238

fix: issue #1040 #1238

Conversation

samfromaway commented Jun 4, 2021

vercel bot commented Jun 4, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samfromaway commented Jun 4, 2021 • edited Loading

isaachinman left a comment

Choose a reason for hiding this comment

samfromaway commented Jun 13, 2021

samfromaway commented Jun 13, 2021

vercel bot commented Jun 4, 2021 •

edited

Loading

samfromaway commented Jun 4, 2021 •

edited

Loading