"Could not find a declaration file for module 'react-syntax-highlighter'." というエラーが発生する時の解決方法 [Next.js + react-syntax-highlighter]

Next.jsでreact-syntax-highlighterを初めて使用する時にエラーが発生しました。

エラーメッセージ

Could not find a declaration file for module 'react-syntax-highlighter'. 'd:/web/my-app/node_modules/react-syntax-highlighter/dist/cjs/index.js' implicitly has an 'any' type. Try `npm i --save-dev @types/react-syntax-highlighter` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-syntax-highlighter';`

モジュール 'react-syntax-highlighter' の宣言ファイルが見つかりませんでした。'd:/web/my-app/node_modules/react-syntax-highlighter/dist/cjs/index.js' は暗黙的に 'any' 型を持っています。もし存在すれば `npm i --save-dev @types/react-syntax-highlighter` を試すか、`declare module 'react-syntax-highlighter';` を含む新しい宣言ファイル (.d.ts) を追加してください。

解決方法

エラーメッセージの通り、以下のコマンドを実行し、型をインストールします。

npm i --save-dev @types/react-syntax-highlighter

これでエラーが消えるはずです。

ソースコード

components/code-block.tsx

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

const CodeBlock = ({
    language,
    value,
}: {
    language: string,
    value: string,
}) => {
    return (
        <SyntaxHighlighter
            language={language}
            style={vscDarkPlus}
        >
            {value}
        </SyntaxHighlighter>
    );
}