typed-mdx v0.1.2
typed-mdx
typed-mdx
is heavily inspired by Contentlayer and
Astro Content Collection.
It comes from the frustration that Contentlayer is not maintained anymore (and wanted to do too much as we only want to support md and mdx ) and there is no other alternative to Astro Content Collection for Next.js.
Installation
npm install typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx remark-frontmatter
yarn add typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx remark-frontmatter
pnpm add typed-mdx zod @next/mdx @mdx-js/loader @mdx-js/react @types/mdx remark-frontmatter
Usage
In a Next.js application, create a src/content
folder. Then, create a
collections.ts
.
We will define our collections in that file:
import { defineCollection } from "typed-mdx";
import { z } from "zod";
const collections = {
blog: defineCollection({
folder: "blog",
schema: z.object({
title: z.string(),
publishedAt: z.string().transform((str) => new Date(str)),
tags: z.array(z.string()).optional(),
author: z.string(),
}),
}),
} as const;
export default collections;
You can define as many collection as you want. Then, in the file you want to use your collection, import the exported object and use it in your components:
import collections from "@/content/collections";
export default async function Page() {
const posts = await collections.blog.getAll();
return (
<ul>
{posts.map((post) => (
<li key={post.title}>
<Link href={`/blog/${post.metadata.slug}`}>
{post.title} {post.author && <>by {post.author}</>}
</Link>
</li>
))}
</ul>
);
}
To show the MDX content, please note that it works with the @next/mdx
package.
Setup the next.config.mjs
:
// Only support ESM so next.config.mjs
import remarkFrontmatter from "remark-frontmatter";
import createMDX from "@next/mdx";
/** @type {import('next').NextConfig} */
const nextConfig = {
// Configure `pageExtensions` to include MDX files
pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
};
const withMDX = createMDX({
options: {
// To remove frontmatter from rendering
remarkPlugins: [remarkFrontmatter],
},
});
export default withMDX(nextConfig);
If you are using the Next.js app
router, you'll need mdx-component.tsx
file
at the root of your project.
import type { MDXComponents } from "mdx/types";
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
};
}