Next.jsのSSRでhighlight.jsを導入するもっともシンプルな手順

以下のコマンドでプロジェクトディレクトリ直下にhighlight.jsをインストールします。

npm install highlight.js

コード部分のコンポーネントを作成します。

codeBlock.tsx

import hljs from 'highlight.js'
// githubスタイルを導入する
import 'highlight.js/styles/github.css'

type Props = {
    code: string,
}

export default function CodeBlock(props: Props) {
    // コードから自動的に言語を識別してハイライトする
    const highlightedCode: string = hljs.highlightAuto(props.code).value
    return (
        <pre>
            <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
        </pre>
    )
}

また、使用する言語があらかじめ決まっている場合は明示的に指定できます。
明示することによって言語の誤推論による事故が防止でき、ライブラリのインポート量を大幅に削減することができます。

codeBlock.tsx

- import hljs from 'highlight.js'
+ import hljs from 'highlight.js/lib/core'
// githubスタイルを導入する
import 'highlight.js/styles/github.css'

+ // TypeScriptをインポートする
+ hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'))

type Props = {
    code: string,
}

export default function CodeBlock(props: Props) {
    // TypeScriptで書かれたコードをハイライトする
-    const highlightedCode: string = hljs.highlightAuto(props.code).value
+    const highlightedCode: string = hljs.highlight(props.code, {language: 'typescript'}).value
    return (
        <pre>
            <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
        </pre>
    )
}

対応している言語およびスタイルはgithubでご確認ください。