Next.js+Express对接RazorPay遇404及路由选择疑问求助

一、搞定/razorpay接口404错误 #

你的前端请求打不到Express服务器，多半是端口冲突或者请求路径配置不对，按下面的步骤排查就能解决：

1. 先确认端口与请求地址

   • Next.js默认启动端口是3000，而你的Express服务器用nodemon server/index.js启动，如果没手动指定端口，Express默认也会用3000——这直接导致两个服务端口冲突，其中一个根本启动不起来。
   • 解决办法：在server/index.js里给Express单独指定一个端口，比如：

     const PORT = process.env.PORT || 3001;
     app.listen(PORT, () => console.log(`Express服务跑在端口${PORT}啦`));
     

   • 前端调用接口时，要写全Express的地址，比如：

     // 在RoomBilling页面里的请求代码
     const response = await fetch('http://localhost:3001/razorpay');
     

2. 用Next.js代理优化请求（更优雅的方案）
   不想每次都写完整地址的话，在项目根目录创建next.config.js，配置代理转发：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     async rewrites() {
       return [
         {
           source: '/api/:path*',
           destination: 'http://localhost:3001/:path*', // 对应你的Express端口
         },
       ];
     },
   };
   
   module.exports = nextConfig;
   

   之后前端直接用fetch('/api/razorpay')就行，Next.js会自动把请求转发到Express的对应接口。

3. 检查Express路由的请求方法是否匹配
   别忽略这个细节：如果前端用POST请求，后端就得写app.post('/razorpay', ...)，要是写成GET肯定会404，前后端的请求方法必须一致。

二、关于路由与Express页面渲染的疑问 #

完全不需要用Express渲染/rooms页面！这里得先理清Next.js和Express的分工：

• Next.js是前端框架，自带完整的路由系统：只要你在pages/rooms.js（或者app/rooms目录）创建了页面文件，/rooms路由就自动生效，组件是客户端路由，在浏览器端直接切换页面，根本不需要经过后端。
• Express的角色是后端API服务器，只负责处理数据接口（比如你的/razorpay），页面路由的事儿完全轮不到它管。
• 你注释掉的server.get('/rooms')代码完全没必要，甚至会和Next.js的路由逻辑冲突——Next.js已经接管了页面的渲染和路由，Express凑过来反而添乱。

总结一句话：让Next.js管页面和客户端路由，Express只管API接口，分工明确就不会出问题啦！

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