i18n react how to make the url change when changing settings?
Eg, I am located at /community, the language is English. I switch the language to Russian - the url becomes /ru/community
Here is my answer on another thread. You can create a URL manipulator function or use onLanguageChanged as in the APIs.
Related
I want to do three things in my application, but I’m not figuring out how I could do that using Next.js router.
The default URL of the application should be 'https://localhost:3000/en'
It should also be possible to have 'https://localhost:3000/es' as a valid URL
Anything different than '/es' should redirect to '/en'
(This parameter will influence on the displayed language of the application.)
Considering those three points, should I create inside pages folder a new folder called language and put my index.tsx file and all the others routes that I have?
Example here
If I do that, what are the rules that I should create on my next.config.js to match with the criteria that I listed above? If not, what could be another approach to solve this?
The Question
I was wondering if there is any way of having the same visible URL for the client while being able to handle internationalization.
My use case
I want my users to have universal access to pages and hide the locales from the URL path. If a user shares a link with another user, the content should be loaded in the preferred language of the current user that opens the page.
I'm fetching localized data on the server-side with getServerSideProps and caching the result with Cache-Control for 5-10 minutes. So, passing locale as a query parameter (?lang=en, ?lang=ca, etc) probably won't work as the cached results should be different for different locales.
What I have done before
My app was written entirely in React and I'm now moving to Next.js. I used to pass the locale in a URL query parameter like ?lang=en. I would then store that locale in the localStorage, send API requests with the given locale, and change the app's appearance accordingly.
That used to work fine, but now I want to make use of the server-side rendering and request caching, which makes things more complicated.
This seems to be a common use case. Is there any way to handle the internationalization without explicitly changing the URL? Or maybe having one URL at first and then hiding some parts after? Any kind of idea/workaround would be really appreciated!
I'm trying to get a similar result. So far I haven't found a way to get rid of the local part in the url (I use next-i18next).
But I managed to handle the "content must be loaded in the preferred language of the user opening the page" part with cookie and middleware with the following
const url = request.nextUrl.clone();
url.locale = userPreferredLanguage;
url.pathname =
request.nextUrl.pathname === '/'
? `/${userPreferredLanguage}`
: `/${userPreferredLanguage}${request.nextUrl.pathname}`;
return NextResponse.redirect(url);
This question already has answers here:
How to setup i18n translated URL routes in Next.js?
(2 answers)
Closed 6 months ago.
I'm really happy to see i18n going into Next.js core with Next.js 10.
However, I'm wondering if and how we can use i18n to translate page names (urls?).
For example, let's say I have a contact page under mypage.de/kontakt (for default German language).
With Next.js 10 configured, Next.js automatically creates the route mypage.de/en/kontakt, which is fine so far, but how can we translate the page name as well? Instead of /kontakt, I'd like to have /contact.
Is or will this be possible with Next.js 10 out of the box?
Does it require additional libraries? What will be the right way to do this in 2021?
Thank you very much!
Imagine you have only one file named src/pages/contact.tsx. There are 2 scenarios.
User is hitting "foobar/contact" URL => you can use i18n redirection to redirect to "foobar/de/contact". Then client side you can use the browser API to change the URL (see related question).
User is hitting "foobar/de/kontact" => since your page is named "contact" and not "kontact", that's a problem, because this page doesn't exist. You'll hit a 404 as is. Here you need a rewrite as stated by #enoch comment on your question. You'll want to rewrite "kontact", "contactez-nous", "contactar"... to "contact" route.
Hopefully, Next.js rewrite feature is very powerful, and allow some slight decoupling between the actual route path and the URL seen by the user. And you can also alter the URL directly in JS.
A third way is to use URL rewriting server-side, but for that at the time of writing (Next 11) it can only be handled ad the host level, so it depends where you upload the app.
I am researching options for integrating language translation into a web app. I am comparing Google Translations API and React i18n right now, and it seems like i18n requires you to manually add all translations yourself - as in getting ahold of the translation for every page and adding that into the json data for the translation file.
I am just looking for confirmation that that is the way i18n works, and that I am not misunderstanding anything.
I was actually able to answer my own question. In case anyone else has the same question, the answer is yes: it does require manual translation for the entire site.
Does anybody know how I can get built-in Django tag url to work in the wrapped template renderer in google-app-engine?
It fails to create a "nice" url because it expects Django style url mappings, and since I'm using webapp.WSGIApplication I understand how it can be difficult for it to work. Basically I want to know if there is an alternative that will work with google-app-engine style url mappings.
Thanks in advance for any input.
It's not possible - that function depends on using Django's routing system, which webapp doesn't. More to the point, webapp doesn't provide a reverse-mapping function at all.