如何在主目录含WordPress的环境下部署Next.js项目至子目录？

先确认你的Next.js配置是否完全正确，再配合服务器路由规则调整，就能解决共存问题：

1. 完善Next.js配置文件（next.config.js） #

你已经设置了basePath和assetPrefix，但还要补全这几个关键配置：

• 确保basePath和assetPrefix值完全一致，比如子目录是/next-app，配置如下：

module.exports = {
  basePath: '/next-app',
  assetPrefix: '/next-app',
  trailingSlash: true, // 避免路由跳转时出现404，和WordPress的URL规则对齐
}

• 如果是静态导出模式（使用next export），需额外添加output配置：

module.exports = {
  // 上述配置
  output: 'export',
}

2. 部署静态文件到对应子目录 #

构建Next.js项目后，将生成的静态文件（静态导出用out目录，非静态导出用.next/static相关文件）放到服务器的对应子目录中。比如WordPress主目录是/var/www/html，就把Next.js的静态资源放到/var/www/html/next-app下，确保目录权限与WordPress一致。

3. 服务器路由规则配置（以Nginx为例） #

这是解决问题的核心，需要让/next-app路径的请求转发到Next.js，同时不干扰主目录的WordPress：
打开Nginx站点配置文件，在WordPress的location规则外添加：

location /next-app {
  alias /var/www/html/next-app;
  try_files $uri $uri/ /next-app/index.html;
}

# 确保静态资源缓存与加载正常
location /next-app/_next {
  alias /var/www/html/next-app/_next;
  expires 30d;
  add_header Cache-Control "public, immutable";
}

如果使用Apache，修改.htaccess，在WordPress的规则前添加：

RewriteRule ^next-app/(.*)$ /next-app/index.html [L]
RewriteRule ^next-app/_next/(.*)$ /next-app/_next/$1 [L]

4. 检查内部链接与资源引用 #

• Next.js内部链接必须使用next/link组件，无需手动拼接basePath，组件会自动处理：

import Link from 'next/link';

// 正确写法
<Link href="/about">About</Link>
// 不要手动添加basePath：<Link href="/next-app/about">About</Link>

• 图片、CSS等静态资源，若放在public目录，路径直接写/next-app/xxx.png，或使用next/image组件，它会自动适配basePath。

5. 测试验证 #

部署后先访问yourdomain.com/next-app，检查页面是否正常加载、静态资源（JS/CSS）路径是否正确；点击内部链接验证跳转是否在子目录内；同时确认主目录的WordPress站点不受影响。

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