next/config mock

I’m using storybook on a nextjs react project, and many of my components import next/config on runtime, but I cannot seem to make it work in storybook/webpack.

being able to override imports with mocked files in .storybook would be nice. For this particular case.

For some reason setting: config.resolve.alias['next/config'] = path.join(__dirname, 'mocks/next/config.js'); in webpack.config.js doesn’t work.

I’ve tried to set resolve and alias in webpack.config, but doing import getConfig() from 'next/config'; node_modules always takes precedence.

I can do the work if anyone has an idea why this happens.

[olimination]

I have used the following, which worked for me:

// .storybook/config.js file
....
import { setConfig } from 'next/config';

const {
	MY_ENV_CONFIG
} = process.env;

// Set the NextJS publicRuntimeConfig property
setConfig({
	publicRuntimeConfig: {
		myEnvConfig: MY_ENV_CONFIG,
	},
});

Hope this helps.

[jmayergit]

For those using a more recent version of Storybook the above solution goes in .storybook/preview.js