518651 2023-12-11 09:39 采纳率: 40%
浏览 12
已结题

Next.JS 静态导出路由

问题背景:
因tauri库需要,已将Next.JS项目配置为: output: 'export' 静态导出,导致动态路由API无法使用,在Next.JS 文档中构建静态API,失败

问题描述:
静态导出下的API路由定义

img


调用测试:

img


返回HTTP代码:500
Next.JS报错:

img

我需要怎样的回复:
满足Next,JS 配置output: 'export' 静态导出 情况下,恢复API的调用
1.题主的代码能正常请求
2.重新提出新解决方案

注:Next 版本:

img

  • 写回答

18条回答 默认 最新

  • 专家-赤兔[在线] 2023-12-11 09:40
    关注
    获得0.60元问题酬金

    引自强大而免费的微信小程序:皆我百晓生

    静态导出的 Next.js 项目不支持使用动态路由 API。动态路由 API 只能在服务器端渲染 (SSR) 模式下使用。

    在静态导出时,所有的页面和路由都会在构建时生成,并以静态文件的形式输出。这意味着服务端代码不会运行,所以无法处理动态路由 API。

    解决方案是使用客户端发送请求,而不是通过 API 路由处理。你可以将静态页面放置在 /export 目录下,然后在客户端代码中通过 AJAX 或 Fetch 发送请求来模拟 API 请求。

    示例代码如下:

    import axios from 'axios';
    
    function App() {
      const handleLogin = async () => {
        const response = await axios.post('/api/login', { id: 'Test' });
        console.log(response.data);
      };
    
      return (
        <div>
          <button onClick={handleLogin}>Login</button>
        </div>
      );
    }
    
    export default App;
    

    这样,当点击 "Login" 按钮时,会发送一个 POST 请求到 /api/login,然后在控制台输出响应数据。

    请注意,这只是一种替代方案,以模拟动态路由 API 的效果。如果你需要在静态导出中使用真正的动态路由,可以尝试使用 Next.js 的服务器端渲染模式。

    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 12月19日
  • 创建了问题 12月11日

悬赏问题

  • ¥50 关于#微信小程序#的问题:微信小程序支持h5实现webrtc h264 h265低延迟传输渲染,能付费帮我们解决一下吗
  • ¥20 请问ansys License manager 这个问题如何解决
  • ¥15 memory.limit()' is no longer supported
  • ¥15 基于stm32f4产生两路pwm信号并可由串口通信调节
  • ¥15 C++/QT设置函数调用条件(多个功能调用同一,且各自调用条件不同)
  • ¥15 UE5样条线生成的网格UV问题
  • ¥15 如何用最短的时间大致看懂springboot+vue的项目
  • ¥15 (有偿)懂数值分析和含时变参数微分方程的来
  • ¥15 abaqus随机生成二维颗粒
  • ¥15 安装ansys许可证管理器时出现了这个问题,如何解决?