i18n-mdx.tsx

// Working Version :)

import React from 'react';
import {NextPageContext} from "next";
import {i18n} from '../../i18n'
import ReactMarkdown from "react-markdown";
import matter from "gray-matter";
import StandardPage from "../../components/layout/standard-page";
import {MDXProvider} from "@mdx-js/react";


interface Props {
    markdown: string,
    meta: Object
}

const I18NMDXComponent = ({markdown, meta}: Props) => {
    return (
        <StandardPage {...meta}>
            <div className="content">
                <ReactMarkdown>
                    {markdown}
                </ReactMarkdown>
            </div>
        </StandardPage>
    );
};

export const getServerSideProps = async (ctx: NextPageContext): Promise<any> => {
    const fs = require("fs")
    const currentLanguage = ctx.req ? ctx.req.language : i18n.language
    const key = ctx.query.key;
    const contents = fs.readFileSync(`src/markdown/${currentLanguage}/${key}.md`).toString()
    const matterResult = matter(contents)
    return {
        props: {
            markdown: matterResult.content,
            meta: matterResult.data,
        }
    }
}

export default I18NMDXComponent;