Resolve webpack conflicts between Next.js and Storybook

[liamrdawson]

Currently Next.js and Storybook are each using their own webpack configs which aren't aware of each other. This can cause problems (For example, Storybook can't currently resolve a components path if it's imported using the directory and default index.js file, whereas Next.js can). For a streamlined workflow, we need both of these packages to be using a shared webpack config.

Acceptance Criteria Your projects webpack config is extended and managed from a single config file.

[liamrdawson]

https://storybook.js.org/docs/react/workflows/faq#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs

You can generally reuse webpack rules by placing them in a file that is require()-ed from both your next.config.js and your .storybook/main.js files. For example:

module.exports = {
  webpackFinal: async (baseConfig) => {
    const nextConfig = require('/path/to/next.config.js');

    // merge whatever from nextConfig into the webpack config storybook will use
    return { ...baseConfig };
  },
};