Next.js13客户端组件传数据到服务端组件生产环境报404

1. 检查路由文件命名规范 #

Next.js13 App Router要求页面组件必须命名为page.tsx，且放在对应路由目录下。确认你的文章页面路径是/app/article/page.tsx，而非自定义命名的Article.tsx或其他名称——命名错误会导致build阶段无法识别该路由，生产环境直接返回404。

2. 修复服务端组件searchParams类型与处理 #

服务端组件接收searchParams时，需明确其可选性（生产环境中searchParams可能为undefined），避免TypeScript类型检查失败导致build异常：

// /app/article/page.tsx
export default function Article({
  searchParams,
}: {
  searchParams?: { [key: string]: string | string[] | undefined };
}) {
  // 处理参数前先做存在性判断
  const articleId = searchParams?.id;
  if (!articleId) {
    return <div>无效的文章参数</div>;
  }
  // 其他业务逻辑
}

3. 确保客户端跳转路径与参数格式正确 #

客户端组件ReadMoreButton中使用useRouter跳转时，必须使用绝对路径，并正确序列化参数：

// 客户端组件 ReadMoreButton.tsx
'use client';
import { useRouter } from 'next/navigation';

export default function ReadMoreButton({ articleData }) {
  const router = useRouter();

  const handleNavigate = () => {
    // 用URLSearchParams序列化参数，避免手动拼接出现格式错误
    const params = new URLSearchParams(articleData).toString();
    router.push(`/article?${params}`);
  };

  return <button onClick={handleNavigate}>查看全文</button>;
}

4. 禁用静态生成，强制动态渲染 #

如果你的Article页面依赖动态searchParams，需在page.tsx顶部添加配置，强制页面动态渲染，避免build阶段尝试预生成静态页面失败：

// /app/article/page.tsx
export const dynamic = 'force-dynamic'; // 强制动态渲染

export default function Article({ searchParams }) {
  // ...业务逻辑
}

5. 检查路由配置冲突 #

检查next.config.js或vercel.json中的重写/重定向规则，确保没有拦截/article路径的配置。例如，若存在如下错误配置需移除：

// next.config.js 错误示例，需删除或修改
module.exports = {
  async rewrites() {
    return [
      { source: '/article', destination: '/404' }, // 错误的重写规则
    ];
  },
};

完成以上步骤后，重新执行next build验证，再部署到Vercel即可解决生产环境404问题。

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