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"

  },

...