如何将Next.js（Nextra）应用部署到子目录？

1. 确认Next.js/Nextra的basePath配置 #

首先保证next.config.js中正确设置basePath，如果需要适配Framer的静态托管，同时开启output: 'export'：

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/resources',
  output: 'export', // 生成纯静态文件，适配Framer托管
  trailingSlash: true, // 可选，避免部分静态文件路径返回404
}

module.exports = nextConfig

注意：所有内部链接使用Next.js的<Link>组件或相对路径，不要写硬编码的绝对路径（比如不要直接写/docs，用<Link href="/docs">即可，basePath会自动拼接成/resources/docs）。

2. 构建静态资源包 #

运行构建命令生成可部署的静态文件：

npm run build

构建完成后，项目根目录下会生成out文件夹，里面就是完整的静态站点文件。

3. Framer端部署配置 #

推荐用Framer的子站点部署方案来实现/resources子路径的托管：

• 登录Framer后台，创建新项目，选择「Import Static Site」
• 上传刚才生成的out文件夹，或者关联你的GitHub仓库实现自动构建部署
• 进入项目的「Domain」设置页，将部署路径指定为你的主域名下的/resources（格式：yourdomain.com/resources）
• 保存配置后触发部署，Framer会自动处理子路径的路由映射

如果主站已经在Framer托管，需要确保主站的路由规则不会和/resources前缀冲突（比如主站不要有同名页面或重定向规则）。

4. Route53 DNS验证 #

无需修改DNS记录——子路径部署属于服务器内部路由逻辑，只要你的主域名已经通过Route53正确解析到Framer的服务器（通常是CNAME或A记录），/resources的请求会自动被Framer路由到对应的文档站。

如果之前设置过域名重定向规则，检查是否有拦截/resources路径的规则，如有需暂时禁用或调整。

5. 验证部署结果 #

部署完成后，访问yourdomain.com/resources：

• 确认文档首页正常加载
• 点击内部链接检查跳转是否正确
• 验证图片、CSS、JS等静态资源是否加载正常（如果资源加载失败，检查next.config.js的basePath是否配置正确）

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