How can I use @shikijs/rehype in next.js mdx?

[cxl2020MC]

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

Describe the bug

I use @shikijs/rehype in nextjs-mdx in this way.

import { notFound } from "next/navigation";
import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
import blogConfig from "@/blog.config";
import rehypeShiki from '@shikijs/rehype'

import "@/app/css/posts.css";
import "@/app/css/markdown.css";

const mdx_config: MDXRemoteProps["options"] = {
  mdxOptions: {
    remarkPlugins: [],
    rehypePlugins: [[rehypeShiki, {
      themes: {
        light: 'catppuccin-latte',
        dark: 'catppuccin-mocha',
      },
    }],],
  },
}

export default async function PostPage(props: { params: Promise<{ slug: string }> }) {
  const params = await props.params;
  const res = await fetch(`${blogConfig.api}/posts/${params.slug}`, { next: { revalidate: 30 } });
  const post = await res.json();
  console.log(post)
  if (!post.data) {
    notFound();
  }
  const md_content = post.data.md_content;
  console.log(md_content)

  return (
    <div className="posts card">
      <MDXRemote source={md_content} options={mdx_config} />;
    </div>
  )
}

It can render code blocks as expected.
But this is very slow, and it takes 20 seconds to render the following content on vercel.

# YS YYDS
测试测试
(```javascript
console.log('hello World！你干嘛嗨害哟 1145141919810')
(```
 gfytfytftftyfytfytfy

In order to display the code block with ( in front.

This is a warehouse about the above problems.

Reproduction

https://github.com/cxl2020MC/next-blog/blob/main/src/app/posts/%5Bslug%5D/page.tsx

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests

[Plumbiu]

You can try generateStaticParams to generate static pages(SSG), but it's still slow in dev mode:

export function generateStaticParams() {
  return [
    { slug: 'foo' }
  ]
}

For SSR, I think Instrumentation API will be helpful:

// instrumentation.ts
import { getSingletonHighlighterCore as initShiki } from 'shiki/core'

export async function register() {
  await initShiki(options)
}

[cxl2020MC]

You can try generateStaticParams to generate static pages(SSG), but it's still slow in dev mode:

export function generateStaticParams() {
  return [
    { slug: 'foo' }
  ]
}

For SSR, I think Instrumentation API will be helpful:

// instrumentation.ts
import { getSingletonHighlighterCore as initShiki } from 'shiki/core'

export async function register() {
  await initShiki(options)
}

My program is deployed in vercel.
It uses ssr.
This seems to be initialized in advance, which should be of no use to vercel.

[Plumbiu]

@shikijs/rehype use getSingletonHighlighter, init in advance means you don’t need to visit the article page and then load shiki.