如何在XAMPP上部署NextJS应用？本地跨设备访问问题求助

核心原因 #

React构建后生成纯静态HTML/CSS/JS文件，可直接放到XAMPP的htdocs目录运行；但NextJS默认构建的是依赖Node.js运行时的应用，直接放入htdocs只会显示文件夹结构，无法正常启动。必须先将NextJS导出为纯静态站点，再部署到XAMPP。

具体操作步骤 #

1. 配置NextJS静态导出规则 #

在项目根目录的next.config.js中添加静态导出配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  // 若需部署到XAMPP的子文件夹，可添加basePath配置，示例：
  // basePath: '/my-next-app',
}

module.exports = nextConfig

2. 构建并导出静态文件 #

在项目根目录执行命令：

npm run build

执行完成后，项目根目录会生成out文件夹，里面就是可直接部署的纯静态站点文件。

3. 部署到XAMPP #

• 打开XAMPP控制面板，启动Apache服务。
• 找到XAMPP的htdocs目录（Windows默认路径：C:\xampp\htdocs；Linux/Mac默认路径：/opt/lampp/htdocs）。
• 将out文件夹内的所有文件（而非整个out文件夹）复制到htdocs下的目标位置，比如htdocs/my-next-app。

4. 实现同一网络计算机名称访问 #

• 确认你的电脑和其他设备处于同一局域网。
• 获取你的计算机名称：Windows通过「此电脑>属性」查看；Mac/Linux在终端执行hostname命令查看。
• 其他设备访问时，在浏览器输入：http://你的计算机名称/my-next-app（若直接部署到htdocs根目录，输入http://你的计算机名称即可）。

常见问题排查 #

• 仍显示文件夹结构：检查Apache的目录索引设置，确保index.html是默认首页。可在XAMPP的httpd.conf文件中确认DirectoryIndex index.html index.php已包含index.html。
• 访问出现404错误：若项目使用了动态路由，需在next.config.js中添加trailingSlash: true配置，并确保所有动态页面已预生成；若未使用动态路由，检查文件路径是否正确。

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