title: Next.js router locale issue
body: <p>I have set up some locales for our app which are <code>uk</code> and <code>us</code>. For the blog we can have either <code>us/blog</code> or just <code>/blog</code> for the <code>uk</code> locale.</p>
  <p>When I switch to <code>us</code> like so: (locale = &quot;us&quot;)</p>
  <pre><code>const handleRoute = (locale) =&gt; router.push(`${locale}${router.asPath}`)
  </code></pre>
  <p>the url gets correctly updated to have <code>us/</code> prepended.</p>
  <p>When I switch back to <code>uk</code> using <code>handleRoute</code> (locale= &quot;&quot;), it stays on <code>us</code>, although <code>router.asPath</code>is equal to <code>/blog</code></p>
  <p>Full component:</p>
  <pre><code>export const CountrySelector: React.FC = () =&gt; {
    const router = useRouter()
    const [selectedValue, setSelectedValue] = useState&lt;string&gt;(router.locale)
  
    const handleOnChange = (countryValue) =&gt; {
      setSelectedValue(countryValue)
    }
  
    const handleRoute = (locale) =&gt; router.push(`${locale}${router.asPath}`)
  
    const selectedValueLoweredCase = selectedValue.toLowerCase()
  
    const getCountryImageUrl = (countryLabel: string): string =&gt;
      `/images/flag-${countryLabel}-sm.png`
  
    const getImageComponent = (countryLabel: string) =&gt; (
      &lt;Image
        htmlWidth=&quot;25px&quot;
        src={getCountryImageUrl(countryLabel)}
        alt={selectedValueLoweredCase}
      /&gt;
    )
  
    return (
      &lt;&gt;
        &lt;div data-testid=&quot;country-selector&quot;&gt;
          {console.log(router)}
          &lt;Menu&gt;
            &lt;MenuButton
              as={Button}
              variant=&quot;countrySelector&quot;
              rightIcon={&lt;TriangleDownIcon marginTop=&quot;-6px&quot; /&gt;}
            &gt;
              &lt;Flex align=&quot;baseline&quot;&gt;
                &lt;Box
                  marginRight=&quot;12px&quot;
                  display={selectedValueLoweredCase === &quot;us&quot; ? &quot;none&quot; : &quot;block&quot;}
                &gt;
                  {getImageComponent(&quot;uk&quot;)}
                &lt;/Box&gt;
  
                &lt;Box
                  marginRight=&quot;12px&quot;
                  display={selectedValueLoweredCase === &quot;uk&quot; ? &quot;none&quot; : &quot;block&quot;}
                &gt;
                  {getImageComponent(&quot;us&quot;)}
                &lt;/Box&gt;
                &lt;Box color={colors.black[&quot;100&quot;]}&gt;{selectedValue}&lt;/Box&gt;
              &lt;/Flex&gt;
            &lt;/MenuButton&gt;
            &lt;MenuList padding=&quot;0&quot; borderRadius=&quot;0&quot;&gt;
              &lt;MenuOptionGroup
                onChange={(countryValue) =&gt; handleOnChange(countryValue)}
                defaultValue={selectedValue}
                type=&quot;radio&quot;
              &gt;
                &lt;MenuItemOption value=&quot;UK&quot; color=&quot;#000&quot;&gt;
                  &lt;Flex align=&quot;baseline&quot;&gt;
                    &lt;Box marginRight=&quot;10px&quot;&gt;{getImageComponent(&quot;uk&quot;)}&lt;/Box&gt;
                    &lt;Box
                      onClick={() =&gt; handleRoute(&quot;&quot;)}
                      textTransform=&quot;uppercase&quot;
                      color={colors.black[&quot;100&quot;]}
                    &gt;
                      united kingdom
                    &lt;/Box&gt;
                  &lt;/Flex&gt;
                &lt;/MenuItemOption&gt;
                &lt;MenuItemOption value=&quot;US&quot;&gt;
                  &lt;Flex align=&quot;baseline&quot;&gt;
                    &lt;Box marginRight=&quot;10px&quot;&gt;{getImageComponent(&quot;us&quot;)}&lt;/Box&gt;
                    &lt;Box
                      onClick={() =&gt; handleRoute(&quot;us&quot;)}
                      textTransform=&quot;uppercase&quot;
                      color={colors.black[&quot;100&quot;]}
                    &gt;
                      united states
                    &lt;/Box&gt;
                  &lt;/Flex&gt;
                &lt;/MenuItemOption&gt;
              &lt;/MenuOptionGroup&gt;
            &lt;/MenuList&gt;
          &lt;/Menu&gt;
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>nextConfig.js:</p>
  <pre><code>...
    i18n: {
      localeDetection: false,
      locales: getRegions(), // [&quot;uk&quot;, &quot;us&quot;]
      defaultLocale: getDefaultRegion(), // &quot;uk&quot;
    },
  ...
  </code></pre>