how to add the lang folder to the baseLanguage.

Hi, my current page structure is like this:

[lang]
 - about.astro
 - news.astro
 - contact.astro
 - index.astro
index.astro (homepage default lang or redirect to user locale)

So except for the homepage in baseLanguage I always add the [lang] to every URL. How can I do this?

(in my setup the HeadHrefLangs & LanguageSelector won’t work.)

I would like not to have a structure like this:

[lang]
 - about.astro
 - news.astro
 - contact.astro
 - index.astro
about.astro
news.astro
contact.astro
index.astro

Thanks!

[yassinedoghri]

Sounds good! But what if the structure is deeper like with a blog collection? […] How would the astro-i18next generate know what to do?

That’s the catch when trying to have a dynamic route for languages! So, first, the easiest thing to do is to discard using getStaticPaths to declare localized routes.

Instead, astro-i18next generate would generate each declared locale in its own folder. For example, let’s say we have 3 languages (fr, es, en), english being the default language:

# base pages translated using the `t()` function / `<Trans />` component
pages
├-- news
|    |-- [...slug].astro
|    |-- [page].astro
|-- about.astro
|-- [...page].astro
|-- contact.astro
└-- index.astro

astro-i18next generate would generate the following at build time:

pages
├-- fr
|    ├-- news
|    |    |-- [...slug].astro
|    |    └-- [page].astro
|    |-- about.astro
|    |-- [...page].astro
|    |-- contact.astro
|    └-- index.astro
├-- es
|    ├-- news
|    |    |-- [...slug].astro
|    |    └-- [page].astro
|    |-- about.astro
|    |-- [...page].astro
|    |-- contact.astro
|    └-- index.astro
├-- news
|    |-- [...slug].astro
|    └-- [page].astro
|-- about.astro
|-- [...page].astro
|-- contact.astro
└-- index.astro

And would add the following lines to the pages’ frontmatter so as not to touch to the getStaticPaths logic:

---
import i18next from "i18next";
 
i18next.changeLanguage(<language code goes here>);

[...]
--- 

I think that in terms of DX, this is the best. Apart from having to replace the text with translation keys, you wouldn’t have to do anything else.

And eventually, this also unlocks some other cool features, like what if we’d like to translate the routes? astro-i18next generate could also replace the file names for each language.

Anyways, haven’t worked out the details yet, hopefully I can get something working this weekend 🤞

[yassinedoghri]

Hey, thanks for reporting the issue!

This is a concern I’ve had since the beginning and haven’t figured out a way to automate it yet!

I’ve thought about generating the language files during build time but there are some limitations with Astro’s integration API. I’ll have to take some time in finding my way around them.

I’ll try working on it this weekend and post my progress here 🙂