Next.js静态站点（next export）实现表单提交后定向至对应感谢页

问题原因分析 #

你之前使用的pages/[...thankYou].js是catch-all（全捕获）路由，它会匹配所有未被其他路由覆盖的路径，比如随机输入的/abc/thankYou甚至/xyz，这就导致错误URL也会跳转到感谢页；而静态导出（next export）时，这类路由如果未配置正确的预渲染规则，会出现错误路径跳转到首页的异常。

下面针对你的场景提供两种可行方案：

方案一：逐个创建精准匹配的感谢页（适合页面数量少的情况） #

这种方式最直观，完全避免路由匹配歧义：

• 在每个表单页面的目录下单独创建thankYou.js文件，比如：

  • pages/pageA/thankYou.js
  • pages/pageB/thankYou.js
  • pages/folder/pageX/thankYou.js
  • 其他页面依此类推

• 每个thankYou.js只需编写基础的感谢页组件：

  export default function ThankYou() {
    return (
      <div className="thank-you-page">
        <h1>提交成功！感谢您的参与</h1>
      </div>
    );
  }
  

• 表单提交成功后，使用next/router的push方法跳转到对应路径：

  import { useRouter } from 'next/router';
  
  export default function PageA() {
    const router = useRouter();
  
    const handleSubmit = async (e) => {
      e.preventDefault();
      // 处理API请求逻辑
      const submitRes = await fetch('/api/your-submit-api', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: { 'Content-Type': 'application/json' }
      });
  
      if (submitRes.ok) {
        router.push('/pageA/thankYou');
      }
    };
  
    return <form onSubmit={handleSubmit}>{/* 表单内容 */}</form>;
  }
  

• 执行next export后，所有感谢页会被预渲染为静态文件，错误URL会正常返回404页面。

方案二：动态路由+预渲染合法路径（适合页面数量多的情况） #

如果页面数量较多，不想逐个创建感谢页，可以用动态路由配合getStaticPaths预渲染所有合法路径：

1. 创建动态路由文件 #

• 针对根目录下的页面（pageA/pageB/pageC）：创建pages/[page]/thankYou.js
• 针对folder下的页面（pageX/pageY/pageZ）：创建pages/folder/[page]/thankYou.js

2. 编写根目录动态感谢页逻辑 #

export default function RootThankYou({ pageName }) {
  return <h1>{pageName}页面提交成功，感谢您！</h1>;
}

// 预渲染所有合法的根目录页面感谢路径
export async function getStaticPaths() {
  // 列出所有根目录下的表单页面名称
  const validRootPages = ['pageA', 'pageB', 'pageC'];
  const paths = validRootPages.map(page => ({
    params: { page }
  }));

  // fallback设为false，未匹配的路径直接返回404
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return { props: { pageName: params.page } };
}

3. 编写folder目录动态感谢页逻辑 #

export default function FolderThankYou({ pageName }) {
  return <h1>folder/{pageName}页面提交成功，感谢您！</h1>;
}

export async function getStaticPaths() {
  const validFolderPages = ['pageX', 'pageY', 'pageZ'];
  const paths = validFolderPages.map(page => ({
    params: { page }
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return { props: { pageName: params.page } };
}

4. 表单提交跳转 #

表单页面提交成功后，直接跳转到对应动态路径即可，比如pageX的表单：

import { useRouter } from 'next/router';

export default function PageX() {
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const submitRes = await fetch('/api/your-submit-api', { /* 请求配置 */ });
    
    if (submitRes.ok) {
      router.push('/folder/pageX/thankYou');
    }
  };

  return <form onSubmit={handleSubmit}>{/* 表单内容 */}</form>;
}

关键注意事项 #

• 使用next export时，动态路由必须通过getStaticPaths指定所有需要预渲染的路径，否则未匹配的路径会返回404（这正是我们需要的错误路径处理逻辑）。
• 务必将fallback设为false，确保不在预渲染列表中的路径直接返回404，不会触发动态页面渲染。

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