如何在WordPress主题中部署Next.js静态导出文件？

问题描述 #

尝试在WordPress主题文件夹中部署Next.js静态导出文件，当前使用的.htaccess规则仅在根目录及一级子目录生效，二级子目录和带尾斜杠的路径无法正常访问，具体测试结果如下：

原.htaccess代码：

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteRule ^$ /wp-content/themes/mytheme/next/index.html [L]
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_URI} !^/wp-content/themes/mytheme/next/

RewriteRule ^(.*)$ /wp-content/themes/mytheme/next/$1
RewriteRule ^([^\.]+)$ $1.html
</IfModule>

问题原因 #

1. 带尾斜杠的路径：被Apache判定为目录请求，触发!-d条件失效，无法进入重写逻辑，导致403权限错误。
2. 二级路径处理：原规则中两条RewriteRule未正确串联，二级路径重写后无法正确追加.html后缀，导致404。

修复后的.htaccess规则 #

<IfModule mod_rewrite.c>
RewriteEngine On

# 1. 移除路径末尾的斜杠，避免目录请求判定（301永久重定向）
RewriteRule ^(.*)/$ $1 [L,R=301]

# 2. 根目录直接映射到Next.js的index.html
RewriteRule ^$ /wp-content/themes/mytheme/next/index.html [L]

# 3. 仅当请求的文件/目录不存在时，执行后续重写
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f

# 4. 排除Next静态目录自身的请求，防止循环重写
RewriteCond %{REQUEST_URI} !^/wp-content/themes/mytheme/next/

# 5. 将所有请求直接映射到对应.html文件（支持多级路径）
RewriteRule ^(.*)$ /wp-content/themes/mytheme/next/$1.html [L]
</IfModule>

规则说明 #

• 移除尾斜杠：通过301重定向将带斜杠的路径转为无斜杠版本，统一请求格式，同时避免Apache将其识别为目录。
• 根目录映射：保留原逻辑，直接指向Next.js的首页文件。
• 文件/目录检查：确保仅当请求的资源不存在时才执行重写，不影响WordPress自身的静态文件和目录访问。
• 避免循环：排除Next静态目录的请求，防止重写规则无限循环。
• 多级路径支持：直接在重写时追加.html后缀，一级、二级甚至更深的路径都能正确映射到对应的静态文件。

MAMP开启RewriteLog调试方法 #

如果需要调试重写规则，可修改MAMP的Apache配置文件：

1. 打开/Applications/MAMP/conf/apache/httpd.conf
2. 找到并取消注释以下配置（如果没有则手动添加）：

   RewriteLog "/Applications/MAMP/logs/apache_rewrite.log"
   RewriteLogLevel 3
   

3. 重启MAMP的Apache服务，日志将输出到指定路径，可查看每一步重写的执行过程。

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