@ipikuka/mdx

This package is an opinionated wrapper of next-mdx-remote-client. Since it is peer dependent to next-mdx-remote-client you need to install next-mdx-remote-client as well.

When should I use this?

The @ipikuka/mdx is battery-included. You don't need to add any remark, rehype, remark plugins because I included them already according to my expertise. If you need to add a plugin let me know opening an issue.

The plugins used in the @ipikuka/mdx comes from @ipikuka/plugins.

@ipikuka/plugins provides remarkPlugins, rehypePlugins, recmaPlugins, and remarkRehypeOptions.

Thanks to @ipikuka/plugins, the markdown content or MDX content will support:

• bold texts, italic texts,
• lists, blockquotes, headings,
• table of contents (TOC),
• containers, admonitions, callouts,
• marked texts, inserted texts,
• centered paragraphs, aligned paragraphs,
• guillements,
• gfm syntax (tables, strikethrough, task lists, autolinks etc.),
• highlighted and numbered code fences,
• code titles,
• autolink for headers,
• definition lists etc. and many more.

Installation

This package is suitable for ESM module only. In Node.js (16.0+), install with npm:

1npm install @ipikuka/mdx next-mdx-remote-client
2
3# if you are using react@19 specifically
4npm install @ipikuka/mdx next-mdx-remote-client@2
5
6# if you are using react@18 specifically
7npm install @ipikuka/mdx next-mdx-remote-client@1

or

1yarn add @ipikuka/mdx next-mdx-remote-client
2
3# if you are using react@19 specifically
4yarn add @ipikuka/mdx next-mdx-remote-client@2
5
6# if you are using react@18 specifically
7yarn add @ipikuka/mdx next-mdx-remote-client@1

Usage

This package is peer dependant with react, react-dom and next-mdx-remote-client so it is assumed that you have already installed them.

Example with Next.js pages router

The @ipikuka/mdx provides a serialize function. The serialize function is an opinionated wrapper of the serialize function of the next-mdx-remote-client which is a set of light utilities allowing MDX to be loaded within getStaticProps or gerServerSideProps and hydrated correctly on the client.

The @ipikuka/mdx provides also hydrate function and MDXClient component for "pages" router.

See for more details about next-mdx-remote-client at here.

1import { serialize } from "@ipikuka/mdx/serialize";
2import { MDXClient } from "@ipikuka/mdx";
3
4import ErrorComponent from "../components/ErrorComponent";
5import { TableOfComponent, Test } from "../mdxComponents";
6
7const components = {
8  TableOfComponent,
9  Test,
10  wrapper: ({ children }) => <div className="mdx-wrapper">{children}</div>,
11};
12
13export default function Page({ mdxSource }) {
14  if ("error" in mdxSource) {
15    return <ErrorComponent error={mdxSource.error} />;
16  }
17
18  return <MDXClient {...mdxSource} components={components} />;
19}
20
21export async function getStaticProps() {
22  const source = `---
23title: My Article
24---
25<TableOfComponent toc={toc} />
26
27Some **bold** and ==marked== text in MDX.
28
29~|> Centered paragraph (thanks to remark-flexible-paragraphs)
30
31With a component <Test />
32
33::: tip The Title of The Container
34The content of the tip (thanks to remark-flexible-containers)
35:::
36`;
37
38  const mdxSource = await serialize({
39    source,
40    options: { parseFrontmatter: true },
41  });
42
43  return { props: { mdxSource } };
44}

Example with Next.js app router

The @ipikuka/mdx provides evaluate function and MDXRemote component for "app" router.

See for more details about next-mdx-remote-client at here.

1import { Suspense } from "react";
2import { MDXRemote } from "@ipikuka/mdx/rsc";
3
4import { ErrorComponent, LoadingComponent } from "../components";
5import { TableOfComponent, Test } from "../mdxComponents";
6
7const components = {
8  TableOfComponent,
9  Test,
10  wrapper: ({ children }) => <div className="mdx-wrapper">{children}</div>,
11};
12
13export default async function Page() {
14  const source = `---
15title: My Article
16---
17<TableOfComponent toc={toc} />
18
19Some **bold** and ==marked== text in MDX.
20
21~|> Centered paragraph (thanks to remark-flexible-paragraphs)
22
23With a component <Test />
24
25::: tip The Title of The Container
26The content of the tip (thanks to remark-flexible-containers)
27:::
28`;
29
30  return (
31    <Suspense fallback={<LoadingComponent />}>
32      <MDXRemote
33        source={source}
34        options={{ parseFrontmatter: true }}
35        components={components}
36        onError={ErrorComponent}
37      />
38    </Suspense>
39  );
40}

Options

@ipikuka/mdx has the same options with next-mdx-remote-client as a wrapper.

See next-mdx-remote-client.

Types

@ipikuka/mdx is fully typed with TypeScript and exposes the same types as next-mdx-remote-client does.

See next-mdx-remote-client.

Compatibility

It is a Nextjs compatible package.

Security

This package has the same security concerns with next-mdx-remote-client.

License

MIT License © ipikuka

Keywords

🟩 unified 🟩 @mdx-js/mdx 🟩 next-mdx-remote-client 🟩 @ipikuka/plugins 🟩 markdown 🟩 mdx