Hello people,
at the moment I'm trying to implement mdit-plugins into my NextJS Application. (https://mdit-plugins.github.io/)
I have only basic md experience but none with implementing this plugin.
First I have the following files:
next.config.mjs

/** @type {import('next').NextConfig} */
import createMDX from "@next/mdx";

const nextConfig =  {
    eslint: {
        ignoreDuringBuilds: true
    },

    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],

    webpack(config) {
        config.module.rules.push({
            test: /\.svg$/i,
            use: ["@svgr/webpack"],
        });

        return config;
    },

    experimental: {
        turbo: {
            rules: {
                '*.svg': {
                    loaders: ['@svgr/webpack'],
                    as: '*.js'
                }
            },
        }
    },
};

const withMDX = createMDX({
    // Add markdown plugins here, as desired
})

export default withMDX(nextConfig);

and mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
    return {
        ...components,
    }
}

music.tsx

import Music from "../../mdx/articles/music.mdx";

export default async function MusicPage() {


  return (
        <Music/>

and my music.mdx file:

# Title

[!warning]
This is my custom warning text

I tried with the help of chatGPT to guide myself into the right direction but that didn't work out. On the internet there is also no tutorial or help of any way how to solve this issue, maybe someone around here has any idea on how to get it to work with mdit-plugins from Github. I would like to extend my mdx commands by a few new components and therefore I'm trying to get it to work.

Has anyone an idea on how to solve this? Did I provide all necessary information?