next-translate icon indicating copy to clipboard operation
next-translate copied to clipboard

getServerSideProps or getStaticProps breaks client-side routing

Open awfulminded opened this issue 1 year ago • 0 comments

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. image

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. image

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

awfulminded avatar Sep 22 '23 22:09 awfulminded