Next.js router locale issue

I have set up some locales for our app which are uk and us. For the blog we can have either us/blog or just /blog for the uk locale.

When I switch to us like so: (locale = “us”)

const handleRoute = (locale) => router.push(`${locale}${router.asPath}`)

the url gets correctly updated to have us/ prepended.

When I switch back to uk using handleRoute (locale= “”), it stays on us, although router.asPathis equal to /blog

Full component:

export const CountrySelector: React.FC = () => {
  const router = useRouter()
  const [selectedValue, setSelectedValue] = useState<string>(router.locale)

  const handleOnChange = (countryValue) => {
    setSelectedValue(countryValue)
  }

  const handleRoute = (locale) => router.push(`${locale}${router.asPath}`)

  const selectedValueLoweredCase = selectedValue.toLowerCase()

  const getCountryImageUrl = (countryLabel: string): string =>
    `/images/flag-${countryLabel}-sm.png`

  const getImageComponent = (countryLabel: string) => (
    <Image
      htmlWidth="25px"
      src={getCountryImageUrl(countryLabel)}
      alt={selectedValueLoweredCase}
    />
  )

  return (
    <>
      <div data-testid="country-selector">
        {console.log(router)}
        <Menu>
          <MenuButton
            as={Button}
            variant="countrySelector"
            rightIcon={<TriangleDownIcon marginTop="-6px" />}
          >
            <Flex align="baseline">
              <Box
                marginRight="12px"
                display={selectedValueLoweredCase === "us" ? "none" : "block"}
              >
                {getImageComponent("uk")}
              </Box>

              <Box
                marginRight="12px"
                display={selectedValueLoweredCase === "uk" ? "none" : "block"}
              >
                {getImageComponent("us")}
              </Box>
              <Box color={colors.black["100"]}>{selectedValue}</Box>
            </Flex>
          </MenuButton>
          <MenuList padding="0" borderRadius="0">
            <MenuOptionGroup
              onChange={(countryValue) => handleOnChange(countryValue)}
              defaultValue={selectedValue}
              type="radio"
            >
              <MenuItemOption value="UK" color="#000">
                <Flex align="baseline">
                  <Box marginRight="10px">{getImageComponent("uk")}</Box>
                  <Box
                    onClick={() => handleRoute("")}
                    textTransform="uppercase"
                    color={colors.black["100"]}
                  >
                    united kingdom
                  </Box>
                </Flex>
              </MenuItemOption>
              <MenuItemOption value="US">
                <Flex align="baseline">
                  <Box marginRight="10px">{getImageComponent("us")}</Box>
                  <Box
                    onClick={() => handleRoute("us")}
                    textTransform="uppercase"
                    color={colors.black["100"]}
                  >
                    united states
                  </Box>
                </Flex>
              </MenuItemOption>
            </MenuOptionGroup>
          </MenuList>
        </Menu>
      </div>
    </>
  )
}

nextConfig.js:

...
  i18n: {
    localeDetection: false,
    locales: getRegions(), // ["uk", "us"]
    defaultLocale: getDefaultRegion(), // "uk"
  },
...

Answer

When routing using localized routes, you need to specify the locale by including additional options in the router.push call.

In your specific case, you can either do it by passing the desired locale in the options, and omitting it from the path:

const handleRoute = (locale) => router.push(router.asPath, router.asPath, { locale: locale })

Or specify it in the path directly but setting locale to false:

const handleRoute = (locale) => router.push(`${locale}${router.asPath}`, `${locale}${router.asPath}`, { locale: false })

Note that in both cases you’ll need to pass the extra second param as so that the options object can be passed too.