Support dynamic assetPrefix

Currently this plugin only works if assetPrefix is set at build step. (meaning it only support a static CDN)

This is quite hard to get working when considering apps running on multiple environments; where each environment could have a different CDN (like a production CDN vs a staging CDN.)

Furthermore, Next.js expose many ways to make the assetPrefix dynamic (like switching CDN domain based on the app domain, etc.) By requiring a static CDN, this plugin cannot support any of those use cases.

[maciejmajewski]

So FYI I was able to make it work with following config:

publicPath: `${isServer ? "/_next/" : ""}static/images/`,
outputPath: "static/images/",
postTransformPublicPath: (p) => {
  if (isServer) {
    return `(process.env.ASSET_PREFIX || '') + ${p}`;
  } else {
    return `__webpack_public_path__ + ${p}`
  }
},

postTransformPublicPath is available in file-loader from version 4.2.0: https://github.com/webpack-contrib/file-loader/blob/master/CHANGELOG.md#420-2019-08-07

---

Edit: to clarify, this sample helps set proper public path when SSR doesn’t have proper value for __webpack_public_path__, it does not solve issues with having changing public path according to request.

[arefaslani]

@SBoudrias I don’t think that it’s possible to use dynamic imports in Webpack configuration as in the Next app. Because Next sets the asset prefix in the app level but we can’t do that when defining Webpack loaders. I think the best way for doing this is by using an env variable like process.env.ASSET_PREFIX and set the value of assetPrefix config in the Webpack file equal to this env variable. I mean something like

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  inlineImageLimit: 16384,
  assetPrefix: process.env.ASSET_PREFIX,
  webpack(config, options) {
    return config
  }
})

You can reopen this issue if you think this issue can be solved in a better way.