reactjs - 使用 NextJS，我想以编程方式从 next.config.js 访问 assetPrefix

Question

我在 _document.js 中包含了几个静态文件和字体，如果 next.config 中指定了这些静态文件和字体，我希望将它们添加为 assetPrefix 前缀。 js。我当前的 next.config.js 如下:

module.exports = (phase) => {
        return withTypescript(
            withCSS(
                withImages(
                    withOffline({
                        env,
                        useFileSystemPublicRoutes: false,
                        assetPrefix: isProd ? 'https://d28d4ipdckjadl.cloudfront.net' : '',
                        inlineImageLimit: 16384,
                        ...

也就是说，我的 _document.js 具有如下代码:

<link
    rel="stylesheet"
    type="text/css"
    href={'/static/bootstrap.css'}
 />

我认为这可能是 webpack 的事情，所以我也标记了它。

Answer 1

根据客户端/服务器端需求，尝试使用 assetPrefix 的值创建 publicRuntimeConfig 和/或 serverRuntimeConfig 对象.

module.exports = (phase) => {
        return withTypescript(
            withCSS(
                withImages(
                    withOffline({
                        env,
                        useFileSystemPublicRoutes: false,
                        assetPrefix: isProd ? 'https://d28d4ipdckjadl.cloudfront.net' : '',
                        publicRuntimeConfig: {
                            MY_ASSET_PREFIX: isProd ? 'https://d28d4ipdckjadl.cloudfront.net' : ''
                        },
                        serverRuntimeConfig: {
                            MY_ASSET_PREFIX: isProd ? 'https://d28d4ipdckjadl.cloudfront.net' : ''
                        }
}

然后您可以像这样访问 _document.js 中的变量:

import getConfig from 'next/config';

...

const MY_ASSET_PREFIX = getConfig().publicRuntimeConfig.MY_ASSET_PREFIX;