I have read this: Internationalization and would like to see if there are any updates to this feature. Like Routing: Internationalization | Next.js , I imagine a workflow where
/ → Home/ko-KR → Home in Korean (same content)/ja-JP → Home in Japanese (same content)
… without any further modifications. Would this be possible?
1 Like
I just came home. To add more context —
Every page will have a subpath routing. For example, if we have an AboutPage at /about, naturally, ko-KR/about and ja-JP/about will be generated.
commands like yarn rw i18n extract would be helpful. This will extract every hard-coded string and separate them into a JSON file, which we can use for crowd-source translations.
each internationalized path should have HTTP content negotiation and hreflang properties for internationalized SEO support.
We had some discussion about optional path parameter that can be used for i18n like you probably already read on the other post.
opened 05:37PM - 01 May 21 UTC
topic/router
# Optional Path Parameters
## Existing functionality
This is what you do t… o have a path parameter named `id`
```jsx
<Route path="/user/{id}" page={UserStringPage} name="userString" />
```
You can add a constraint and a "type cast" by doing this, and you'll get a `number` instead of a `string` when you use it
```jsx
<Route path="/user/{id:Int}" page={UserIntPage} name="userInt" />
```
You can even add custom types
```jsx
const userRouteParamTypes = {
slug: {
constraint: /\w+-\w+/,
transform: (param) => param.split('-'),
}
}
<Router paramTypes={userRouteParamTypes}>
<Route path="/post/{name:slug}" page={PostPage} name={post} />
</Router>
```
## Rationale
@simoncrypta mentioned to me he would like to have a parameter that optionally defines the language to use, so you can have all routes that start with e.g. /fr/ be in French, everything that start's with /de/ be in German etc.
## Proposed functionality
I propose we add support for optional parameters by appending a question mark (`?`) to the end of the param name.
In usage it would look like this
```jsx
const userRouteParamTypes = {
lang: {
constraint: /en|fr|sv|de/,
}
}
<Router paramTypes={userRouteParamTypes}>
<Set wrap={[i18nContext, BlogContext, BlogLayout]}>
<Route path="/{language?:lang}" page={HomePage} name="home" />
<Route path="/{language?:lang}/about" page={AboutPage} name="about" />
<Route path="/{language?:lang}/contact" page={ContactPage} name="contact" />
</Set>
</Router>
```
If you navigated to /de/about you'd get the About page in German, if you navigated to /about you'd get it in whatever default language was configured.
## Challenges
The biggest challenge is probably detecting if an optional parameter was passed or not. Like if we just had this
```jsx
<Route path="/{opt?}" page={HomePage} name="home" />
<Route path="/{opt?}/about" page={AboutPage} name="about" />
```
When someone goes to /about, is it HomePage with `opt` set to "about", or is it About page with `opt` undefined?
It might also not handle 404s as nicely as it would otherwise. If someone goes to /aboot currently that would be a 404. Now it would be a valid navigation to the Home page, with `opt` set to "aboot"
For now, what it’s possible is to use query string parameter (https://example.com/about?lang=ko-KR ), or require the language on every subpath,
<Route path="/{lang:String}/about" page={aboutPage} name="aboutPage" />
Otherwise, yarn rw setup i18n give you everything to start using react-i18next
You will need to use the subpath prop to update the i18n hooki18n.changeLanguage(lang)
1 Like
Is it possible to use SSR with the provided method?
Ok, I think this is the best middle ground we can do now:
Is it possible to use routes to retrieve the current working directory (pathname)?