Is it possible to take a string and convert it into MDX? #2478

LinguiniThePasta · 2024-05-03T13:38:04Z

LinguiniThePasta
May 3, 2024

I'm using Next.js with MongoDB right now, and I want to make a blog page where I can put a markdown text into the body of the database, and have the markdown text be returned as a result of a GET request. Is there a way to convert the string into an MDX text and render it? I saw an earlier thread that uses a bundler to do this, but I'm not sure if it applies here

Answered by Wonkers0

May 4, 2024

Once you've fetched the MDX string from your database, you can pass it to the MDXRemote component like this:

import { MDXRemote } from 'next-mdx-remote/rsc'
 
export default async function Page() {
  // ...fetch MDX from MongoDB

  return <MDXRemote source={mdxString} />
}

If you have custom components you'd like to use, you can pass them to the same MDXRemote component via the components prop

I recommend looking into this section of the NextJS MDX documentation if you're still confused.

View full answer

ChristianMurphy · 2024-05-03T13:47:27Z

ChristianMurphy
May 3, 2024
Maintainer

Welcome @LinguiniThePasta! 👋

Is it possible to take a string and convert it into MDX?
I want to make a blog page where I can put a markdown text into the body of the database, and have the markdown text be returned as a result of a GET request.

MDX a language, a text based programming/document language, it is a string.
It can be sent over the wire without converting anything.
I'm not sure I understand your question.

I saw an earlier thread that uses a bundler to do this, but I'm not sure if it applies here

What is the "this" that you are trying to do?
What are you trying to do, build a blog platform? Using what kind of technology stack?

1 reply

LinguiniThePasta May 4, 2024
Author

I'm trying to make a blog page for myself to post blogs on, and I'm using NextJS with MongoDB.

I'm not sure I understand your question.

sorry if I phrased it badly, I meant how would I render the string that's sent over with a GET request?

Wonkers0 · 2024-05-04T08:27:12Z

Wonkers0
May 4, 2024

Once you've fetched the MDX string from your database, you can pass it to the MDXRemote component like this:

import { MDXRemote } from 'next-mdx-remote/rsc'
 
export default async function Page() {
  // ...fetch MDX from MongoDB

  return <MDXRemote source={mdxString} />
}

If you have custom components you'd like to use, you can pass them to the same MDXRemote component via the components prop

I recommend looking into this section of the NextJS MDX documentation if you're still confused.

2 replies

wooorm May 4, 2024
Maintainer

See also https://mdxjs.com/guides/mdx-on-demand/

LinguiniThePasta May 5, 2024
Author

I'm trying to render an array of strings now, and the issue's is that it's not rendering anything.
Here's the code:

import Head from "next/head";
import clientPromise from "../lib/mongodb";
import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
import {useEffect, useState} from "react";
import {bundleMDX} from "mdx-bundler";
import {MDXRemote} from "next-mdx-remote/rsc";
import { serialize } from 'next-mdx-remote/serialize'
import React from "react";

type ConnectionStatus = {
    isConnected: boolean;
};

export const getServerSideProps: GetServerSideProps<
    ConnectionStatus
> = async () => {
    try {
        await clientPromise;
        // `await clientPromise` will use the default database passed in the MONGODB_URI
        // However you can use another database (e.g. myDatabase) by replacing the `await clientPromise` with the following code:
        //
        // `const client = await clientPromise`
        // `const db = client.db("myDatabase")`
        //
        // Then you can execute queries against your database like so:
        // db.find({}) or any of the MongoDB Node Driver commands

        return {
            props: { isConnected: true },
        };
    } catch (e) {
        console.error(e);
        return {
            props: { isConnected: false },
        };
    }
};

const Home = ({ isConnected }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    const [blogs, setBlogs] = useState([]);
    useEffect(() => {
        async function fetchAllBlogs() {
            const response = await fetch("http://localhost:3000/api/getAllBlogs");
            const blogs = await response.json();
            const blogMDX = await Promise.all(blogs.map(async (blog) => (
                <li key={blog._id}>
                    <MDXRemote {...(await serialize(blog.mdx))} />
                </li>
            )))
            console.log("blogs ", blogs);
            console.log("blogsMDX ", blogMDX);
            setBlogs(blogMDX);
        }
        fetchAllBlogs();
    }, []);


    return (
        <div className="container">
            <Head>
                <title>Create Next App</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>

            <main>
                <div>
                    {isConnected ? (
                        <h2 className="subtitle">You are connected to MongoDB</h2>
                    ) : (
                        <h2 className="subtitle">
                            You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
                            for instructions.
                        </h2>
                    )}
                </div>
                <div>
                    {
                        blogs == null ? (
                            <div></div>
                        ) :(
                            blogs.length > 0 ? (
                                blogs.map( (blog:any, index) => {
                                    <React.Fragment key={index}>
                                        {blog}
                                    </React.Fragment>
                                })
                            ) : (
                                <p>Loading...</p>
                            )
                        )
                    }
                </div>
                <div>

                </div>
            </main>


        </div>
    );
}

export default Home;

it seems to be returning the correct thing, when I printed out blogMDX, here's the result:

blogsMDX  
Array [ {…} ]

0: Object { "$$typeof": Symbol("react.element"), type: "li", key: "66358b465fb668714ea217b3", … }

"$$typeof": Symbol("react.element")

_owner: null

_self: undefined

_source: Object { fileName: "C:\\Users\\lfh20\\WebstormProjects\\personal-webpage\\pages\\index.tsx", lineNumber: 46, columnNumber: 17 }

_store: Object { … }

key: "66358b465fb668714ea217b3"

props: Object { children: {…}, … }

ref: null

type: "li"

<prototype>: Object { … }

length: 1

and here's what blog printed:

blogs  
Array [ {…} ]

0: Object { _id: "66358b465fb668714ea217b3", mdx: "---\ntitle: Example Post\npublished: 2021-02-13\ndescription: This is some description\n---\n\n\n\nHere's a **neat** demo\n:" }

length: 1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mdx-js

Is it possible to take a string and convert it into MDX? #2478

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

mdx-js

Is it possible to take a string and convert it into MDX? #2478

Uh oh!

Uh oh!

LinguiniThePasta May 3, 2024

Replies: 2 comments · 3 replies

Uh oh!

ChristianMurphy May 3, 2024 Maintainer

Uh oh!

LinguiniThePasta May 4, 2024 Author

Uh oh!

Uh oh!

Wonkers0 May 4, 2024

Uh oh!

wooorm May 4, 2024 Maintainer

Uh oh!

Uh oh!

LinguiniThePasta May 5, 2024 Author

LinguiniThePasta
May 3, 2024

Replies: 2 comments 3 replies

ChristianMurphy
May 3, 2024
Maintainer

LinguiniThePasta May 4, 2024
Author

Wonkers0
May 4, 2024

wooorm May 4, 2024
Maintainer

LinguiniThePasta May 5, 2024
Author