Next.js

CodeGloss works with Next.js in two ways:

  1. Direct React usage — import CodeGloss from @codegloss/react and use it as a regular component
  2. Authoring in MDX — install remark-codegloss and use the fenced code block syntax

Install

For direct React usage:

npm install codegloss @codegloss/react

For MDX authoring (also installs the remark plugin):

npm install codegloss @codegloss/react @next/mdx @mdx-js/loader

@codegloss/react declares codegloss and react as peer dependencies with a permissive React range (>=16.14.0) — npm/pnpm/yarn won't error on any modern React version.

Direct React usage (no MDX)

Just import and use it. The 'use client' directive is needed because the component is interactive:

No CSS import needed. The Web Component bundles its own styles via Shadow DOM.

MDX authoring with @next/mdx

Configure the remark plugin in next.config.ts. If you've declared a highlight in codegloss.config.ts (see Syntax Highlighters), thread it through so blocks are pre-highlighted at build:

Now any .mdx file under app/ can use the codegloss syntax:

The plugin auto-injects import { CodeGloss } from '@codegloss/react' into the MDX file at build time. You don't need to import anything yourself.

With next-mdx-remote

If you load MDX from a CMS or filesystem:

In your render component, pass CodeGloss via the components map:

When loading the component this way, set skipImport: true on the remark plugin so it doesn't auto-inject an import (you're providing it via the components map):

Static export

CodeGloss is fully compatible with output: 'export' for static sites. This very documentation site uses Next.js with static export and ships to GitHub Pages.