Next.js搜索页面本地正常，部署服务器后出现404错误

针对你这个Next.js搜索组件部署后出现404的问题，整理了几个核心原因和对应的修复步骤：

1. 路由参数未及时获取 + useEffect依赖缺失 #

Next.js客户端路由加载时，router.query.search可能初始为undefined，而你的useEffect依赖是空数组，只会在组件挂载时执行一次请求——这时候大概率还没拿到有效的搜索参数，发送的请求参数为空，后端可能直接返回404。

修复代码：
把search加入依赖数组，同时增加参数校验避免无效请求，还要加上错误捕获：

useEffect(()=>{
  // 搜索参数为空时直接返回，不发请求
  if (!search) return;
          
  async function torHeda (){
      const data = { search }
      const JSONdata = JSON.stringify(data)
      const endpoint = domain + 'api/vb1/search-post'
      const options = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSONdata,
      }
      try {
        const response = await fetch(endpoint, options)
        // 先检查响应状态，避免解析错误响应
        if (!response.ok) throw new Error(`请求失败：${response.status}`)
        const resData = await response.json();
        setSearchData(resData.data || [])
      } catch (err) {
        console.error('搜索请求出错:', err)
        // 请求失败时设置空状态，显示无结果提示
        setSearchData([])
      }
  }
  torHeda()
},[search]); // 新增search作为依赖，参数变化时重新请求

2. 部署环境下API端点配置错误 #

本地开发时domain可能指向localhost，但部署到服务器后，要确保：

• domain变量换成服务器的完整域名（比如https://your-server-domain.com/，注意末尾的斜杠）
• 后端的/api/vb1/search-post接口已经正确部署，并且可以通过该域名访问
• 如果前后端跨域部署，要确保后端配置了CORS允许前端域名访问

排查方法：
打开浏览器开发者工具的Network面板，查看搜索请求的URL是否正确，以及响应状态码和内容。

3. Next.js页面路由配置问题 #

确认SearchDetails组件的文件位置符合Next.js Pages Router规则：

• 如果访问路径是/search，文件要放在pages/search.js或pages/search/index.js
• 如果是动态路由（比如/search?keyword=xxx），确保页面文件在pages目录下能被正确识别

4. 静态导出的限制（如果用了next export） #

如果项目是用静态导出部署的，这种需要动态获取路由参数的页面可能无法正常工作，建议改用服务器端渲染（SSR），通过getServerSideProps在服务端获取数据：

示例代码（添加到组件外部）：

export async function getServerSideProps(context) {
  const { search } = context.query;
  let searchData = [];
  if (search) {
    try {
      const data = { search };
      const JSONdata = JSON.stringify(data);
      const endpoint = domain + 'api/vb1/search-post';
      const response = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSONdata,
      });
      if (response.ok) {
        const resData = await response.json();
        searchData = resData.data || [];
      }
    } catch (err) {
      console.error('服务端获取搜索数据失败:', err);
    }
  }
  return { props: { searchData } };
}

然后组件直接接收searchData props，不用再写useState和useEffect：

function SearchDetails({ searchData }) {
    const router = useRouter();
    const search = router.query.search;

    // 原渲染逻辑不变
}

5. 代码里的其他小问题 #

• map里的console.log(searchData)语法错误，要去掉外层大括号：

{searchData?.map(pageItem=>{
    console.log(pageItem); // 修正语法
    return <Cards key={pageItem?.id} title={pageItem?.title_bn} ... />;
})}

• 空结果判断可以简化，不用写立即执行函数：

{searchData?.length === 0 && (
  <div className="h-[10rem] flex justify-start items-center mx-48 md:mx-10">
    <h1 className='text-black text-3xl w-full dark:text-white md:text-base'>দুঃখিত আপনি যা খুঁজছেন তা খুঁজে পাওয়া যায়নি! পুনরায় অনুসন্ধান করুণ।</h1>
  </div>
)}

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