Next-translate: Change language needs update, as well as the explanation for pages and pages_.

[yotovtsvetomir]

Hello everyone,

I enjoy the improvement of 18next with next js which was a disaster to set up. I like next-translate, but 2 things need an update in my opinion.

1. The explanation of the page generation wasn't clear enough and I ended up losing all my pages, thank god they weren't much. Instead of the word imagine, it will be nicer if you explain that we target a folder named "pages_" and it will take that folder in order to create the new "pages" folder, which will be then used from next js in order for the application to work.

2. Not having change language, after all the work you did is just a crime. The proposed way using a custom link or router push both involve a lot of coding and are inconvenient:

For the links solution, you have to deal with all the links in all of your app, or create a custom one and import it everywhere.

For the router push solution, you need to check if the /en is already there, otherwise you will add another one, doesn't matter if it is in the end of the route or not.

The restriction to use translations in _app.js can be solved by creating a layout component and add your header and footer there.

All I am asking is for a simple changeLanguage function built in or a way to change the global variable, which is basically the same thing.

Thank you very much in advance.

[yotovtsvetomir]

const changeLanguage = (lng) => { let ur = Router.pathname.replace("/bg", "") if (ur === "") { ur = "/" } Router.pushI18n({ url: ur, options: { lang: lng } }) }

Here is a work around for replacing the language. next-translate/Link automatically picks up the language, no need for adjustments.

[aralroca]

Hey @yotovtsvetomir although you close it, I'm going to answer you.

1. The explanation of the page generation wasn't clear enough and I ended up losing all my pages, thank god they weren't much. Instead of the word imagine, it will be nicer if you explain that we target a folder named "pages_" and it will take that folder in order to create the new "pages" folder, which will be then used from next js in order for the application to work.

This is explained here: https://github.com/vinissimus/next-translate#how-is-this-lib-handling-the-routes

However probably it is not clear. Maybe we can re-do this part to explain it better. Thanks to report it! I'm going to re-open this issue in order to improve this part of the docs. 😊

1. Not having change language, after all the work you did is just a crime. The proposed way using a custom link or router push both involve a lot of coding and are inconvenient:

I would like to know why this involves a lot of code... If you can tell me your case it maybe will be useful.

Normally the code to change the language is just in one place, not in all the app, and using Router.pushI18n or Link you can decide if to keep on the same page or navigate to the homepage (for example). I guess it is the more natural way to change the language when the language is part of the URL.

For the links solution, you have to deal with all the links in all of your app, or create a custom one and import it everywhere.

You can actually just use the next-translate/Link to change the language:

<Link lang="es" href="/">Change to Spanish</Link>

You don't need to think too much about how to deal with all the links in the app. Because if you don't pass the prop lang, is using the current language as lang. So if your current language is en and you have href="/some-page" it's navigating to /en/some-page.

If you want to keep the same page after changing the language instead of navigating to somewhere, you can just use:

const { pathname } = useRouter()

// ...
<Link lang="es" href={pathname}>Change to Spanish in the same page</Link>

So I don't understand your point of view. If you can clarify it will be perfect to understand what to improve 😊

For the router push solution, you need to check if the /en is already there, otherwise you will add another one, doesn't matter if it is in the end of the route or not.

The Router.pushI18n manages this. Doing Router.pushI18n('/some-page') is navigating to /en/some-page.

Again, can you clarify this? 👏

The restriction to use translations in _app.js can be solved by creating a layout component and add your header and footer there.

Yes sure, this is the alternative solution that is on the examples. However, there is the issue opened https://github.com/vinissimus/next-translate/issues/44 and we want to provide also translations inside the _app.js soon.

Thanks again for reporting this! I hope we can clarify soon these things and improve it! 😊

[SpicyPete]

When I change the language the proposed way,
ie
<Link lang="en" href={pathname}>Change to English in the same page</Link>
My routes end up with double languages added, as pathname contains the current language within it.

For example, if I'm on ja/accounts, and change to English via something like

const { pathname } = useRouter()
<Link lang="en" href={pathname}>Change to English in the same page</Link>

I am being sent to /en/ja/accounts rather than /en/accounts. 🤔

Edit:

This resolves the issue, might be good to add to the changing routes doc example

const pathnameNoLang = pathname
    .split('/')
    .filter((section) => section !== lang)
    .join('/');

[shunkakinoki]

Hi guys, thanks for the awesome project!
I've found that using pathname results in an error when passing in dynamic paths,
so replacing pathname with asPath worked perfectly for me!

[GenisDiaz]

Hi all! I use this to keep the current pathname

const { pathname } = useRouter()
<Link
     href={pathname.replace(`/${lang}`, '') || '/'}
     lang={lng}
     key={lng}
>
    {t(`common:language-name-${lng}`)}
</Link>

I hope that helps somebody