Use phases in nextConfiguration?

[mattdell]

I'm trying to use the PHASE_DEVELOPMENT_SERVER variable to set a configuration parameter based on whether or not the app is running locally or compiled.

Here is what I'm trying to do:

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');

const withPlugins = require('next-compose-plugins');
const withTypescript = require('@zeit/next-typescript');
const withSass = require('@zeit/next-sass');

const s3BucketForAssets = `front-end-nextjs-${stage}`;

module.exports = withPlugins(
  [
    [withTypescript],
    [withSass],
  ],
  {
    target: 'serverless',
    assetPrefix: `https://${s3BucketForAssets}.s3-eu-west-1.amazonaws.com`,
    pageExtensions: ['tsx'],
    [PHASE_DEVELOPMENT_SERVER]: {
      assetPrefix: '',
    },
  },
);

But the assetPrefix is always applied.

It seems the phases are accessibile to the plugins but not the nextConfiguration. Is there any way of accesing the phase in the nextConfiguration?

Using vanilla Next.js it seems the following is possible, but also doesn't work using the plugin:

module.exports = (phase, { defaultConfig }) => {
  return {
    /* config options here */
  };
};

[cyrilwanner]

Hi @mattdell

Yes, it is true that phases are (currently) only available in the plugins array. However, you can also pass in your next config in the array with phase support. Something like this should work:

module.exports = withPlugins(
  [
    [{ assetPrefix: '' }, [PHASE_DEVELOPMENT_SERVER]],
    [withTypescript],
    [withSass],
  ],
  {
    target: 'serverless',
    assetPrefix: `https://${s3BucketForAssets}.s3-eu-west-1.amazonaws.com`,
    pageExtensions: ['tsx'],
  },
);

But I actually like your way of defining it and think it should also be possible to use phases directly in the next config as you did. I'll add this in the next version :)

[cyrilwanner]

I just published v2.2.0 to npm which now supports phase specific config in the next config object. Your initial code should now work. Thank you for creating this issue!