import { compileMdx } from 'nextra/compile' import { Tabs } from 'nextra/components' import { MDXRemote } from 'nextra/mdx-remote'

Npm2Yarn

Nextra uses @theguild/remark-npm2yarn package that replaces the code block that has npm2yarn metadata with <Tabs> and <Tabs.Tab> components from nextra/components.

The chosen tab is saved in the local storage, which will be chosen in future page renders.

Example

export async function Page() { const codeBlock = \``sh npm2yarn npm i -D @graphql-eslint/eslint-plugin ``` const rawJs = await compileMdx(${codeBlock}

Usage

${codeBlock}
~~~`)
  return <MDXRemote compiledSource={rawJs} components={{ $Tabs: Tabs }} />
}