如何在同一网站中整合Laravel API与Next.js前端

下面是几种适配前后端独立开发场景的同域名整合部署方案：

方案一：Nginx反向代理（推荐，支持全功能） #

这是最常用的部署方式，通过Nginx将不同路径的请求转发到对应服务，实现同域名下前后端共存。

部署步骤 #

1. 部署Laravel API

   • 将Laravel代码上传至服务器，配置.env文件（设置数据库、APP_URL等参数）
   • 执行优化命令：

     composer install --optimize-autoloader --no-dev
     php artisan config:cache
     php artisan route:cache
     php artisan view:cache
     

   • 确保Laravel运行在http://localhost:8000（可通过php artisan serve或PHP-FPM配置启动）

2. 构建并部署Next.js前端

   • 在本地构建生产版本：

     npm run build
     

   • 将构建后的.next目录及项目文件上传至服务器，通过next start -p 3000启动服务（建议用PM2托管Node进程保证稳定性）

3. 配置Nginx反向代理
   编辑Nginx站点配置文件，添加以下规则：

   server {
       listen 80;
       server_name your-domain.com;
   
       # 转发API请求到Laravel
       location /api {
           proxy_pass http://localhost:8000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
       }
   
       # 转发其余请求到Next.js
       location / {
           proxy_pass http://localhost:3000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
   
           # 支持Next.js客户端路由
           try_files $uri $uri/ @nextjs;
       }
   
       location @nextjs {
           proxy_pass http://localhost:3000;
       }
   }
   

   重启Nginx服务使配置生效。

方案二：Next.js静态文件嵌入Laravel（轻量，适合纯静态前端） #

如果你的Next.js项目不需要SSR/SSG等服务端功能，可以将前端打包成纯静态文件，直接嵌入Laravel项目。

部署步骤 #

1. 构建Next.js静态文件
   在前端项目中执行：

   npm run build && npm run export
   

   生成的静态文件会存放在out目录。

2. 整合到Laravel
   将out目录下的所有文件复制到Laravel项目的public目录中。

3. 配置Laravel路由 fallback
   在routes/web.php中添加规则，确保所有非API请求都返回前端入口文件：

   // 保留API路由分组
   Route::prefix('api')->group(function () {
       // 你的API路由定义
   });
   
   // 所有非API请求转发到前端index.html
   Route::get('/{any}', function () {
       return file_get_contents(public_path('index.html'));
   })->where('any', '.*');
   

   完成后正常部署Laravel即可，无需额外运行Node服务。

开发阶段本地调试配置 #

本地开发时为避免跨域问题，可在Next.js中配置请求转发：

编辑next.config.js：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8000/api/:path*', // 指向Laravel本地服务地址
      },
    ];
  },
};

这样前端调用/api/xxx时，会自动转发到Laravel的本地API服务。

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