NextJS 静态构建将哈希添加到资产路径

Question

我运行 next build && next export 会生成一个文件夹 out，太棒了。

查看例如 index.html 文件的源代码时，它按预期从<link rel="preload" href="/_next/static/css/styles.aa216922.chunk.css" as="style"/> 请求资产。

我很好奇是否可以在此路径前添加一个静态值，例如 <link rel="preload" href="/aaaaa/_next/static/css/styles.aa216922.chunk.css" as="style"/>

我试过弄乱配置：

https://nextjs.org/docs/api-reference/next.config.js/exportPathMap

next.config.js

exportTrailingSlash: true,
dir: 'aaaaa', // nope
outDir: 'aaaa', // nope
distDir: 'aaaaa', // nope

也许我没有正确使用这些？

Answer 1

根据https://nextjs.org/docs/api-reference/next.config.js/cdn-support-with-asset-prefix

解决这个问题的方法是assetPrefix

next.config.js

exportTrailingSlash：真， 资产前缀：process.env.SOME_ENV_VAR === 'AUTOBUILDNEXT' ？ '/aaaa' : '',

结果

<link rel="preload" href="/aaaaa/_next/static/css/styles.aa216922.chunk.css" as="style"/>

现实世界的用例可能是：

1. 让 Jenkins 设置一些哈希
2. 将该哈希值设置为环境变量
3. 将其作为参数传递给您的 docker 容器
4. 使用该哈希值作为资产前缀

next.config.js

exportTrailingSlash：真， 资产前缀：process.env.BUILD_ID ？ /${process.env.BUILD_ID}：''，