NextJS本地化：动态路由下切换语言不破坏URL的解决方案

我在基于Next.js的项目中使用内置本地化方案时遇到一个问题：当处于动态路由页面（例如 http://localhost:3000/p/4829/）时，点击全局footer里的语言切换Link组件，URL会变成 http://localhost:3000/en/p/[post_id]/，而不是预期的 /en/p/4829/。

参考同样用Next.js搭建的gamerpay.gg网站，它在动态路由下切换语言不会破坏URL结构，但Next.js官方文档里暂时没有简便的解决方案，因此向技术社区求助。

更新：初步解决思路 #

我发现通过Next.js Router中的asPath属性，将其传入Link的href参数后，切换语言时可以保持正确的页面路径，目前正在测试验证这个方案的有效性。

初始语言切换代码 #

<Link href="" locale="en">
      <a className={styles.flag} id="lang_switcher">
         <Image src="/flags/en.png" height={20} width={20} layout="fixed" />
      </a> 
 </Link>

测试用代码 #

<Link href={router.asPath} locale="en">
    <a className={styles.flag} id="lang_switcher">
        <Image src="/flags/en.png" height={20} width={20} layout="fixed" />
    </a> 
</Link>

内容的提问来源于stack exchange，提问作者Lato