NextJS locale change with dynamic routes - next.js

Question

Locale change works well in my next.js app, except for with dynamic routes. In the browser address bar I do get the transition from http://localhost:3000/client/home/profile to http://localhost:3000/de/client/home/profile, but the page gives a 404 error...
My dynamic page [tab].tsx
import router from 'next/router'
import dynamic from 'next/dynamic'
import styled from 'styled-components'
import {useTranslation, i18n} from 'next-i18next'
import {useEffect, useState, useContext} from 'react'
import {serverSideTranslations} from 'next-i18next/serverSideTranslations'
import Layout from 'layouts'
import {DB, PATH} from 'utils/constants'
import {GlobalContext} from 'utils/contexts'
import {Tabs, LanguageSelector} from 'components/ui'
import {ChartData, ChartDataPoint, UsageStats} from 'utils/types'
import {getData, toTitleCase, isClient, emailVerified} from 'utils/helpers'
const Docs = dynamic(() => import('components/client/docs'))
const Stats = dynamic(() => import('components/client/stats'))
const Profile = dynamic(() => import('components/client/profile'))
const Tab = ({tab}) => {
const {t} = useTranslation()
return (
<Layout>
<LanguageSelector />
<Tabs
basePath={'/client/home'}
tab={tab}
tabs={[
{
slug: 'stats',
label: t('client.home.stats'),
component: <Stats data={data} />
},
{
slug: 'profile',
label: t('client.home.profile'),
component: <Profile client={client} />
},
{
slug: 'docs',
label: t('client.home.docs'),
component: <Docs />
}
]}
/>
</Layout>
)
}
export const getStaticProps = async ({params, locale}) => ({
props: {
tab: params.tab,
...await serverSideTranslations(locale)
}
})
export const getStaticPaths = async () => {
return {
paths: [
{params: {tab: 'stats'}},
{params: {tab: 'profile'}},
{params: {tab: 'docs'}}
],
fallback: false
}
}
export default Tab
I do the locale switching in my LanguageSelector.tsx:
import router from 'next/router'
import {i18n} from 'next-i18next'
import {useState, useEffect} from 'react'
import {Select} from '.'
import {LANGUAGES} from 'utils/constants'
export const LanguageSelector = () => {
const [locale, setLocale] = useState(i18n.language)
useEffect(() => {
const {pathname, asPath, query} = router
router.push({pathname, query}, asPath, {locale})
}, [locale])
return (
<Select
borderless
isSearchable={false}
value={i18n.language}
options={LANGUAGES.filter(language => language !== i18n.language)}
onValueChange={setLocale}
/>
)
}
Any ideas where my mistake is?

Answer 1

If you are using getStaticPaths with in-build Next.js i18n routing then you also need to return locale key with your paths, like that:
export const getStaticPaths = ({ locales }) => {
return {
paths: [
{ params: { slug: 'post-1' }, locale: 'en-US' },
{ params: { slug: 'post-1' }, locale: 'fr' },
],
fallback: true,
}
}
More info in the docs