Create button link to override browser language

How do I create a button link to override the browser language setting? The default language of the site is en. I created a button for the spanish page and used /es as destination and that is working fine but if I put /en to go back from the spanish to the english page the URL it generates is …/es/en and therefore a 404. How can I create a button to go to the English page when the browser language is Spanish?

Hi @used_meerkat, would you mind sharing some more details about how your code base internationalized routing is set up? Are you using next js internationalization? Are you by any chance customizing the link component in there?

Also, just in case, can you also share the plasmic project url? As well as a live published URL and where to look for this button. I can take a look

Hi @yang yes we are using next js (approach 2), find attached config files. The project URL is https://studio.plasmic.app/projects/tCiHrevukAkqjPXykqTYjQ/branch/main@latest/page/Homepage

next.config.js

[[…catchall]].tsx

The button I try to fix is in the top right of the header. You can also see I added some test buttons

Hi @yang any clue how I can fix this?

Hi @yang have you been doing something with our web? For some reason the spanish section is now in english for the main format while the medium version and the mobile version are spanish. Not sure what happened here

@used_meerkat hi! We had a chance to discuss this scenario internally, it’s an interesting one.

But first no I don’t think I have access to editing that project…

The links that you specify in plasmic will be used exactly in the next JS project, so when you specify a link pointing to /bar, that’s the page you will try to route to, it won’t automatically become /lang/bar. My understanding is that that’s the main issue you’re running into right now, let me know if that captures everything.

So what you would need in this case is the ability to override the URL specified in The Links at build time. We are currently discussing an API to let you do this…

Hi @yang we found a solution. We created a component for the language button and used HTML attribute “locale”. Thanks

Thanks for letting me know! That’s a good solution!

(We’ll continue to work toward making it possible to customize the link functionality.)