Transition between locales on Dynamic Routes preserve default locale in getServerSideProps

MohammadShehadeh commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13
      eslint-config-next: 13.4.3
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which example does this report relate to?

Internationalization (i18n) / getServerSideProps / Pages router

const { locale, pathname, asPath, query, replace } = useRouter();

const changeLocale = () => {
    replace({ pathname, query }, asPath, {
        locale: nextLocalization.value,
    });
};

// pages/example/[slug].js
// getServerSideProps preserves locale default value
export const getServerSideProps = async ({ req, query, locale }) => {

// next.config.js
i18n: {
    locales: ['en', 'ar'],
    defaultLocale: 'en',
    localeDetection: false,
},

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When transitioning between locales on dynamic routes using next/router, the application reverts to the default locale instead of maintaining the selected locale in getServerSideProps

Expected Behavior

The application should maintain the selected locale when transitioning between locales on dynamic routes using next/router in getServerSideProps

To Reproduce

Create a Next.js application with multiple locales configured.
Set up a dynamic route that uses localized content.
Use next/router to transition between different locales while on the dynamic route.
Observe that the application switches back to the default locale in getServerSideProps instead of preserving the selected locale.

diginikkari commented 1 year ago

Same problem with getStaticProps. This broke between 13.4.12 -> 13.4.13

valentinev-celadon commented 1 year ago

the same issue

blanchak commented 1 year ago

Same issue if using next/link

fuxianwei commented 1 year ago

next 13.4.19 The problem remains

MonstraG commented 1 year ago

Just randomly checked next@13.4.20-canary13, that also doesn't work

UPD: it breaks after adding following empty middleware:

import { NextRequest, NextResponse } from "next/server";
export async function middleware(req: NextRequest) {
    return;
}
export const config = {
};

Uni2K commented 12 months ago

Same issue, it is fixed when removing the middleware.

Meemaw commented 10 months ago

Here is a reproducer https://github.com/meemaw/next-i18n that I think is directly caused due to this bug.

To reproduce:

yarn dev
Visit http://localhost:3000/
Click "to /es" ~ this will set NEXT_LOCALE cookie
Refresh the page and page crashes with ERR_TOO_MANY_REDIRECTS

mataspetrikas commented 10 months ago

@Meemaw this looks like a serious bug, I have encountered it when trying to update our codebase from next@13.4.19 to next@13.5.x. In my case the bug is reproducible only on the root path /, others like /some-page seem to work ok.

MohammadShehadeh commented 10 months ago

unfortunately this is still happening in next@14.0.1.

mataspetrikas commented 10 months ago

the bug is still in the next@14.0.2.

maulobo commented 8 months ago

I have the same problem here, some could fixed it? I'm ussing nextjs 14, and trying with next-transtale import React from 'react' import setLanguage from 'next-translate/setLanguage'

export default function ChangeLanguage() { return ( <button onClick={async () => await setLanguage('en')}>EN ) } this doesn't works too

MohammadShehadeh commented 6 months ago

still not working in next@14.1.0

vercel / next.js