如何在个人站点中组合使用原生HTML落地页与Next.js开发的React博客

轻量化多模块部署+开发路径匹配方案 #

完全不需要微前端，用「开发环境代理+生产环境域名映射」的组合方案就能实现，代码零侵入，配置量极少：

• 开发环境配置：
  1. 两个项目完全独立维护，落地页用静态服务启动（比如端口3001），Next.js博客项目单独启动（比如端口3000）
  2. 在Next.js的next.config.js中新增rewrite规则，开发环境下将/blog/**路径的请求交由Next.js自身处理，将/**路径的所有请求转发到落地页的静态服务地址http://localhost:3001，这样访问localhost:3000就是落地页，访问localhost:3000/blog就是博客，完全符合你的开发路径要求
  3. 如果不想改Next.js配置，也可以用本地代理工具直接配置路径转发规则，效果完全一致
• 生产环境配置：
  不需要修改任何业务代码，直接在部署平台配置域名映射即可：落地页打包后的静态资源绑定主域名DOMAIN.com，Next.js博客项目打包后绑定子域名blog.DOMAIN.com，两个项目独立部署互不干扰。

纯HTML项目使用TypeScript的构建配置建议 #

推荐用Vite做轻量构建，零配置就能满足需求，完全适配纯静态落地页的场景：

• 直接执行npm create vite@latest landing -- --template vanilla-ts初始化项目，默认支持TS编译、热更新、资源压缩，打包后输出纯静态HTML/CSS/JS文件，和你原来用纯HTML/CSS/JS开发的产出完全一致
• 如果你要手动配置最小化的构建流程，只需要装typescript和esbuild两个依赖：
  1. 根目录新增tsconfig.json，配置编译目标为ES6，指定TS源码目录和JS输出目录即可
  2. 开发时用esbuild --watch监听TS文件变化实时编译，生产打包时加--minify参数压缩代码，整套配置不超过20行
• 不推荐运行时编译TS的方案，生产环境必须预编译为JS再引入HTML，避免性能损耗。

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