Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

getServerSideProps or getStaticProps breaks client-side routing #1147

Open
awfulminded opened this issue Sep 22, 2023 · 0 comments
Open

getServerSideProps or getStaticProps breaks client-side routing #1147

awfulminded opened this issue Sep 22, 2023 · 0 comments

Comments

@awfulminded
Copy link

awfulminded commented Sep 22, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant