next-translate
next-translate copied to clipboard
getServerSideProps or getStaticProps breaks client-side routing
When routing to a dynamic route that utilizes getServerSideProps
or getStaticPaths
through the <Link />
component, the page displays in the default locale even when the URL clearly indicates another locale.
If you access this page directly (without using client-side routing), everything displays correctly without any issues. Additionally, if you hardcode the locale in the <Link />
component,
import Link from 'next/link'
export default function TestPage() {
return <Link href="/articles/78">Test Redirect</Link>
}
the redirect (based on the URL) appears to work correctly, but the page still displays in the default locale.
Furthermore, when hovering over the Link component, a prefetch for the page occurs, but by default, it displays in the default locale, even though the page is currently in another language.
I would like to clarify that this issue is present in all versions of Next.js
starting from 13.4.0
however, it is not present in this version. Therefore, I am not entirely sure if I have submitted the issue to the correct location."
dynamic router code with getStaticProps and getStaticPaths:
export const getStaticPaths: GetStaticPaths = async () => {
const res = await fetch(BASE_URL + `/blog/get/post/all`).then((r) =>
r.json()
)
const paths = res.data.map((el: IArticleProps) => {
return { params: { article_id: String(el.id) } }
})
return {
paths,
fallback: 'blocking',
}
}
export const getStaticProps: GetStaticProps = async ({ params }) => {
const articleId = params?.article_id
if (!articleId || Array.isArray(articleId)) return { notFound: true }
const res = await fetch(
BASE_URL + `/blog/get/post/by_id?post_id=${articleId}`
)
if (res.status !== 200) return { notFound: true }
const json = await res.json()
if (json.status !== 'success') {
return { notFound: true }
}
if (!json || !json.data) return { notFound: true }
return { props: { data: json.data } }
}
Im using Windows 11, node 20.5.1, npm 9.8.0
pacakges: "next": "13.5.2",
, "next-translate": "^2.5.3",
Next JS with /pages
router
Every .json
locales files are included, folder structure is correct and any other page works fine, except pages with getStaticProps
or getServerSideProps