assetPrefix is not respected

[ScriptedAlchemy]

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

14

What browser are you using?

chrome

What operating system are you using?

macOS

How are you deploying your application?

AWS SLS

Describe the Bug

Out ephemeral environments are configured during deploy via an env var. As of next 11.1.2, the assetPrefix does not seem to be respected and css & js assets are always loaded from the domain.

We use a pr query string to proxy to the right AWS buckets through stage.site.com.

We change the assetPrefix during SSR like this

export default class Document extends NextDocument {
  constructor(props) {
    super(props);

    const { assetPrefix, __NEXT_DATA__ } = props;
    if (assetPrefix) {
      __NEXT_DATA__.assetPrefix = assetPrefix;
    }
  }

If I look in __NEXT_DATA__, i see my empheral URL listed there which would point my assets to the right origin, but SSR does not seem to respect it.

So my assets end up loading from stage.site.com/assets instead of prenv33.preprod.site.com/assets

Elsewhere in out app, we configure the asset prefix as follows

const { stage } = config.get('universal.env');
const { staticAssetsUrl } = config.get('public');

let assetPrefix = '';

if (stage === 'localdev') {
  assetPrefix = '';
} else if (staticAssetsUrl) {
  assetPrefix = staticAssetsUrl;
} else {
  assetPrefix = `https://${stage}.preprod.site.com/static/ecom-web-app`;
}

Expected Behavior

Asset prefix should be respected as its shown in __NEXT_DATA__

To Reproduce

Try changing the asset prefix dynamically in the route handler or custom app

[timneutkens]

Overriding internals like __NEXT_DATA__ is not supported so I'll convert this into a feature request.

[ScriptedAlchemy]

@timneutkens is there any way to hook back into it?

We cant upgrade past next 11.1 without all our PR envs failing since our assets are hosted on another lambda.

We have to do this to test different PRs against different backends and backend data

[ScriptedAlchemy]

Solved by hacking around next/heads own context provider.

class LuluHead extends Head {
  render() {
    return (
      // eslint-disable-next-line react/jsx-pascal-case
      <Head.contextType.Consumer>
        {/* eslint-disable-next-line react/jsx-pascal-case */}
        {value => <Head.contextType.Provider value={Object.assign(value, { assetPrefix: global.__dynamicAssetPrefix || '' })}>{super.render()}</Head.contextType.Provider>}
      </Head.contextType.Consumer>
);
  }

[ScriptedAlchemy]

Update. Custom server, next.setAssetPrefix() will do it. Once you call next() in custom server, it'll return a instance within methods you can dynamically set. One being asset prefix