如何在Vercel同一域名下部署两个独立Next.js仓库

一、Vercel平台配置（针对博客项目Repository B） #

• 确保Repository B已在Vercel完成初始部署，获得临时域名（如xxx.vercel.app）
• 进入Repository B的Vercel项目后台，打开「Settings」→「Domains」
• 在输入框中添加mypage.com/blog，Vercel会自动识别这是路径前缀绑定，完成域名验证（因mypage.com已托管在Vercel，验证通常自动通过）
• 等待Vercel完成域名配置生效，此时访问mypage.com/blog会默认指向Repository B的临时域名，但还需调整项目适配路径前缀

二、博客项目（Repository B）的Next.js配置 #

1. 修改项目根目录的next.config.js，添加basePath配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/blog',
  // 保留原有其他配置
}

module.exports = nextConfig

2. 调整项目内链接与资源引用：
   • 使用next/link的内部路由无需手动添加/blog，Next.js会自动拼接basePath，例如<Link href="/posts">会解析为/blog/posts
   • public目录下的静态资源（图片、字体等）直接使用相对路径即可，如/images/post-cover.jpg，Next.js会自动加上/blog前缀
   • 若需手动拼接绝对路径，可使用环境变量process.env.NEXT_PUBLIC_BASE_PATH，示例：

     const bannerUrl = `${process.env.NEXT_PUBLIC_BASE_PATH}/images/banner.png`
     

3. 若使用站点地图、SEO插件（如next-sitemap），需同步配置basePath参数，确保生成的资源路径正确

三、着陆页项目（Repository A）的适配配置 #

• 添加跳转到博客的链接时，直接使用<Link href="/blog">或普通<a href="/blog">即可，Vercel的路由规则会自动转发请求到Repository B的部署
• 若需在着陆页中调用博客项目的API获取数据（如最新文章列表），需在Repository B的next.config.js中配置CORS允许跨域：

// Repository B的next.config.js
const nextConfig = {
  basePath: '/blog',
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: 'https://mypage.com' },
        ],
      },
    ]
  },
}

四、测试验证 #

• 重新部署两个项目到Vercel
• 访问mypage.com确认着陆页正常加载，访问mypage.com/blog及子路径（如/blog/posts/1）确认博客功能、链接、静态资源均正常
• 测试着陆页到博客的跳转是否流畅，API调用（若有）是否正常返回数据

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