如何用Headless NextJS替换Woocommerce默认前端并保留原有后台访问？

核心思路是通过反向代理（以Nginx为例）将主域名下大部分请求转发给NextJS应用，仅保留/wp-admin、/graphql、/checkout路径指向原有WordPress/Woocommerce，无需迁移WP到子域名。

1. Nginx反向代理配置 #

修改Nginx的站点配置文件（通常位于/etc/nginx/sites-available/mywebwoo.com），添加以下规则：

server {
    listen 443 ssl;
    server_name mywebwoo.com;

    # SSL证书配置（根据实际证书路径调整）
    ssl_certificate /etc/letsencrypt/live/mywebwoo.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mywebwoo.com/privkey.pem;

    # 主路径转发给NextJS应用（假设NextJS运行在本地3000端口）
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # 保留Woocommerce默认结账页
    location /checkout {
        try_files $uri $uri/ /index.php?$args;
    }

    # 保留WordPress后台
    location /wp-admin {
        try_files $uri $uri/ /index.php?$args;
    }

    # 保留GraphQL接口
    location /graphql {
        try_files $uri $uri/ /index.php?$args;
    }

    # 处理WordPress静态资源（确保后台、结账页样式/脚本正常加载）
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        access_log off;
        try_files $uri $uri/ /index.php?$args;
    }

    # PHP解析规则（适配你的PHP版本和FPM路径）
    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

# HTTP强制跳转HTTPS
server {
    listen 80;
    server_name mywebwoo.com;
    return 301 https://$host$request_uri;
}

配置完成后，重启Nginx生效：

sudo nginx -t && sudo systemctl restart nginx

2. WordPress/Woocommerce调整 #

• 禁用默认前端主题：将Storefront主题切换为空白主题（或自定义极简主题），避免非指定路径意外加载WP前端。
• 站点URL设置：在WP后台「设置→常规」中，确保「站点地址（URL）」和「WordPress地址（URL）」均为https://mywebwoo.com。
• GraphQL插件验证：确保已安装并激活WPGraphQL for WooCommerce插件，访问https://mywebwoo.com/graphql测试接口正常。
• 前端访问限制（可选）：在主题functions.php中添加代码，双重限制WP前端仅允许指定路径访问：

add_action('template_redirect', 'restrict_wp_frontend_access');
function restrict_wp_frontend_access() {
    $allowed_paths = ['/wp-admin', '/graphql', '/checkout'];
    $current_uri = $_SERVER['REQUEST_URI'];

    if (!is_admin() && !in_array($current_uri, $allowed_paths) && strpos($current_uri, '/checkout') !== 0) {
        wp_die('', 'Not Found', ['response' => 404]);
    }
}

3. NextJS应用配置 #

• GraphQL请求配置：在NextJS中设置API请求地址为https://mywebwoo.com/graphql，用于获取产品、购物车、订单等数据。
• 结账跳转处理：当用户触发结账操作时，直接跳转至https://mywebwoo.com/checkout，确保WP会话（如登录状态、购物车数据）与NextJS保持一致。

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