如何在现有Laravel项目特定路径下部署Next.js静态导出文件？

步骤1：配置Next.js静态导出的路径前缀 #

在Next.js项目根目录的next.config.js中添加以下配置，确保生成的静态资源和页面路径都基于/my-next-app前缀：

// next.config.js
module.exports = {
  basePath: '/my-next-app',
  assetPrefix: '/my-next-app/',
  output: 'export',
}

运行npm run build构建项目，生成的静态文件会存放在out目录中。

步骤2：将静态文件部署到Laravel的public目录 #

在Laravel项目的public文件夹下创建my-next-app子目录，将Next.jsout目录中的所有文件（包括子文件夹）复制到这个目录中。

步骤3：配置Laravel路由匹配Next.js多页面 #

在Laravel的routes/web.php中添加路由规则，匹配所有/my-next-app前缀的请求，并返回对应的静态HTML文件：

// routes/web.php
Route::get('/my-next-app/{page?}', function ($page = 'index') {
    $targetFile = public_path("my-next-app/{$page}.html");

    // 优先匹配对应页面文件
    if (file_exists($targetFile)) {
        return response()->file($targetFile);
    }

    // 处理嵌套路由（如 /my-next-app/dashboard/settings）
    $nestedFile = public_path("my-next-app/{$page}/index.html");
    if (file_exists($nestedFile)) {
        return response()->file($nestedFile);
    }

    // 返回Next.js的404页面（如果存在），否则抛出404
    $notFoundFile = public_path("my-next-app/404.html");
    return file_exists($notFoundFile) ? response()->file($notFoundFile) : abort(404);
})->where('page', '.*');

关键注意事项 #

• 若Next.js包含动态路由，需通过getStaticPaths预生成对应的静态HTML文件，否则Laravel无法找到对应页面。
• 确保Next.js的basePath与Laravel的路由前缀完全一致，避免资源路径错误。
• 验证Laravelpublic/my-next-app目录的文件权限，确保Web服务器可以读取这些文件。

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