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

Question

我在我的 _document.js 中包含了几个静态文件和字体，如果在 next.config.js 中指定了一个，我想用 assetPrefix 作为前缀。我目前的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

根据 client-side / server-side 的需要，尝试使用 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;

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

With NextJS, I want to programmatically access assetPrefix from next.config.js

reactjs

webpack

next.js