Replies: 1 comment 4 replies
-
|
This can be handled with a parallel route that provides your general locale switcher by default, and for the blog category route is overridden with one that considers the localized slugs from your CMS. @frankspin89 implemented this on his personal website, see e.g. the locale switcher on https://www.frankspin.com/en/posts/this-was-2018 and also https://x.com/Frankspin/status/1867141556974895522. |
Beta Was this translation helpful? Give feedback.
-
|
@amannn Thanks, what do you mean with a parallel route? and what do you mean with "and for the blog category route is overridden with one that considers the localized slugs from your CMS."? |
Beta Was this translation helpful? Give feedback.
-
|
@frankspin89 Is your implementation by any chance available publicly to look at? |
Beta Was this translation helpful? Give feedback.
-
|
Just had a moment for this, so your app would be structured like this: Parallel routes essentially allow you to provide multiple "slots" in your layout where you can render different content for different pathnames. Where it gets interesting is that you can use different routing patterns to render content for the same page. So with this structure, the following components render for a given pathname:
Now, you can render both slots in your export default function RootLayout({
children,
locales
}) {
return (
<html ...>
<body>
{children}
{locales}
</body>
</html>
);
}The reason we're doing this is to render a default locale switcher in export default function LocaleSwitcherDefault() {
// Render localized links that work on all pages (typically with `usePathname` / `useParams`)
}… and replace it with a different one based on your category page at export default async function LocaleSwitcherCategory({params}) {
const {slug} = await params;
const category = await getCategory(slug);
// Render localized links based on the category ...
}It's a bit an advanced pattern, but you can certainly use it for this use case! Alternatively, if you're looking for something simpler, you can of course just redirect to |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
Uh oh!
There was an error while loading. Please reload this page.
-
I've been following the examples and most of my app is translatable now, there's just one thing I haven't found yet. Let's say I have a page
/blog/category/flowers, which in Dutch would be/nieuws/categorie/bloemen,I'm using my CMS/API to get the category (flowers).
Now when I'm on the English version, and I switch to Dutch, the path becomes
/nieuws/categorie/flowers. So the last part is not translated, which is normal because it comes from my CMS.I'm using the pathnames
How does one handle this use-case?
Beta Was this translation helpful? Give feedback.
All reactions