How can I improve my setup? (currently doing client side rendering when I know there's a better way)

[colinsteidtmann]

Current packages: NextJS v.13, @next/mdx, @mdx-js/react

I have a personal site and here's the folder structure, stored locally on GitHub within the project, that I like:
|__content
|-- - author
| ------about
|--------- index.mdx
|--------- selfie.jpg
|-- - notes
| ------note 1
|--------- index.mdx
|--------- pic1.jpg
| ------note 2
|--------- index.mdx
|--------- pic2.jpg
|___src
|-- notes
| ------[slug].js
| ------index.js
|-- _app.js
|-- about.js
|-- index.js

I like to import my mdx content as a component and show it inside by js pages, like in about.js and notes/[slug].js. This is fine for static imports, but it's bad for dynamic imports such as in [slug].js where I use dynamic routing. Here's how I'm currently getting around it:

// [slug].js
export default function Note({ metadata }) {
    const { title, date, tags, lastmod, type, slug } = metadata;
    return (
        <>
            <h1>{title}</h1>
            <MdxRenderer type={type} slug={slug} />
        </>
    );
}

//components/MdxRenderer.js
// Client side rendering of the mdx file. TODO: Find a way to do this with pre-render
export default function MdxRenderer({ type, slug }) {
    const [mdxModule, setMdxModule] = useState();
    useEffect(() => {
        (async () => {
            const module = await import(`../content/${type}/${slug}/index.mdx`);
            setMdxModule(module);
        })();
    }, []);
    const Content = mdxModule ? mdxModule.default : Fragment;
    return <Content />;
}

See, the problem is that I'm client side rendering b/c I'm compiling the MDX file in useEffect when I know there should be a better way. The content is within the folder. I tried using NextJS getStaticProps() but dynamically importing the mdx module via const module = await import(``../content/${type}/${slug}/index.mdx``); returns a MdxContent() function to compile the content (I think). I can't run this function inside getStaticProps because it says something about "you can only use hooks inside function components." I also tried passing this as a prop to my component (by serializing/stringifying it inside getStaticProps and then de-serializing/rebuilding it inside the Note function component) but when I tried running it then I got an error saying I didn't have the webpack modules available that MdxContent() uses. This would've been pointless anyways b/c then I'd still be doing client side rendering and compiling the MDX content on the client side.

TLDR;
My Goal: compile the content as few times as compile and do it with pre-generation via getStaticProps or server-side
My Problem: I can't do this for dynamic paths to mdx content.

--- Extra
I tried mdx-bundler but I don't like it because it uses esbuild when NextJS already has webpack/turbopack and they don't make it easy to use a provider like @mdx-js/react and using the package required adding lots of code bloat.

[wooorm]

Did you see this guide?: https://mdxjs.com/guides/mdx-on-demand/

For the first problem, hooks, in Next.js: perhaps you can do this without a hook: these getStaticProps things from Next.js can run async things.

Second, webpack modules, indeed: if you have MDX files that have further imports, we don‘t bundle those for you. This project only compiles MDX files to JS. It doesn’t bundle further files.

Third, on the react provider: you likely don’t need providers. They probably only make things slower. You can pass components. https://mdxjs.com/docs/using-mdx/#mdx-provider

[colinsteidtmann]

Alright, I came back to this today and really tried to get it to work. I almost got it working but I still have an issue: I can't use an imported React component inside my MDX file. Webpack complains about an invalid URL. I tried setting baseURL but that didn't work either. Here's the setup: (NextJS)

Inside pages/notes/[slug]

export async function getStaticPaths() {
  const slugs = getSlugs();
  return {
    paths: slugs.map((slug) => {
      return {
        params: {
          slug: slug,
        },
      };
    }),
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const slug = params.slug;
  let { content, metadata } = getFileBySlug(slug);
  const url = path.join(process.cwd(), "content", "notes", slug, "/");
  content = String(await compile(content, { development: false, outputFormat: 'function-body', useDynamicImport: true, baseUrl: `${url}` }));
  return { props: { content, metadata } };
}

export default function SpecificNote({ content, metadata }) {
  const { title, date, lastmod, slug, description, keywords } = metadata;
  return (
    <>
      <NoteSEO
        title={title}
        description={description}
        date={date}
        lastmod={lastmod}
        keywords={keywords}
        url={`${siteMetadata.siteUrl}/notes/${slug}/`}
      />
      <MdxLayout lastmod={formatDate(lastmod)}>
        <h1>{title}</h1>
        <MdxRenderer metadata={metadata} content={content} />
      </MdxLayout>
    </>
  );
}

Inside my MdxRenderer Component (components/MdxRenderer)

export default function MdxRenderer({ metadata, content }) {
  const [mdxModule, setMdxModule] = useState();
  const Content = mdxModule ? mdxModule.default : Fragment;
  const { slug, draft } = metadata;
  useEffect(() => {
    (async () => {
      //const mdxModule = await import(`../content/notes/${slug}/index.mdx`);
      setMdxModule(await run(content, runtime));
    })();
  }, [slug, content]);

  if (draft) return <p>🚧 Under Construction</p>;
  return <Content />;
}

Finally, inside content/notes/[slug]/, I have 2 files: index.mdx and a FacebookPost.js that exports a JSX component

import FacebookPost from "./FacebookPost.js";

# Hello

The error I get:

[colinsteidtmann]

I updated the baseURL to be the entire path to my slug director, but then the error I get is: "VM29404:5 Not allowed to load local resource: "file:///C:/Users/...../content/notes/[slug]/FacebookPost.js"

[colinsteidtmann]

Another update, I created a minimal code sandbox for it

[wooorm]

Right, that’s my second point above. We don’t do that. Webpack doesn’t do that either.