Next.js+TypeScript项目重定向路径拼接错误问题求助

问题分析 #

当前在/en/profile页面执行重定向代码时，路径被错误拼接成/en/profile/en/dashboard，核心原因是重定向路径未被正确解析为根路径，被浏览器当作相对路径与当前页面路径拼接。

修复方案 #

针对App Router（Next.js 13+） #

• 服务器组件：确保从next/navigation导入官方redirect函数，同时检查localActive变量值为纯语言标识（如en，不含前导斜杠）：

  import { redirect } from 'next/navigation';
  
  async function ProfilePage() {
    const localActive = 'en';
    const id = '123';
    return redirect(`/${localActive}/dashboard/${id}`);
  }
  
  export default ProfilePage;
  

• 客户端组件：改用useRouter钩子的push方法实现根路径跳转：

  'use client';
  import { useRouter } from 'next/navigation';
  
  function ProfilePage() {
    const router = useRouter();
    const localActive = 'en';
    const id = '123';
  
    const handleRedirect = () => {
      router.push(`/${localActive}/dashboard/${id}`);
    };
  
    return <button onClick={handleRedirect}>跳转至仪表盘</button>;
  }
  
  export default ProfilePage;
  

针对Pages Router #

• 使用useRouter的push方法：

  import { useRouter } from 'next/router';
  
  function ProfilePage() {
    const router = useRouter();
    const localActive = 'en';
    const id = '123';
  
    const handleRedirect = () => {
      router.push(`/${localActive}/dashboard/${id}`);
    };
  
    return <button onClick={handleRedirect}>跳转至仪表盘</button>;
  }
  
  export default ProfilePage;
  

• 若在服务端渲染函数中重定向，使用redirect对象：

  export async function getServerSideProps(context) {
    const localActive = 'en';
    const id = '123';
    return {
      redirect: {
        destination: `/${localActive}/dashboard/${id}`,
        permanent: false,
      },
    };
  }
  
  function ProfilePage() {
    return <div>个人资料页</div>;
  }
  
  export default ProfilePage;
  

额外检查 #

确认localActive变量的值为纯语言标识（如en），不要包含前导斜杠，避免生成//en/dashboard/xxx这类无效路径导致浏览器解析异常。

内容的提问来源于stack exchange，提问作者Martí Castell