NextJs 14 App Router构建报错：/quiz/result路径导出失败求助

以下是针对你问题的排查方向和解决方案：

1. 检查Result组件的兼容性与导出 #

你的page.tsx是客户端组件（标记了'use client'），如果导入的./Result是服务器组件，Next.js 14会禁止这种跨类型组件的直接导入。

• 打开Result.tsx，确认它是否使用了仅服务器端可用的API（如fs、getServerSession等），如果是，给Result.tsx顶部加上'use client'标记；
• 验证Result组件的导出语法：如果是命名导出，需修改导入语句为import { Result } from './Result'，确保与导出方式匹配。

2. 强制页面动态渲染 #

开发模式下useSearchParams可正常工作，但构建时Next.js会尝试静态渲染页面，而静态渲染无法获取URL查询参数，可能导致导出错误。在page.tsx中添加动态渲染配置：

'use client';

import { useSearchParams } from 'next/navigation';
import Result from './Result';

// 强制页面动态渲染，避免静态构建时的参数获取问题
export const dynamic = 'force-dynamic';

export default function QuizResultPage() {
  const searchParams = useSearchParams();
  const quizId = searchParams?.get('quizId');
  const token = searchParams?.get('token');

  if (!quizId || !token) {
    return <h1>Quiz Result page</h1>;
  }

  return <Result quizId={quizId} token={token} />;
}

3. 验证路由结构 #

确认你的文件夹结构严格符合App Router规则：/(index)/quiz/result/page.tsx的层级是否正确？检查是否存在其他路由组下的同名路由文件，避免路由冲突导致构建失败。

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