Next JS与WordPress部署的URL路径配置问题

核心通过Apache的mod_rewrite重写规则实现，同时避免与原有WordPress站点的路由冲突，具体步骤如下：

1. 启用Apache必要模块 #

首先确保Apache开启重写、代理相关模块（静态导出的Next.js项目可跳过代理模块，但SSR模式必须启用）：

sudo a2enmod rewrite proxy proxy_http
sudo systemctl restart apache2

2. 修改站点配置文件 #

编辑你的域名配置文件（通常路径为/etc/apache2/sites-available/mydomain.com.conf），在<VirtualHost *:80>或<VirtualHost *:443>区块内添加规则，分两种场景处理：

场景一：Next.js为静态导出模式（构建文件已上传至/var/www/html/docs） #

情况A：指定部分页面支持双路径访问

比如仅让page1、page2支持mydomain.com/page1和mydomain.com/docs/page1：

RewriteEngine On

# 映射指定页面的根路径请求到/docs目录
RewriteRule ^/page1$ /docs/page1 [L]
RewriteRule ^/page1/(.*)$ /docs/page1/$1 [L]
RewriteRule ^/page2$ /docs/page2 [L]
RewriteRule ^/page2/(.*)$ /docs/page2/$1 [L]

# 保留原有/docs路径的访问规则
RewriteRule ^/docs/(.*)$ /docs/$1 [L]

# 保留WordPress原有重写规则（不要删除）
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

情况B：所有Next.js页面都支持双路径访问

需先排除WordPress核心路径（如wp-admin、wp-content等），避免干扰：

RewriteEngine On

# 排除WordPress核心路径，优先处理WP的请求
RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-content|wp-includes|index\.php|robots\.txt) [NC]
# 检查请求的文件/目录在WP根目录不存在，再转发到Next.js的/docs路径
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-d
RewriteRule ^/(.*)$ /docs/$1 [L]

# 保留WordPress原有重写规则
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

场景二：Next.js为SSR模式（需运行Node服务） #

假设Next.js服务运行在本地3000端口，需通过反向代理转发请求：

RewriteEngine On

# 根路径的Next.js请求代理到Node服务
RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-content|wp-includes|index\.php|robots\.txt) [NC]
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-f
RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_URI} !-d
RewriteRule ^/(.*)$ http://localhost:3000/docs/$1 [P,L]

# /docs路径的请求同样代理到Node服务
RewriteRule ^/docs/(.*)$ http://localhost:3000/docs/$1 [P,L]

# 保留WordPress原有重写规则
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

3. 验证配置并重启服务 #

# 检查配置语法是否正确
sudo apache2ctl configtest
# 重启Apache生效
sudo systemctl restart apache2

关键注意事项 #

• 静态导出的Next.js项目需在next.config.js中设置basePath: '/docs'，确保静态资源路径正确指向/docs目录；SSR模式同样需要配置该参数。
• 避免Next.js页面路径与WordPress的文章/页面路径重复，否则会优先匹配配置文件中先出现的规则。
• 测试前清除浏览器缓存，避免旧路由缓存影响结果。

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