如何用XAMPP部署Next.js项目？构建后访问显示文件列表

问题原因 #

你直接将.next目录放到XAMPP的静态文件目录中，而.next是Next.js的SSR构建产物，需要Node.js服务解析路由和处理动态逻辑，Apache会将其视为普通文件目录，因此显示文件列表而非运行项目。

方案1：导出纯静态HTML（适合无动态SSR/API需求的项目） #

这是最简单的方式，将Next.js项目预渲染为纯静态资源，无需Node.js服务：

1. 修改项目根目录的next.config.js，添加静态导出配置和子路径设置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  basePath: '/safar', // 对应你的子路径/safar
}

module.exports = nextConfig

2. 删除package.json中的"homepage"字段，Next.js通过basePath处理子路径。
3. 重新执行构建命令：

npm run build

构建完成后，项目根目录会生成out文件夹，这是纯静态的产物。
4. 将out文件夹内的所有内容复制到XAMPP的htdocs/safar目录下。
5. 启动XAMPP的Apache服务，访问http://localhost/safar/即可正常运行项目。

方案2：配合Node.js运行Next.js生产服务（支持SSR/API路由） #

如果你的项目依赖动态功能（比如API路由、SSR页面），需要用反向代理让Apache转发请求到Next.js的Node服务：

1. 确保package.json保留默认的启动脚本：

"scripts": {
  "build": "next build",
  "start": "next start"
}

2. 将整个Next.js项目（包括.next、package.json、node_modules）放到XAMPP的某个目录（比如C:/xampp/htdocs/safar，注意不要让Apache直接暴露源码）。
3. 打开命令行，进入项目目录，启动Next.js生产服务：

npm run start -- -p 3000

（-p 3000指定服务端口为3000，可根据需要修改）
4. 配置Apache反向代理：

• 打开XAMPP的httpd.conf，确保启用以下模块（去掉前面的注释）：

  LoadModule proxy_module modules/mod_proxy.so
  LoadModule proxy_http_module modules/mod_proxy_http.so
  

• 打开httpd-vhosts.conf，添加虚拟主机配置：

  <VirtualHost *:80>
      ServerName localhost
      DocumentRoot "C:/xampp/htdocs"
      <Directory "C:/xampp/htdocs">
          AllowOverride All
          Require all granted
      </Directory>
  
      # 将/safar路径的请求转发到Next.js服务
      ProxyPass /safar http://localhost:3000/safar
      ProxyPassReverse /safar http://localhost:3000/safar
  </VirtualHost>
  

• 注意：如果在next.config.js中设置了basePath: '/safar'，则上述配置中的路径要对应；若未设置，直接转发到http://localhost:3000即可。

5. 重启Apache服务，访问http://localhost/safar即可访问Next.js项目。

注意事项 #

• 静态导出方式不支持API路由、SSR页面、增量静态再生（ISR）等动态功能，仅适合纯静态展示的项目。
• 使用反向代理方式时，需确保本地已安装Node.js，且项目的node_modules已通过npm install安装完成。

内容的提问来源于stack exchange，提问作者Sayed Hassan Hussaini