MDX Blog (v14 App router) with [slug] path structure.

[Ningensei848]

Summary

I want to create a static blog site with MDX in Next.js v14 (App Router).

However, following the page.mdx style would result in a large number of directories, which would make it difficult to divert the assets that have been used so far. Specifically, the following actions must be performed for all files:

1. file renaming
2. directory creation
3. relocation.

• Forerunner : https://github.com/beeinger/next-mdx-blog

---

I tried to solve this problem by using the Lazy Loading (next/dynamic) on Sequential Data Fetching, but this did not work either.
(I thought it might be possible to import by replacing component names with variables, but that didn't really work.)

How on earth can Dynamic Routing be implemented without destroying the directory structure of MDX files in an existing blog?

refs:

• Configuring: MDX | Next.js
• Functions: generateStaticParams | Next.js
• Routing: Dynamic Routes | Next.js

Additional information

import dynamic from "next/dynamic"

const getMDXContent = async (filepath: string) => {
  const MDXContent = dynamic(() => import(`${filepath}`))
  return MDXContent
}

export default async function Page({
  params: { slug },
}: {
  params: { slug: string }
}) {
  const filepath = await getMDXFilepath(slug)
  const MDXContent = await getMDXContent(filepath)

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MDXContent />
    </Suspense>
  )
}

Example

None

[pwalker]

I think the key is the use the package next-mdx-remote package from the docs. I was able to create a page that uses a dynamic url to fetch a markdown file from a folder via a slug like this:

import { compileMDX } from "next-mdx-remote/rsc";
import path from "path";
import { readFile, access } from "fs/promises";
import { notFound } from "next/navigation";

const POSTS_FOLDER = path.join(process.cwd(), "posts");

async function readPostFile(slug: string) {
  const filePath = path.resolve(path.join(POSTS_FOLDER, `${slug}.mdx`));

  try {
    await access(filePath);
  } catch (err) {
    return null;
  }

  const fileContent = await readFile(filePath, { encoding: "utf8" });
  return fileContent;
}

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  const markdown = await readPostFile(params.slug);

  if (!markdown) {
    notFound();
  }

  const { content, frontmatter } = await compileMDX<{ title: string }>({
    source: markdown,
    options: { parseFrontmatter: true },
  });

  // do something with frontmatter, like set metadata or whatever

  return <>{content}</>;
}

I hope this helps!

[earcherc]

Thanks a lot big dog

[hrc7505]

Thank you so much @pwalker. You saved my time.

[a-dasilva]

Thank you @pwalker !

[tate2301]

Life saver @pwalker

[LeslieOA]

+1 posts are annoying; granted.
But I'll make up for it by writing a "+1 posts are annoying" post on my new blog utilising this code. 🙏🏾

[witcradg]

Awesome