如何将Next.js项目接入现有HTML静态网站并通过/blog路径访问？

完全可以实现，核心是通过路由分发规则，将不同路径的请求指向对应的站点资源即可，以下是不同部署场景下的具体实现方案：

方案1：Nginx 自建部署实现 #

这是最常用的本地部署方案，操作步骤如下：

• 把原有HTML+CSS静态站点的所有资源上传到服务器指定目录，比如/var/www/main-site
• 处理Next.js博客项目：先在next.config.js中添加配置basePath: '/blog'，保证项目所有静态资源、路由前缀自动匹配/blog路径，避免资源加载失败。配置完成后构建项目，如果你用Next.js静态导出模式，就把导出的静态资源放到/var/www/blog-site目录；如果用服务端渲染模式，就后台启动Next.js服务，默认监听本地3000端口
• 修改Nginx的站点配置文件，添加路径匹配规则：

server {
    listen 80;
    server_name mysite.com;

    # 根路径匹配原有静态主站
    location / {
        root /var/www/main-site;
        index index.html index.htm;
        try_files $uri $uri/ =404;
    }

    # /blog路径匹配博客站点
    location /blog {
        # 如果你是Next.js静态导出版本，用以下配置
        alias /var/www/blog-site;
        try_files $uri $uri/ /blog/index.html;

        # 如果你是Next.js服务端运行版本，注释上面两行，用以下反向代理配置
        # proxy_pass http://localhost:3000;
        # proxy_set_header Host $host;
        # proxy_set_header X-Real-IP $remote_addr;
    }
}

• 配置完成后执行nginx -s reload重载配置即可生效。

方案2：托管平台部署实现 #

如果你用Vercel、Netlify这类托管平台部署，不需要自己管理服务器，直接配置重写规则即可：

• 主站和博客可以分开独立部署，拿到各自的内部部署地址
• 在托管平台的配置文件中添加重写规则，以Vercel的vercel.json为例：

{
  "rewrites": [
    { "source": "/blog/:path*", "destination": "<博客部署内部地址>/:path*" },
    { "source": "/:path*", "destination": "<主站部署内部地址>/:path*" }
  ]
}

方案3：CDN 路由规则实现 #

如果你用Cloudflare等CDN服务，直接在CDN后台配置页面规则即可：

• 添加规则匹配mysite.com/blog/*路径，将请求转发到博客站点的部署地址
• 其余路径默认转发到原有静态主站的部署地址

后续操作 #

配置完成后，直接在原有静态站的导航栏添加<a href="/blog">博客</a>入口即可，不需要修改其他逻辑。如果你的博客调用Strapi API，记得把mysite.com添加到Strapi的CORS允许列表中，避免接口跨域报错。

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