Setting up React Styleguidist with Next.js and Typescript

Question

I am trying to setup React styleguidist with next.js and typescript, but I keep walking into problems. My current styleguide.config.js looks like this:

const path = require('path');

module.exports = {
  components: './components/**/*.tsx',
  propsParser: require('react-docgen-typescript').withCustomConfig('./tsconfig.json', {
    propFilter: { skipPropsWithoutDoc: true },
  }).parse,
  webpackConfig: {
    resolve: {
      alias: {
        static: path.join(__dirname, 'static'),
        lib: path.join(__dirname, 'lib'),
      },
    },
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader',
            },
            {
              loader: 'babel-loader',
            },
          ],
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                outputPath: 'images',
              },
            },
          ],
        },
      ],
    },
  },
};

If i just have a very basic component with just basic jsx everything works, but once I want to assign props for example for styled components, typescript starts complaining. Also importing stuff from outside the components folder is causing issues. Can maybe someone point me to an example of how they set it up?