如何修改NextJS页面Chunk路径，添加headless-architect前缀？

要给Next.js的静态Chunk资源路径添加/headless-architect前缀，只需在项目根目录的next.config.js中配置basePath即可，具体操作如下：

• 在next.config.js中添加basePath配置项，指定前缀路径：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    basePath: '/headless-architect',
  }
  
  module.exports = nextConfig
  

• 配置生效后，Next.js会自动为所有静态资源（包括Chunk文件、CSS、图片等）的路径加上/headless-architect前缀，生成的Chunk路径会变为你需要的https://localhost:3001/headless-architect/_next/static/chunks/pages/index-371116135d6e8e9c.js。

• 额外注意：

  • 使用Next.js自带的Link组件做路由跳转时，会自动适配basePath，无需手动修改；如果是自定义a标签跳转，需要自行补充前缀。
  • 引用public目录下的静态资源时，路径需包含basePath，或使用next/image、next/script等官方组件，它们会自动处理前缀。
  • 该配置在开发、生产环境均生效，无需区分环境单独设置。

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